]>
git.wh0rd.org - tt-rss.git/blob - lib/dojo/fx.js
2 Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
3 Available via Academic Free License >= 2.1 OR the modified BSD license.
4 see: http://dojotoolkit.org/license for details
8 if(!dojo
._hasResource
["dojo.fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
9 dojo
._hasResource
["dojo.fx"] = true;
10 dojo
.provide("dojo.fx");
11 dojo
.require("dojo.fx.Toggler"); // FIXME: remove this back-compat require in 2.0
14 // summary: Effects library on top of Base animations
21 _fire: function(evt
, args
){
23 this[evt
].apply(this, args
||[]);
29 var _chain = function(animations
){
31 this._animations
= animations
||[];
32 this._current
= this._onAnimateCtx
= this._onEndCtx
= null;
35 d
.forEach(this._animations
, function(a
){
36 this.duration
+= a
.duration
;
37 if(a
.delay
){ this.duration
+= a
.delay
; }
41 _onAnimate: function(){
42 this._fire("onAnimate", arguments
);
45 d
.disconnect(this._onAnimateCtx
);
46 d
.disconnect(this._onEndCtx
);
47 this._onAnimateCtx
= this._onEndCtx
= null;
48 if(this._index
+ 1 == this._animations
.length
){
52 this._current
= this._animations
[++this._index
];
53 this._onAnimateCtx
= d
.connect(this._current
, "onAnimate", this, "_onAnimate");
54 this._onEndCtx
= d
.connect(this._current
, "onEnd", this, "_onEnd");
55 this._current
.play(0, true);
58 play: function(/*int?*/ delay
, /*Boolean?*/ gotoStart
){
59 if(!this._current
){ this._current
= this._animations
[this._index
= 0]; }
60 if(!gotoStart
&& this._current
.status() == "playing"){ return this; }
61 var beforeBegin
= d
.connect(this._current
, "beforeBegin", this, function(){
62 this._fire("beforeBegin");
64 onBegin
= d
.connect(this._current
, "onBegin", this, function(arg
){
65 this._fire("onBegin", arguments
);
67 onPlay
= d
.connect(this._current
, "onPlay", this, function(arg
){
68 this._fire("onPlay", arguments
);
69 d
.disconnect(beforeBegin
);
70 d
.disconnect(onBegin
);
73 if(this._onAnimateCtx
){
74 d
.disconnect(this._onAnimateCtx
);
76 this._onAnimateCtx
= d
.connect(this._current
, "onAnimate", this, "_onAnimate");
78 d
.disconnect(this._onEndCtx
);
80 this._onEndCtx
= d
.connect(this._current
, "onEnd", this, "_onEnd");
81 this._current
.play
.apply(this._current
, arguments
);
86 var e
= d
.connect(this._current
, "onPause", this, function(arg
){
87 this._fire("onPause", arguments
);
90 this._current
.pause();
94 gotoPercent: function(/*Decimal*/percent
, /*Boolean?*/ andPlay
){
96 var offset
= this.duration
* percent
;
98 d
.some(this._animations
, function(a
){
99 if(a
.duration
<= offset
){
103 offset
-= a
.duration
;
107 this._current
.gotoPercent(offset
/ this._current
.duration
, andPlay
);
111 stop: function(/*boolean?*/ gotoEnd
){
114 for(; this._index
+ 1 < this._animations
.length
; ++this._index
){
115 this._animations
[this._index
].stop(true);
117 this._current
= this._animations
[this._index
];
119 var e
= d
.connect(this._current
, "onStop", this, function(arg
){
120 this._fire("onStop", arguments
);
123 this._current
.stop();
128 return this._current
? this._current
.status() : "stopped";
131 if(this._onAnimateCtx
){ d
.disconnect(this._onAnimateCtx
); }
132 if(this._onEndCtx
){ d
.disconnect(this._onEndCtx
); }
135 d
.extend(_chain
, _baseObj
);
137 dojo
.fx
.chain = function(/*dojo.Animation[]*/ animations
){
139 // Chain a list of `dojo.Animation`s to run in sequence
142 // Return a `dojo.Animation` which will play all passed
143 // `dojo.Animation` instances in sequence, firing its own
144 // synthesized events simulating a single animation. (eg:
145 // onEnd of this animation means the end of the chain,
146 // not the individual animations within)
149 // Once `node` is faded out, fade in `otherNode`
151 // | dojo.fadeIn({ node:node }),
152 // | dojo.fadeOut({ node:otherNode })
155 return new _chain(animations
) // dojo.Animation
158 var _combine = function(animations
){
159 this._animations
= animations
||[];
164 d
.forEach(animations
, function(a
){
165 var duration
= a
.duration
;
166 if(a
.delay
){ duration
+= a
.delay
; }
167 if(this.duration
< duration
){ this.duration
= duration
; }
168 this._connects
.push(d
.connect(a
, "onEnd", this, "_onEnd"));
171 this._pseudoAnimation
= new d
.Animation({curve
: [0, 1], duration
: this.duration
});
173 d
.forEach(["beforeBegin", "onBegin", "onPlay", "onAnimate", "onPause", "onStop", "onEnd"],
175 self
._connects
.push(d
.connect(self
._pseudoAnimation
, evt
,
176 function(){ self
._fire(evt
, arguments
); }
182 _doAction: function(action
, args
){
183 d
.forEach(this._animations
, function(a
){
184 a
[action
].apply(a
, args
);
189 if(++this._finished
> this._animations
.length
){
193 _call: function(action
, args
){
194 var t
= this._pseudoAnimation
;
195 t
[action
].apply(t
, args
);
197 play: function(/*int?*/ delay
, /*Boolean?*/ gotoStart
){
199 this._doAction("play", arguments
);
200 this._call("play", arguments
);
204 this._doAction("pause", arguments
);
205 this._call("pause", arguments
);
208 gotoPercent: function(/*Decimal*/percent
, /*Boolean?*/ andPlay
){
209 var ms
= this.duration
* percent
;
210 d
.forEach(this._animations
, function(a
){
211 a
.gotoPercent(a
.duration
< ms
? 1 : (ms
/ a
.duration
), andPlay
);
213 this._call("gotoPercent", arguments
);
216 stop: function(/*boolean?*/ gotoEnd
){
217 this._doAction("stop", arguments
);
218 this._call("stop", arguments
);
222 return this._pseudoAnimation
.status();
225 d
.forEach(this._connects
, dojo
.disconnect
);
228 d
.extend(_combine
, _baseObj
);
230 dojo
.fx
.combine = function(/*dojo.Animation[]*/ animations
){
232 // Combine a list of `dojo.Animation`s to run in parallel
235 // Combine an array of `dojo.Animation`s to run in parallel,
236 // providing a new `dojo.Animation` instance encompasing each
237 // animation, firing standard animation events.
240 // Fade out `node` while fading in `otherNode` simultaneously
241 // | dojo.fx.combine([
242 // | dojo.fadeIn({ node:node }),
243 // | dojo.fadeOut({ node:otherNode })
247 // When the longest animation ends, execute a function:
248 // | var anim = dojo.fx.combine([
249 // | dojo.fadeIn({ node: n, duration:700 }),
250 // | dojo.fadeOut({ node: otherNode, duration: 300 })
252 // | dojo.connect(anim, "onEnd", function(){
253 // | // overall animation is done.
255 // | anim.play(); // play the animation
257 return new _combine(animations
); // dojo.Animation
260 dojo
.fx
.wipeIn = function(/*Object*/ args
){
262 // Expand a node to it's natural height.
265 // Returns an animation that will expand the
266 // node defined in 'args' object from it's current height to
267 // it's natural height (with no scrollbar).
268 // Node must have no margin/border/padding.
271 // A hash-map of standard `dojo.Animation` constructor properties
272 // (such as easing: node: duration: and so on)
275 // | dojo.fx.wipeIn({
278 var node
= args
.node
= d
.byId(args
.node
), s
= node
.style
, o
;
280 var anim
= d
.animateProperty(d
.mixin({
283 // wrapped in functions so we wait till the last second to query (in case value has changed)
285 // start at current [computed] height, but use 1px rather than 0
286 // because 0 causes IE to display the whole panel
288 s
.overflow
= "hidden";
289 if(s
.visibility
== "hidden" || s
.display
== "none"){
295 var height
= d
.style(node
, "height");
296 return Math
.max(height
, 1);
300 return node
.scrollHeight
;
306 d
.connect(anim
, "onEnd", function(){
311 return anim
; // dojo.Animation
314 dojo
.fx
.wipeOut = function(/*Object*/ args
){
316 // Shrink a node to nothing and hide it.
319 // Returns an animation that will shrink node defined in "args"
320 // from it's current height to 1px, and then hide it.
323 // A hash-map of standard `dojo.Animation` constructor properties
324 // (such as easing: node: duration: and so on)
327 // | dojo.fx.wipeOut({ node:"someId" }).play()
329 var node
= args
.node
= d
.byId(args
.node
), s
= node
.style
, o
;
331 var anim
= d
.animateProperty(d
.mixin({
334 end
: 1 // 0 causes IE to display the whole panel
339 d
.connect(anim
, "beforeBegin", function(){
341 s
.overflow
= "hidden";
344 d
.connect(anim
, "onEnd", function(){
350 return anim
; // dojo.Animation
353 dojo
.fx
.slideTo = function(/*Object*/ args
){
355 // Slide a node to a new top/left position
358 // Returns an animation that will slide "node"
359 // defined in args Object from its current position to
360 // the position defined by (args.left, args.top).
363 // A hash-map of standard `dojo.Animation` constructor properties
364 // (such as easing: node: duration: and so on). Special args members
365 // are `top` and `left`, which indicate the new position to slide to.
368 // | dojo.fx.slideTo({ node: node, left:"40", top:"50", units:"px" }).play()
370 var node
= args
.node
= d
.byId(args
.node
),
371 top
= null, left
= null;
373 var init
= (function(n
){
375 var cs
= d
.getComputedStyle(n
);
376 var pos
= cs
.position
;
377 top
= (pos
== 'absolute' ? n
.offsetTop
: parseInt(cs
.top
) || 0);
378 left
= (pos
== 'absolute' ? n
.offsetLeft
: parseInt(cs
.left
) || 0);
379 if(pos
!= 'absolute' && pos
!= 'relative'){
380 var ret
= d
.position(n
, true);
383 n
.style
.position
="absolute";
384 n
.style
.top
=top
+"px";
385 n
.style
.left
=left
+"px";
391 var anim
= d
.animateProperty(d
.mixin({
397 d
.connect(anim
, "beforeBegin", anim
, init
);
399 return anim
; // dojo.Animation