source: Dev/trunk/src/client/dojox/widget/AutoRotator.js @ 529

Last change on this file since 529 was 483, checked in by hendrikvanantwerpen, 11 years ago

Added Dojo 1.9.3 release.

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