source: Dev/trunk/src/client/dojox/fx/_base.js @ 532

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

Added Dojo 1.9.3 release.
File size: 8.9 KB
Line 
1define(["dojo/_base/array","dojo/_base/lang", "dojo/_base/fx", "dojo/fx", "dojo/dom", "dojo/dom-style",
2            "dojo/dom-geometry", "dojo/_base/connect", "dojo/_base/html"],
3        function(arrayUtil, lang, baseFx, coreFx, dom, domStyle, domGeom, connectUtil, htmlUtil){
4
5/*=====
6return {
7        // summary:
8        //              Experimental and extended Animations beyond Dojo Core / Base functionality.
9        //              Provides advanced Lines, Animations, and convenience aliases.
10};
11=====*/
12
13var dojoxFx = lang.getObject("dojox.fx", true);
14
15lang.mixin(dojoxFx, {
16
17        // anim: Function
18        //              Alias of `dojo.anim` - the shorthand `dojo.animateProperty` with auto-play
19        anim: baseFx.anim,
20
21        // animateProperty: Function
22        //              Alias of `dojo.animateProperty` - animate any CSS property
23        animateProperty: baseFx.animateProperty,
24
25        // fadeTo: Function
26        //              Fade an element from an opacity to an opacity.
27        //              Omit `start:` property to detect. `end:` property is required.
28        //              Ultimately an alias to `dojo._fade`
29        fadeTo: baseFx._fade,
30
31        // fadeIn: Function
32        //              Alias of `dojo.fadeIn` - Fade a node in.
33        fadeIn: baseFx.fadeIn,
34       
35        // fadeOut: Function
36        //              Alias of `dojo.fadeOut` - Fades a node out.
37        fadeOut: baseFx.fadeOut,
38
39        // combine: Function
40        //              Alias of `dojo.fx.combine` - Run an array of animations in parallel
41        combine: coreFx.combine,
42
43        // chain: Function
44        //              Alias of `dojo.fx.chain` - Run an array of animations in sequence
45        chain: coreFx.chain,
46
47        // slideTo: Function
48        //              Alias of `dojo.fx.slideTo` - Slide a node to a defined top/left coordinate
49        slideTo: coreFx.slideTo,
50
51        // wipeIn: Function
52        //              Alias of `dojo.fx.wipeIn` - Wipe a node to visible
53        wipeIn: coreFx.wipeIn,
54
55        // wipeOut: Function
56        //              Alias of `dojo.fx.wipeOut` - Wipe a node to non-visible
57        wipeOut: coreFx.wipeOut
58});
59
60
61dojoxFx.sizeTo = function(/* Object */args){
62        // summary:
63        //              Creates an animation that will size a node
64        //
65        // description:
66        //              Returns an animation that will size the target node
67        //              defined in args Object about it's center to
68        //              a width and height defined by (args.width, args.height),
69        //              supporting an optional method: chain||combine mixin
70        //              (defaults to chain).
71        //
72        //      - works best on absolutely or relatively positioned elements
73        //
74        // example:
75        //      |       // size #myNode to 400px x 200px over 1 second
76        //      |       dojo.fx.sizeTo({
77        //      |               node:'myNode',
78        //      |               duration: 1000,
79        //      |               width: 400,
80        //      |               height: 200,
81        //      |               method: "combine"
82        //      |       }).play();
83        //
84
85        var node = args.node = dom.byId(args.node),
86                abs = "absolute";
87
88        var method = args.method || "chain";
89        if(!args.duration){ args.duration = 500; } // default duration needed
90        if(method == "chain"){ args.duration = Math.floor(args.duration / 2); }
91       
92        var top, newTop, left, newLeft, width, height = null;
93
94        var init = (function(n){
95                return function(){
96                        var cs = domStyle.getComputedStyle(n),
97                                pos = cs.position,
98                                w = cs.width,
99                                h = cs.height
100                        ;
101                       
102                        top = (pos == abs ? n.offsetTop : parseInt(cs.top) || 0);
103                        left = (pos == abs ? n.offsetLeft : parseInt(cs.left) || 0);
104                        width = (w == "auto" ? 0 : parseInt(w));
105                        height = (h == "auto" ? 0 : parseInt(h));
106                       
107                        newLeft = left - Math.floor((args.width - width) / 2);
108                        newTop = top - Math.floor((args.height - height) / 2);
109
110                        if(pos != abs && pos != 'relative'){
111                                var ret = domStyle.coords(n, true);
112                                top = ret.y;
113                                left = ret.x;
114                                n.style.position = abs;
115                                n.style.top = top + "px";
116                                n.style.left = left + "px";
117                        }
118                }
119        })(node);
120
121        var anim1 = baseFx.animateProperty(lang.mixin({
122                properties: {
123                        height: function(){
124                                init();
125                                return { end: args.height || 0, start: height };
126                        },
127                        top: function(){
128                                return { start: top, end: newTop };
129                        }
130                }
131        }, args));
132        var anim2 = baseFx.animateProperty(lang.mixin({
133                properties: {
134                        width: function(){
135                                return { start: width, end: args.width || 0 }
136                        },
137                        left: function(){
138                                return { start: left, end: newLeft }
139                        }
140                }
141        }, args));
142
143        var anim = coreFx[(args.method == "combine" ? "combine" : "chain")]([anim1, anim2]);
144        return anim; // dojo.Animation
145
146};
147
148dojoxFx.slideBy = function(/* Object */args){
149        // summary:
150        //              Returns an animation to slide a node by a defined offset.
151        //
152        // description:
153        //              Returns an animation that will slide a node (args.node) from it's
154        //              current position to it's current posision plus the numbers defined
155        //              in args.top and args.left. standard dojo.fx mixin's apply.
156        //
157        // example:
158        //      |       // slide domNode 50px down, and 22px left
159        //      |       dojox.fx.slideBy({
160        //      |               node: domNode, duration:400,
161        //      |               top: 50, left: -22
162        //      |       }).play();
163
164        var node = args.node = dom.byId(args.node),
165                top, left;
166
167        var init = (function(n){
168                return function(){
169                        var cs = domStyle.getComputedStyle(n);
170                        var pos = cs.position;
171                        top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
172                        left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
173                        if(pos != 'absolute' && pos != 'relative'){
174                                var ret = domGeom.coords(n, true);
175                                top = ret.y;
176                                left = ret.x;
177                                n.style.position = "absolute";
178                                n.style.top = top + "px";
179                                n.style.left = left + "px";
180                        }
181                }
182        })(node);
183        init();
184       
185        var _anim = baseFx.animateProperty(lang.mixin({
186                properties: {
187                        // FIXME: is there a way to update the _Line after creation?
188                        // null start values allow chaining to work, animateProperty will
189                        // determine them for us (except in ie6? -- ugh)
190                        top: top + (args.top || 0),
191                        left: left + (args.left || 0)
192                }
193        }, args));
194        connectUtil.connect(_anim, "beforeBegin", _anim, init);
195        return _anim; // dojo.Animation
196};
197
198dojoxFx.crossFade = function(/* Object */args){
199        // summary:
200        //              Returns an animation cross fading two element simultaneously
201        // args:
202        //              - args.nodes: Array - two element array of domNodes, or id's
203        //
204        //              all other standard animation args mixins apply. args.node ignored.
205
206        // simple check for which node is visible, maybe too simple?
207        var node1 = args.nodes[0] = dom.byId(args.nodes[0]),
208                op1 = htmlUtil.style(node1,"opacity"),
209                node2 = args.nodes[1] = dom.byId(args.nodes[1]),
210                op2 = htmlUtil.style(node2, "opacity")
211        ;
212       
213        var _anim = coreFx.combine([
214                baseFx[(op1 == 0 ? "fadeIn" : "fadeOut")](lang.mixin({
215                        node: node1
216                },args)),
217                baseFx[(op1 == 0 ? "fadeOut" : "fadeIn")](lang.mixin({
218                        node: node2
219                },args))
220        ]);
221        return _anim; // dojo.Animation
222};
223
224dojoxFx.highlight = function(/*Object*/ args){
225        // summary:
226        //              Highlight a node
227        //
228        // description:
229        //              Returns an animation that sets the node background to args.color
230        //              then gradually fades back the original node background color
231        //
232        // example:
233        //      |       dojox.fx.highlight({ node:"foo" }).play();
234
235        var node = args.node = dom.byId(args.node);
236
237        args.duration = args.duration || 400;
238       
239        // Assign default color light yellow
240        var startColor = args.color || '#ffff99',
241                endColor = htmlUtil.style(node, "backgroundColor")
242        ;
243
244        // safari "fix"
245        // safari reports rgba(0, 0, 0, 0) (black) as transparent color, while
246        // other browsers return "transparent", rendered as white by default by
247        // dojo.Color; now dojo.Color maps "transparent" to
248        // djConfig.transparentColor ([r, g, b]), if present; so we can use
249        // the color behind the effect node
250        if(endColor == "rgba(0, 0, 0, 0)"){
251                endColor = "transparent";
252        }
253
254        var anim = baseFx.animateProperty(lang.mixin({
255                properties: {
256                        backgroundColor: { start: startColor, end: endColor }
257                }
258        }, args));
259
260        if(endColor == "transparent"){
261                connectUtil.connect(anim, "onEnd", anim, function(){
262                        node.style.backgroundColor = endColor;
263                });
264        }
265
266        return anim; // dojo.Animation
267};
268
269 
270dojoxFx.wipeTo = function(/*Object*/ args){
271        // summary:
272        //              Animate a node wiping to a specific width or height
273        //
274        // description:
275        //              Returns an animation that will expand the
276        //              node defined in 'args' object from it's current to
277        //              the height or width value given by the args object.
278        //
279        //              default to height:, so leave height null and specify width:
280        //              to wipeTo a width. note: this may be deprecated by a
281        //
282        //              Note that the final value should not include
283        //              units and should be an integer.  Thus a valid args object
284        //              would look something like this:
285        //
286        //              |       dojox.fx.wipeTo({ node: "nodeId", height: 200 }).play();
287        //
288        //              Node must have no margin/border/padding, so put another
289        //              node inside your target node for additional styling.
290
291        args.node = dom.byId(args.node);
292        var node = args.node, s = node.style;
293
294        var dir = (args.width ? "width" : "height"),
295                endVal = args[dir],
296                props = {}
297        ;
298
299        props[dir] = {
300                // wrapped in functions so we wait till the last second to query (in case value has changed)
301                start: function(){
302                        // start at current [computed] height, but use 1px rather than 0
303                        // because 0 causes IE to display the whole panel
304                        s.overflow = "hidden";
305                        if(s.visibility == "hidden" || s.display == "none"){
306                                s[dir] = "1px";
307                                s.display = "";
308                                s.visibility = "";
309                                return 1;
310                        }else{
311                                var now = htmlUtil.style(node,dir);
312                                return Math.max(now, 1);
313                        }
314                },
315                end: endVal
316        };
317
318        var anim = baseFx.animateProperty(lang.mixin({ properties: props }, args));
319        return anim; // dojo.Animation
320};
321
322return dojoxFx;
323});
Note: See TracBrowser for help on using the repository browser.