]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
1 | define("dojo/NodeList-fx", ["./query", "./_base/lang", "./_base/connect", "./_base/fx", "./fx"], |
2 | function(query, lang, connectLib, baseFx, coreFx){ | |
3 | ||
4 | // module: | |
5 | // dojo/NodeList-fx | |
6 | ||
7 | /*===== | |
8 | return function(){ | |
9 | // summary: | |
10 | // Adds dojo.fx animation support to dojo.query() by extending the NodeList class | |
11 | // with additional FX functions. NodeList is the array-like object used to hold query results. | |
12 | }; | |
13 | =====*/ | |
14 | ||
15 | var NodeList = query.NodeList; | |
16 | ||
17 | lang.extend(NodeList, { | |
18 | _anim: function(obj, method, args){ | |
19 | args = args||{}; | |
20 | var a = coreFx.combine( | |
21 | this.map(function(item){ | |
22 | var tmpArgs = { node: item }; | |
23 | lang.mixin(tmpArgs, args); | |
24 | return obj[method](tmpArgs); | |
25 | }) | |
26 | ); | |
27 | return args.auto ? a.play() && this : a; // dojo/_base/fx.Animation|dojo/NodeList | |
28 | }, | |
29 | ||
30 | wipeIn: function(args){ | |
31 | // summary: | |
32 | // wipe in all elements of this NodeList via `dojo/fx.wipeIn()` | |
33 | // | |
34 | // args: Object? | |
35 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
36 | // an `auto` parameter. | |
37 | // | |
38 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
39 | // A special args member `auto` can be passed to automatically play the animation. | |
40 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
41 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
42 | // | |
43 | // example: | |
44 | // Fade in all tables with class "blah": | |
45 | // | dojo.query("table.blah").wipeIn().play(); | |
46 | // | |
47 | // example: | |
48 | // Utilizing `auto` to get the NodeList back: | |
49 | // | dojo.query(".titles").wipeIn({ auto:true }).onclick(someFunction); | |
50 | // | |
51 | return this._anim(coreFx, "wipeIn", args); // dojo/_base/fx.Animation|dojo/NodeList | |
52 | }, | |
53 | ||
54 | wipeOut: function(args){ | |
55 | // summary: | |
56 | // wipe out all elements of this NodeList via `dojo/fx.wipeOut()` | |
57 | // | |
58 | // args: Object? | |
59 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
60 | // an `auto` parameter. | |
61 | // | |
62 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
63 | // A special args member `auto` can be passed to automatically play the animation. | |
64 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
65 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
66 | // | |
67 | // example: | |
68 | // Wipe out all tables with class "blah": | |
69 | // | dojo.query("table.blah").wipeOut().play(); | |
70 | return this._anim(coreFx, "wipeOut", args); // dojo/_base/fx.Animation|dojo/NodeList | |
71 | }, | |
72 | ||
73 | slideTo: function(args){ | |
74 | // summary: | |
75 | // slide all elements of the node list to the specified place via `dojo/fx.slideTo()` | |
76 | // | |
77 | // args: Object? | |
78 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
79 | // an `auto` parameter. | |
80 | // | |
81 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
82 | // A special args member `auto` can be passed to automatically play the animation. | |
83 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
84 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
85 | // | |
86 | // example: | |
87 | // | Move all tables with class "blah" to 300/300: | |
88 | // | dojo.query("table.blah").slideTo({ | |
89 | // | left: 40, | |
90 | // | top: 50 | |
91 | // | }).play(); | |
92 | return this._anim(coreFx, "slideTo", args); // dojo/_base/fx.Animation|dojo/NodeList | |
93 | }, | |
94 | ||
95 | ||
96 | fadeIn: function(args){ | |
97 | // summary: | |
98 | // fade in all elements of this NodeList via `dojo.fadeIn` | |
99 | // | |
100 | // args: Object? | |
101 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
102 | // an `auto` parameter. | |
103 | // | |
104 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
105 | // A special args member `auto` can be passed to automatically play the animation. | |
106 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
107 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
108 | // | |
109 | // example: | |
110 | // Fade in all tables with class "blah": | |
111 | // | dojo.query("table.blah").fadeIn().play(); | |
112 | return this._anim(baseFx, "fadeIn", args); // dojo/_base/fx.Animation|dojo/NodeList | |
113 | }, | |
114 | ||
115 | fadeOut: function(args){ | |
116 | // summary: | |
117 | // fade out all elements of this NodeList via `dojo.fadeOut` | |
118 | // | |
119 | // args: Object? | |
120 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
121 | // an `auto` parameter. | |
122 | // | |
123 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
124 | // A special args member `auto` can be passed to automatically play the animation. | |
125 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
126 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
127 | // | |
128 | // example: | |
129 | // Fade out all elements with class "zork": | |
130 | // | dojo.query(".zork").fadeOut().play(); | |
131 | // example: | |
132 | // Fade them on a delay and do something at the end: | |
133 | // | var fo = dojo.query(".zork").fadeOut(); | |
134 | // | dojo.connect(fo, "onEnd", function(){ /*...*/ }); | |
135 | // | fo.play(); | |
136 | // example: | |
137 | // Using `auto`: | |
138 | // | dojo.query("li").fadeOut({ auto:true }).filter(filterFn).forEach(doit); | |
139 | // | |
140 | return this._anim(baseFx, "fadeOut", args); // dojo/_base/fx.Animation|dojo/NodeList | |
141 | }, | |
142 | ||
143 | animateProperty: function(args){ | |
144 | // summary: | |
145 | // Animate all elements of this NodeList across the properties specified. | |
146 | // syntax identical to `dojo.animateProperty` | |
147 | // | |
148 | // args: Object? | |
149 | // Additional dojo/_base/fx.Animation arguments to mix into this set with the addition of | |
150 | // an `auto` parameter. | |
151 | // | |
152 | // returns: dojo/_base/fx.Animation|dojo/NodeList | |
153 | // A special args member `auto` can be passed to automatically play the animation. | |
154 | // If args.auto is present, the original dojo/NodeList will be returned for further | |
155 | // chaining. Otherwise the dojo/_base/fx.Animation instance is returned and must be .play()'ed | |
156 | // | |
157 | // example: | |
158 | // | dojo.query(".zork").animateProperty({ | |
159 | // | duration: 500, | |
160 | // | properties: { | |
161 | // | color: { start: "black", end: "white" }, | |
162 | // | left: { end: 300 } | |
163 | // | } | |
164 | // | }).play(); | |
165 | // | |
166 | // example: | |
167 | // | dojo.query(".grue").animateProperty({ | |
168 | // | auto:true, | |
169 | // | properties: { | |
170 | // | height:240 | |
171 | // | } | |
172 | // | }).onclick(handler); | |
173 | return this._anim(baseFx, "animateProperty", args); // dojo/_base/fx.Animation|dojo/NodeList | |
174 | }, | |
175 | ||
176 | anim: function( /*Object*/ properties, | |
177 | /*Integer?*/ duration, | |
178 | /*Function?*/ easing, | |
179 | /*Function?*/ onEnd, | |
180 | /*Integer?*/ delay){ | |
181 | // summary: | |
182 | // Animate one or more CSS properties for all nodes in this list. | |
183 | // The returned animation object will already be playing when it | |
184 | // is returned. See the docs for `dojo.anim` for full details. | |
185 | // properties: Object | |
186 | // the properties to animate. does NOT support the `auto` parameter like other | |
187 | // NodeList-fx methods. | |
188 | // duration: Integer? | |
189 | // Optional. The time to run the animations for | |
190 | // easing: Function? | |
191 | // Optional. The easing function to use. | |
192 | // onEnd: Function? | |
193 | // A function to be called when the animation ends | |
194 | // delay: | |
195 | // how long to delay playing the returned animation | |
196 | // example: | |
197 | // Another way to fade out: | |
198 | // | dojo.query(".thinger").anim({ opacity: 0 }); | |
199 | // example: | |
200 | // animate all elements with the "thigner" class to a width of 500 | |
201 | // pixels over half a second | |
202 | // | dojo.query(".thinger").anim({ width: 500 }, 700); | |
203 | var canim = coreFx.combine( | |
204 | this.map(function(item){ | |
205 | return baseFx.animateProperty({ | |
206 | node: item, | |
207 | properties: properties, | |
208 | duration: duration||350, | |
209 | easing: easing | |
210 | }); | |
211 | }) | |
212 | ); | |
213 | if(onEnd){ | |
214 | connectLib.connect(canim, "onEnd", onEnd); | |
215 | } | |
216 | return canim.play(delay||0); // dojo/_base/fx.Animation | |
217 | } | |
218 | }); | |
219 | ||
220 | return NodeList; | |
221 | }); |