]>
Commit | Line | Data |
---|---|---|
1354d172 AD |
1 | define("dojo/fx", [ |
2 | "./_base/lang", | |
3 | "./Evented", | |
4 | "./_base/kernel", | |
5 | "./_base/array", | |
6 | "./_base/connect", | |
7 | "./_base/fx", | |
8 | "./dom", | |
9 | "./dom-style", | |
10 | "./dom-geometry", | |
11 | "./ready", | |
12 | "require" // for context sensitive loading of Toggler | |
13 | ], function(lang, Evented, dojo, arrayUtil, connect, baseFx, dom, domStyle, geom, ready, require) { | |
14 | ||
15 | // module: | |
16 | // dojo/fx | |
17 | // summary: | |
18 | // TODOC | |
19 | ||
20 | ||
21 | /*===== | |
22 | dojo.fx = { | |
23 | // summary: Effects library on top of Base animations | |
24 | }; | |
25 | var coreFx = dojo.fx; | |
26 | =====*/ | |
27 | ||
28 | // For back-compat, remove in 2.0. | |
29 | if(!dojo.isAsync){ | |
30 | ready(0, function(){ | |
31 | var requires = ["./fx/Toggler"]; | |
32 | require(requires); // use indirection so modules not rolled into a build | |
33 | }); | |
34 | } | |
35 | ||
36 | var coreFx = dojo.fx = {}; | |
37 | ||
38 | var _baseObj = { | |
39 | _fire: function(evt, args){ | |
40 | if(this[evt]){ | |
41 | this[evt].apply(this, args||[]); | |
42 | } | |
43 | return this; | |
44 | } | |
45 | }; | |
46 | ||
47 | var _chain = function(animations){ | |
48 | this._index = -1; | |
49 | this._animations = animations||[]; | |
50 | this._current = this._onAnimateCtx = this._onEndCtx = null; | |
51 | ||
52 | this.duration = 0; | |
53 | arrayUtil.forEach(this._animations, function(a){ | |
54 | this.duration += a.duration; | |
55 | if(a.delay){ this.duration += a.delay; } | |
56 | }, this); | |
57 | }; | |
58 | _chain.prototype = new Evented(); | |
59 | lang.extend(_chain, { | |
60 | _onAnimate: function(){ | |
61 | this._fire("onAnimate", arguments); | |
62 | }, | |
63 | _onEnd: function(){ | |
64 | connect.disconnect(this._onAnimateCtx); | |
65 | connect.disconnect(this._onEndCtx); | |
66 | this._onAnimateCtx = this._onEndCtx = null; | |
67 | if(this._index + 1 == this._animations.length){ | |
68 | this._fire("onEnd"); | |
69 | }else{ | |
70 | // switch animations | |
71 | this._current = this._animations[++this._index]; | |
72 | this._onAnimateCtx = connect.connect(this._current, "onAnimate", this, "_onAnimate"); | |
73 | this._onEndCtx = connect.connect(this._current, "onEnd", this, "_onEnd"); | |
74 | this._current.play(0, true); | |
75 | } | |
76 | }, | |
77 | play: function(/*int?*/ delay, /*Boolean?*/ gotoStart){ | |
78 | if(!this._current){ this._current = this._animations[this._index = 0]; } | |
79 | if(!gotoStart && this._current.status() == "playing"){ return this; } | |
80 | var beforeBegin = connect.connect(this._current, "beforeBegin", this, function(){ | |
81 | this._fire("beforeBegin"); | |
82 | }), | |
83 | onBegin = connect.connect(this._current, "onBegin", this, function(arg){ | |
84 | this._fire("onBegin", arguments); | |
85 | }), | |
86 | onPlay = connect.connect(this._current, "onPlay", this, function(arg){ | |
87 | this._fire("onPlay", arguments); | |
88 | connect.disconnect(beforeBegin); | |
89 | connect.disconnect(onBegin); | |
90 | connect.disconnect(onPlay); | |
91 | }); | |
92 | if(this._onAnimateCtx){ | |
93 | connect.disconnect(this._onAnimateCtx); | |
94 | } | |
95 | this._onAnimateCtx = connect.connect(this._current, "onAnimate", this, "_onAnimate"); | |
96 | if(this._onEndCtx){ | |
97 | connect.disconnect(this._onEndCtx); | |
98 | } | |
99 | this._onEndCtx = connect.connect(this._current, "onEnd", this, "_onEnd"); | |
100 | this._current.play.apply(this._current, arguments); | |
101 | return this; | |
102 | }, | |
103 | pause: function(){ | |
104 | if(this._current){ | |
105 | var e = connect.connect(this._current, "onPause", this, function(arg){ | |
106 | this._fire("onPause", arguments); | |
107 | connect.disconnect(e); | |
108 | }); | |
109 | this._current.pause(); | |
110 | } | |
111 | return this; | |
112 | }, | |
113 | gotoPercent: function(/*Decimal*/percent, /*Boolean?*/ andPlay){ | |
114 | this.pause(); | |
115 | var offset = this.duration * percent; | |
116 | this._current = null; | |
117 | arrayUtil.some(this._animations, function(a){ | |
118 | if(a.duration <= offset){ | |
119 | this._current = a; | |
120 | return true; | |
121 | } | |
122 | offset -= a.duration; | |
123 | return false; | |
124 | }); | |
125 | if(this._current){ | |
126 | this._current.gotoPercent(offset / this._current.duration, andPlay); | |
127 | } | |
128 | return this; | |
129 | }, | |
130 | stop: function(/*boolean?*/ gotoEnd){ | |
131 | if(this._current){ | |
132 | if(gotoEnd){ | |
133 | for(; this._index + 1 < this._animations.length; ++this._index){ | |
134 | this._animations[this._index].stop(true); | |
135 | } | |
136 | this._current = this._animations[this._index]; | |
137 | } | |
138 | var e = connect.connect(this._current, "onStop", this, function(arg){ | |
139 | this._fire("onStop", arguments); | |
140 | connect.disconnect(e); | |
141 | }); | |
142 | this._current.stop(); | |
143 | } | |
144 | return this; | |
145 | }, | |
146 | status: function(){ | |
147 | return this._current ? this._current.status() : "stopped"; | |
148 | }, | |
149 | destroy: function(){ | |
150 | if(this._onAnimateCtx){ connect.disconnect(this._onAnimateCtx); } | |
151 | if(this._onEndCtx){ connect.disconnect(this._onEndCtx); } | |
152 | } | |
153 | }); | |
154 | lang.extend(_chain, _baseObj); | |
155 | ||
156 | coreFx.chain = /*===== dojo.fx.chain = =====*/ function(/*dojo.Animation[]*/ animations){ | |
157 | // summary: | |
158 | // Chain a list of `dojo.Animation`s to run in sequence | |
159 | // | |
160 | // description: | |
161 | // Return a `dojo.Animation` which will play all passed | |
162 | // `dojo.Animation` instances in sequence, firing its own | |
163 | // synthesized events simulating a single animation. (eg: | |
164 | // onEnd of this animation means the end of the chain, | |
165 | // not the individual animations within) | |
166 | // | |
167 | // example: | |
168 | // Once `node` is faded out, fade in `otherNode` | |
169 | // | dojo.fx.chain([ | |
170 | // | dojo.fadeIn({ node:node }), | |
171 | // | dojo.fadeOut({ node:otherNode }) | |
172 | // | ]).play(); | |
173 | // | |
174 | return new _chain(animations); // dojo.Animation | |
175 | }; | |
176 | ||
177 | var _combine = function(animations){ | |
178 | this._animations = animations||[]; | |
179 | this._connects = []; | |
180 | this._finished = 0; | |
181 | ||
182 | this.duration = 0; | |
183 | arrayUtil.forEach(animations, function(a){ | |
184 | var duration = a.duration; | |
185 | if(a.delay){ duration += a.delay; } | |
186 | if(this.duration < duration){ this.duration = duration; } | |
187 | this._connects.push(connect.connect(a, "onEnd", this, "_onEnd")); | |
188 | }, this); | |
189 | ||
190 | this._pseudoAnimation = new baseFx.Animation({curve: [0, 1], duration: this.duration}); | |
191 | var self = this; | |
192 | arrayUtil.forEach(["beforeBegin", "onBegin", "onPlay", "onAnimate", "onPause", "onStop", "onEnd"], | |
193 | function(evt){ | |
194 | self._connects.push(connect.connect(self._pseudoAnimation, evt, | |
195 | function(){ self._fire(evt, arguments); } | |
196 | )); | |
197 | } | |
198 | ); | |
199 | }; | |
200 | lang.extend(_combine, { | |
201 | _doAction: function(action, args){ | |
202 | arrayUtil.forEach(this._animations, function(a){ | |
203 | a[action].apply(a, args); | |
204 | }); | |
205 | return this; | |
206 | }, | |
207 | _onEnd: function(){ | |
208 | if(++this._finished > this._animations.length){ | |
209 | this._fire("onEnd"); | |
210 | } | |
211 | }, | |
212 | _call: function(action, args){ | |
213 | var t = this._pseudoAnimation; | |
214 | t[action].apply(t, args); | |
215 | }, | |
216 | play: function(/*int?*/ delay, /*Boolean?*/ gotoStart){ | |
217 | this._finished = 0; | |
218 | this._doAction("play", arguments); | |
219 | this._call("play", arguments); | |
220 | return this; | |
221 | }, | |
222 | pause: function(){ | |
223 | this._doAction("pause", arguments); | |
224 | this._call("pause", arguments); | |
225 | return this; | |
226 | }, | |
227 | gotoPercent: function(/*Decimal*/percent, /*Boolean?*/ andPlay){ | |
228 | var ms = this.duration * percent; | |
229 | arrayUtil.forEach(this._animations, function(a){ | |
230 | a.gotoPercent(a.duration < ms ? 1 : (ms / a.duration), andPlay); | |
231 | }); | |
232 | this._call("gotoPercent", arguments); | |
233 | return this; | |
234 | }, | |
235 | stop: function(/*boolean?*/ gotoEnd){ | |
236 | this._doAction("stop", arguments); | |
237 | this._call("stop", arguments); | |
238 | return this; | |
239 | }, | |
240 | status: function(){ | |
241 | return this._pseudoAnimation.status(); | |
242 | }, | |
243 | destroy: function(){ | |
244 | arrayUtil.forEach(this._connects, connect.disconnect); | |
245 | } | |
246 | }); | |
247 | lang.extend(_combine, _baseObj); | |
248 | ||
249 | coreFx.combine = /*===== dojo.fx.combine = =====*/ function(/*dojo.Animation[]*/ animations){ | |
250 | // summary: | |
251 | // Combine a list of `dojo.Animation`s to run in parallel | |
252 | // | |
253 | // description: | |
254 | // Combine an array of `dojo.Animation`s to run in parallel, | |
255 | // providing a new `dojo.Animation` instance encompasing each | |
256 | // animation, firing standard animation events. | |
257 | // | |
258 | // example: | |
259 | // Fade out `node` while fading in `otherNode` simultaneously | |
260 | // | dojo.fx.combine([ | |
261 | // | dojo.fadeIn({ node:node }), | |
262 | // | dojo.fadeOut({ node:otherNode }) | |
263 | // | ]).play(); | |
264 | // | |
265 | // example: | |
266 | // When the longest animation ends, execute a function: | |
267 | // | var anim = dojo.fx.combine([ | |
268 | // | dojo.fadeIn({ node: n, duration:700 }), | |
269 | // | dojo.fadeOut({ node: otherNode, duration: 300 }) | |
270 | // | ]); | |
271 | // | dojo.connect(anim, "onEnd", function(){ | |
272 | // | // overall animation is done. | |
273 | // | }); | |
274 | // | anim.play(); // play the animation | |
275 | // | |
276 | return new _combine(animations); // dojo.Animation | |
277 | }; | |
278 | ||
279 | coreFx.wipeIn = /*===== dojo.fx.wipeIn = =====*/ function(/*Object*/ args){ | |
280 | // summary: | |
281 | // Expand a node to it's natural height. | |
282 | // | |
283 | // description: | |
284 | // Returns an animation that will expand the | |
285 | // node defined in 'args' object from it's current height to | |
286 | // it's natural height (with no scrollbar). | |
287 | // Node must have no margin/border/padding. | |
288 | // | |
289 | // args: Object | |
290 | // A hash-map of standard `dojo.Animation` constructor properties | |
291 | // (such as easing: node: duration: and so on) | |
292 | // | |
293 | // example: | |
294 | // | dojo.fx.wipeIn({ | |
295 | // | node:"someId" | |
296 | // | }).play() | |
297 | var node = args.node = dom.byId(args.node), s = node.style, o; | |
298 | ||
299 | var anim = baseFx.animateProperty(lang.mixin({ | |
300 | properties: { | |
301 | height: { | |
302 | // wrapped in functions so we wait till the last second to query (in case value has changed) | |
303 | start: function(){ | |
304 | // start at current [computed] height, but use 1px rather than 0 | |
305 | // because 0 causes IE to display the whole panel | |
306 | o = s.overflow; | |
307 | s.overflow = "hidden"; | |
308 | if(s.visibility == "hidden" || s.display == "none"){ | |
309 | s.height = "1px"; | |
310 | s.display = ""; | |
311 | s.visibility = ""; | |
312 | return 1; | |
313 | }else{ | |
314 | var height = domStyle.get(node, "height"); | |
315 | return Math.max(height, 1); | |
316 | } | |
317 | }, | |
318 | end: function(){ | |
319 | return node.scrollHeight; | |
320 | } | |
321 | } | |
322 | } | |
323 | }, args)); | |
324 | ||
325 | var fini = function(){ | |
326 | s.height = "auto"; | |
327 | s.overflow = o; | |
328 | }; | |
329 | connect.connect(anim, "onStop", fini); | |
330 | connect.connect(anim, "onEnd", fini); | |
331 | ||
332 | return anim; // dojo.Animation | |
333 | }; | |
334 | ||
335 | coreFx.wipeOut = /*===== dojo.fx.wipeOut = =====*/ function(/*Object*/ args){ | |
336 | // summary: | |
337 | // Shrink a node to nothing and hide it. | |
338 | // | |
339 | // description: | |
340 | // Returns an animation that will shrink node defined in "args" | |
341 | // from it's current height to 1px, and then hide it. | |
342 | // | |
343 | // args: Object | |
344 | // A hash-map of standard `dojo.Animation` constructor properties | |
345 | // (such as easing: node: duration: and so on) | |
346 | // | |
347 | // example: | |
348 | // | dojo.fx.wipeOut({ node:"someId" }).play() | |
349 | ||
350 | var node = args.node = dom.byId(args.node), s = node.style, o; | |
351 | ||
352 | var anim = baseFx.animateProperty(lang.mixin({ | |
353 | properties: { | |
354 | height: { | |
355 | end: 1 // 0 causes IE to display the whole panel | |
356 | } | |
357 | } | |
358 | }, args)); | |
359 | ||
360 | connect.connect(anim, "beforeBegin", function(){ | |
361 | o = s.overflow; | |
362 | s.overflow = "hidden"; | |
363 | s.display = ""; | |
364 | }); | |
365 | var fini = function(){ | |
366 | s.overflow = o; | |
367 | s.height = "auto"; | |
368 | s.display = "none"; | |
369 | }; | |
370 | connect.connect(anim, "onStop", fini); | |
371 | connect.connect(anim, "onEnd", fini); | |
372 | ||
373 | return anim; // dojo.Animation | |
374 | }; | |
375 | ||
376 | coreFx.slideTo = /*===== dojo.fx.slideTo = =====*/ function(/*Object*/ args){ | |
377 | // summary: | |
378 | // Slide a node to a new top/left position | |
379 | // | |
380 | // description: | |
381 | // Returns an animation that will slide "node" | |
382 | // defined in args Object from its current position to | |
383 | // the position defined by (args.left, args.top). | |
384 | // | |
385 | // args: Object | |
386 | // A hash-map of standard `dojo.Animation` constructor properties | |
387 | // (such as easing: node: duration: and so on). Special args members | |
388 | // are `top` and `left`, which indicate the new position to slide to. | |
389 | // | |
390 | // example: | |
391 | // | .slideTo({ node: node, left:"40", top:"50", units:"px" }).play() | |
392 | ||
393 | var node = args.node = dom.byId(args.node), | |
394 | top = null, left = null; | |
395 | ||
396 | var init = (function(n){ | |
397 | return function(){ | |
398 | var cs = domStyle.getComputedStyle(n); | |
399 | var pos = cs.position; | |
400 | top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0); | |
401 | left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0); | |
402 | if(pos != 'absolute' && pos != 'relative'){ | |
403 | var ret = geom.position(n, true); | |
404 | top = ret.y; | |
405 | left = ret.x; | |
406 | n.style.position="absolute"; | |
407 | n.style.top=top+"px"; | |
408 | n.style.left=left+"px"; | |
409 | } | |
410 | }; | |
411 | })(node); | |
412 | init(); | |
413 | ||
414 | var anim = baseFx.animateProperty(lang.mixin({ | |
415 | properties: { | |
416 | top: args.top || 0, | |
417 | left: args.left || 0 | |
418 | } | |
419 | }, args)); | |
420 | connect.connect(anim, "beforeBegin", anim, init); | |
421 | ||
422 | return anim; // dojo.Animation | |
423 | }; | |
424 | ||
425 | return coreFx; | |
426 | }); |