AutoRotator.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  1. // wrapped by build app
  2. define("dojox/widget/AutoRotator", ["dijit","dojo","dojox","dojo/require!dojox/widget/Rotator"], function(dijit,dojo,dojox){
  3. dojo.provide("dojox.widget.AutoRotator");
  4. dojo.require("dojox.widget.Rotator");
  5. (function(d){
  6. d.declare("dojox.widget.AutoRotator", dojox.widget.Rotator, {
  7. // summary:
  8. // A rotator that automatically transitions between child nodes.
  9. //
  10. // description:
  11. // Adds automatic rotating to the dojox.widget.Rotator. The
  12. // AutoRotator has parameters that control how user input can
  13. // affect the rotator including a suspend when hovering over the
  14. // rotator and pausing when the user manually advances to another
  15. // pane.
  16. //
  17. // example:
  18. // | <div dojoType="dojox.widget.AutoRotator" duration="3000">
  19. // | <div>
  20. // | Pane 1!
  21. // | </div>
  22. // | <div duration="5000">
  23. // | Pane 2 with an overrided duration!
  24. // | </div>
  25. // | </div>
  26. // suspendOnHover: boolean
  27. // Pause the rotator when the mouse hovers over it.
  28. suspendOnHover: false,
  29. // duration: int
  30. // The time in milliseconds before transitioning to the next pane. The
  31. // default value is 4000 (4 seconds).
  32. duration: 4000,
  33. // autoStart: boolean
  34. // Starts the timer to transition children upon creation.
  35. autoStart: true,
  36. // pauseOnManualChange: boolean
  37. // Pause the rotator when the pane is changed or a controller's next or
  38. // previous buttons are clicked.
  39. pauseOnManualChange: false,
  40. // cycles: int
  41. // Number of cycles before pausing.
  42. cycles: -1,
  43. // random: boolean
  44. // Determines if the panes should cycle randomly.
  45. random: false,
  46. // reverse: boolean
  47. // Causes the rotator to rotate in reverse order.
  48. reverse: false,
  49. constructor: function(){
  50. // summary:
  51. // Initializes the timer and connect to the rotator.
  52. var _t = this;
  53. // validate the cycles counter
  54. if(_t.cycles-0 == _t.cycles && _t.cycles > 0){
  55. // we need to add 1 because we decrement cycles before the animation starts
  56. _t.cycles++;
  57. }else{
  58. _t.cycles = _t.cycles ? -1 : 0;
  59. }
  60. // wire up the mouse hover events
  61. _t._connects = [
  62. d.connect(_t._domNode, "onmouseover", function(){
  63. // temporarily suspend the cycling, but don't officially pause
  64. // it and don't allow suspending if we're transitioning
  65. if(_t.suspendOnHover && !_t.anim && !_t.wfe){
  66. var t = _t._endTime,
  67. n = _t._now();
  68. _t._suspended = true;
  69. _t._resetTimer();
  70. _t._resumeDuration = t > n ? t - n : 0.01;
  71. }
  72. }),
  73. d.connect(_t._domNode, "onmouseout", function(){
  74. // if we were playing, resume playback unless were in the
  75. // middle of a transition
  76. if(_t.suspendOnHover && !_t.anim){
  77. _t._suspended = false;
  78. if(_t.playing && !_t.wfe){
  79. _t.play(true);
  80. }
  81. }
  82. })
  83. ];
  84. // everything is ready, so start
  85. if(_t.autoStart && _t.panes.length > 1){
  86. // start playing
  87. _t.play();
  88. }else{
  89. // since we're not playing, lets pause
  90. _t.pause();
  91. }
  92. },
  93. destroy: function(){
  94. // summary:
  95. // Disconnect the AutoRotator's events.
  96. d.forEach(this._connects, d.disconnect);
  97. this.inherited(arguments);
  98. },
  99. play: function(/*boolean?*/skipCycleDecrement, /*boolean?*/skipDuration){
  100. // summary:
  101. // Sets the state to "playing" and schedules the next cycle to run.
  102. this.playing = true;
  103. this._resetTimer();
  104. // don't decrement the count if we're resuming play
  105. if(skipCycleDecrement !== true && this.cycles > 0){
  106. this.cycles--;
  107. }
  108. if(this.cycles == 0){
  109. // we have reached the number of cycles, so pause
  110. this.pause();
  111. }else if(!this._suspended){
  112. this.onUpdate("play");
  113. // if we haven't been suspended, then grab the duration for this pane and
  114. // schedule a cycle to be run
  115. if(skipDuration){
  116. this._cycle();
  117. }else{
  118. var r = (this._resumeDuration || 0)-0,
  119. u = (r > 0 ? r : (this.panes[this.idx].duration || this.duration))-0;
  120. // call _cycle() after a duration and pass in false so it isn't manual
  121. this._resumeDuration = 0;
  122. this._endTime = this._now() + u;
  123. this._timer = setTimeout(d.hitch(this, "_cycle", false), u);
  124. }
  125. }
  126. },
  127. pause: function(){
  128. // summary:
  129. // Sets the state to "not playing" and clears the cycle timer.
  130. this.playing = this._suspended = false;
  131. this.cycles = -1;
  132. this._resetTimer();
  133. // notify the controllers we're paused
  134. this.onUpdate("pause");
  135. },
  136. _now: function(){
  137. // summary:
  138. // Helper function to return the current system time in milliseconds.
  139. return (new Date()).getTime(); /*int*/
  140. },
  141. _resetTimer: function(){
  142. // summary:
  143. // Resets the timer used to schedule the next transition.
  144. clearTimeout(this._timer);
  145. },
  146. _cycle: function(/*boolean|int?*/manual){
  147. // summary:
  148. // Cycles the rotator to the next/previous pane.
  149. var _t = this,
  150. i = _t.idx,
  151. j;
  152. if(_t.random){
  153. // make sure we don't randomly pick the pane we're already on
  154. do{
  155. j = Math.floor(Math.random() * _t.panes.length + 1);
  156. }while(j == i);
  157. }else{
  158. j = i + (_t.reverse ? -1 : 1)
  159. }
  160. // rotate!
  161. var def = _t.go(j);
  162. if(def){
  163. def.addCallback(function(/*boolean?*/skipDuration){
  164. _t.onUpdate("cycle");
  165. if(_t.playing){
  166. _t.play(false, skipDuration);
  167. }
  168. });
  169. }
  170. },
  171. onManualChange: function(/*string*/action){
  172. // summary:
  173. // Override the Rotator's onManualChange so we can pause.
  174. this.cycles = -1;
  175. // obviously we don't want to pause if play was just clicked
  176. if(action != "play"){
  177. this._resetTimer();
  178. if(this.pauseOnManualChange){
  179. this.pause();
  180. }
  181. }
  182. if(this.playing){
  183. this.play();
  184. }
  185. }
  186. });
  187. })(dojo);
  188. });