Posted By

darrenl on 07/21/11


Tagged

slideshow Dojo rotator


Versions (?)

DOJO Rotator


 / Published in: JavaScript
 

  1. /**
  2.  * Author: Darren L
  3.  * Company: Graphtek Interactive
  4.  **/
  5.  
  6. google.load('dojo', '1.6');
  7.  
  8. function rotatorInit(args) {
  9. dojo.declare('Rotator', null, {
  10. element: 'rotator',
  11. current: 0,
  12. fadeSpeed: 1000,
  13. image: null,
  14. imageContainer: null,
  15. speed: 3000,
  16. timer: null,
  17. unorderedListItems: null,
  18. unorderedListItemsCount: 0,
  19. unorderedListItemsIndex: 0,
  20.  
  21. constructor: function(args) {
  22. var self = this;
  23.  
  24. dojo.safeMixin(this, args);
  25.  
  26. this.fadeSpeed = this.speed / 3;
  27. this.image = dojo.query('#rotator .image img')[0];
  28. this.imageContainer = dojo.query('#rotator .image')[0];
  29. this.unorderedListItems = dojo.query('ul li', this.element);
  30. this.unorderedListItemsCount = this.unorderedListItems.length - 1;
  31. this.timer = new dojox.timing.Timer(this.speed);
  32. this.timer.onStart = function() {
  33. self.rotate();
  34. }
  35. this.timer.onTick = function() {
  36. self.rotate();
  37. }
  38.  
  39. this.start(this.unorderedListItems);
  40.  
  41. dojo.connect(dojo.query('#rotator .previous')[0], 'onclick', function(event) {
  42. self.previous(event);
  43. });
  44. dojo.connect(dojo.query('#rotator .next')[0], 'onclick', function(event) {
  45. self.next(event);
  46. });
  47. },
  48. isInt: function(input) {
  49. return typeof(input) == 'number' && parseInt(input) == input;
  50. },
  51. next: function() {
  52. var nextIndex = this.unorderedListItemsIndex + 1;
  53.  
  54. if (nextIndex <= this.unorderedListItemsCount) {
  55. this.unorderedListItemsIndex = nextIndex;
  56. } else {
  57. this.unorderedListItemsIndex = 0;
  58. }
  59.  
  60. this.rotate(event, nextIndex);
  61.  
  62. },
  63. previous: function() {
  64. var previousIndex = this.unorderedListItemsIndex - 1;
  65.  
  66. if (previousIndex >= 0) {
  67. this.unorderedListItemsIndex = previousIndex;
  68. } else {
  69. this.unorderedListItemsIndex = this.unorderedListItemsCount;
  70. }
  71.  
  72. this.rotate(event, previousIndex);
  73. },
  74. rotate: function(event, nextIndex) {
  75. var target = ((event == undefined) ? undefined : ((event.currentTarget) ? event.currentTarget : event.srcElement));
  76. var self = this;
  77.  
  78. if (nextIndex == undefined || !this.isInt(nextIndex)) {
  79. var control = false;
  80. var nextIndex = 0;
  81. } else {
  82. var control = true;
  83. }
  84.  
  85. if (target == undefined) {
  86. var unorderedListItemsLength = this.unorderedListItemsCount - 1;
  87. var unorderedListItemsNextIndex = this.unorderedListItemsIndex + 1;
  88.  
  89. dojo.removeClass(this.unorderedListItems[this.unorderedListItemsIndex], 'current');
  90.  
  91. if (unorderedListItemsNextIndex == this.unorderedListItemsCount) {
  92. this.unorderedListItemsIndex = 0;
  93. } else {
  94. this.unorderedListItemsIndex = unorderedListItemsNextIndex;
  95. }
  96.  
  97. var image = dojo.query('.next_image', this.unorderedListItems[this.unorderedListItemsIndex])[0];
  98.  
  99. dojo.addClass(this.unorderedListItems[this.unorderedListItemsIndex], 'current');
  100.  
  101. try {
  102. dojo.fx.chain([
  103. dojo.fadeOut({
  104. duration: this.fadeSpeed,
  105. node: this.image,
  106. onEnd: function() {
  107. self.imageContainer.innerHTML = image.innerHTML;
  108. self.image = dojo.query('#rotator .image img')[0];
  109. }
  110. }),
  111. dojo.fadeIn({
  112. duration: this.fadeSpeed,
  113. node: self.image
  114. })
  115. ]).play();
  116. } catch(error) {
  117. console.log(error);
  118. }
  119.  
  120.  
  121. } else {
  122. self.timer.stop();
  123.  
  124. dojo.forEach(this.unorderedListItems, function(item, index) {
  125. if (dojo.hasClass(item, 'current')) {
  126. dojo.removeClass(item, 'current');
  127. }
  128. });
  129.  
  130. if (control) {
  131. var image = dojo.query('.next_image', self.unorderedListItems[nextIndex])[0];
  132. } else {
  133. var image = dojo.query('.next_image', target)[0];
  134. var unorderedListItemsNextIndex = dojo.indexOf(this.unorderedListItems, target);
  135.  
  136. this.unorderedListItemsIndex = unorderedListItemsNextIndex;
  137. }
  138.  
  139. dojo.addClass(target, 'current');
  140.  
  141. dojo.fx.chain([
  142. dojo.fadeOut({
  143. duration: this.fadeSpeed,
  144. node: this.image,
  145. onEnd: function() {
  146. self.imageContainer.innerHTML = image.innerHTML;
  147. self.image = dojo.query('#rotator .image img')[0];
  148. }
  149. }),
  150. dojo.fadeIn({
  151. duration: this.fadeSpeed,
  152. node: self.image
  153. })
  154. ]).play();
  155. }
  156.  
  157. },
  158. start: function() {
  159. var self = this;
  160.  
  161. this.timer.start();
  162.  
  163. this.unorderedListItems.forEach(function(item, index) {
  164. dojo.connect(item, 'onclick', function() {
  165. self.rotate(event);
  166. self.stop(self.timer);
  167. });
  168. });
  169. },
  170. stop: function(timer) {
  171. timer.stop();
  172. }
  173. });
  174.  
  175. new Rotator(args);
  176. }
  177.  
  178. google.setOnLoadCallback(function() {
  179. dojo.require('dojox.timing');
  180. dojo.require('dojo.fx');
  181.  
  182. setTimeout(function() {
  183. rotatorInit({
  184. speed: 5000
  185. });
  186. }, 1000);
  187. });

Report this snippet  

You need to login to post a comment.