author | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
---|---|---|
committer | Giulio Cesare Solaroli <giulio.cesare@clipperz.com> | 2011-10-02 23:56:18 (UTC) |
commit | ef68436ac04da078ffdcacd7e1f785473a303d45 (patch) (unidiff) | |
tree | c403752d66a2c4775f00affd4fa8431b29c5b68c /frontend/beta/js/YUI-extensions/anim | |
parent | 597ecfbc0249d83e1b856cbd558340c01237a360 (diff) | |
download | clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.zip clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.gz clipperz-ef68436ac04da078ffdcacd7e1f785473a303d45.tar.bz2 |
First version of the newly restructured repository
Diffstat (limited to 'frontend/beta/js/YUI-extensions/anim') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/anim/Actor.js | 759 | ||||
-rw-r--r-- | frontend/beta/js/YUI-extensions/anim/Animator.js | 482 |
2 files changed, 1241 insertions, 0 deletions
diff --git a/frontend/beta/js/YUI-extensions/anim/Actor.js b/frontend/beta/js/YUI-extensions/anim/Actor.js new file mode 100644 index 0000000..f5574e6 --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/anim/Actor.js | |||
@@ -0,0 +1,759 @@ | |||
1 | |||
2 | /** | ||
3 | * @class YAHOO.ext.Actor | ||
4 | * Provides support for syncing and chaining of Element Yahoo! UI based animation and some common effects. Actors support "self-play" without an Animator.<br><br> | ||
5 | * <b>Note: Along with the animation methods defined below, this class inherits and captures all of the "set" or animation methods of {@link YAHOO.ext.Element}. "get" methods are not captured and execute immediately.</b> | ||
6 | * <br><br>Usage:<br> | ||
7 | * <pre><code> | ||
8 | * var actor = new YAHOO.ext.Actor('myElementId'); | ||
9 | * actor.startCapture(true); | ||
10 | * actor.moveTo(100, 100, true); | ||
11 | * actor.squish(); | ||
12 | * actor.play(); | ||
13 | * <br> | ||
14 | * // or to start capturing immediately, with no Animator (the null second param) | ||
15 | * <br> | ||
16 | * var actor = new YAHOO.ext.Actor('myElementId', null, true); | ||
17 | * actor.moveTo(100, 100, true); | ||
18 | * actor.squish(); | ||
19 | * actor.play(); | ||
20 | * </code></pre> | ||
21 | * @extends YAHOO.ext.Element | ||
22 | * @requires YAHOO.ext.Element | ||
23 | * @requires YAHOO.util.Dom | ||
24 | * @requires YAHOO.util.Event | ||
25 | * @requires YAHOO.util.CustomEvent | ||
26 | * @requires YAHOO.util.Anim | ||
27 | * @requires YAHOO.util.ColorAnim | ||
28 | * @requires YAHOO.util.Motion | ||
29 | * @className YAHOO.ext.Actor | ||
30 | * @constructor | ||
31 | * Create new Actor. | ||
32 | * @param {String/HTMLElement} el The dom element or element id | ||
33 | * @param {<i>YAHOO.ext.Animator</i>} animator (optional) The Animator that will capture this Actor's actions | ||
34 | * @param {<i>Boolean</i>} selfCapture (optional) Whether this actor should capture it's own actions to support self playback without an animator (defaults to false) | ||
35 | */ | ||
36 | YAHOO.ext.Actor = function(element, animator, selfCapture){ | ||
37 | this.el = YAHOO.ext.Element.get(element, true); // cache el object for playback | ||
38 | YAHOO.ext.Actor.superclass.constructor.call(this, element, true); | ||
39 | this.onCapture = new YAHOO.util.CustomEvent('Actor.onCapture'); | ||
40 | if(animator){ | ||
41 | /** | ||
42 | * The animator used to sync this actor with other actors | ||
43 | * @member YAHOO.ext.Actor | ||
44 | */ | ||
45 | animator.addActor(this); | ||
46 | } | ||
47 | /** | ||
48 | * Whether this actor is currently capturing | ||
49 | * @member YAHOO.ext.Actor | ||
50 | */ | ||
51 | this.capturing = selfCapture; | ||
52 | this.playlist = selfCapture ? new YAHOO.ext.Animator.AnimSequence() : null; | ||
53 | }; | ||
54 | |||
55 | YAHOO.extendX(YAHOO.ext.Actor, YAHOO.ext.Element); | ||
56 | |||
57 | /** | ||
58 | * Captures an action for this actor. Generally called internally but can be called directly. | ||
59 | * @param {YAHOO.ext.Actor.Action} action | ||
60 | */ | ||
61 | YAHOO.ext.Actor.prototype.capture = function(action){ | ||
62 | if(this.playlist != null){ | ||
63 | this.playlist.add(action); | ||
64 | } | ||
65 | this.onCapture.fireDirect(this, action); | ||
66 | return action; | ||
67 | }; | ||
68 | |||
69 | /** @ignore */ | ||
70 | YAHOO.ext.Actor.overrideAnimation = function(method, animParam, onParam){ | ||
71 | return function(){ | ||
72 | if(!this.capturing){ | ||
73 | return method.apply(this, arguments); | ||
74 | } | ||
75 | var args = Array.prototype.slice.call(arguments, 0); | ||
76 | if(args[animParam] === true){ | ||
77 | return this.capture(new YAHOO.ext.Actor.AsyncAction(this, method, args, onParam)); | ||
78 | }else{ | ||
79 | return this.capture(new YAHOO.ext.Actor.Action(this, method, args)); | ||
80 | } | ||
81 | }; | ||
82 | } | ||
83 | |||
84 | /** @ignore */ | ||
85 | YAHOO.ext.Actor.overrideBasic = function(method){ | ||
86 | return function(){ | ||
87 | if(!this.capturing){ | ||
88 | return method.apply(this, arguments); | ||
89 | } | ||
90 | var args = Array.prototype.slice.call(arguments, 0); | ||
91 | return this.capture(new YAHOO.ext.Actor.Action(this, method, args)); | ||
92 | }; | ||
93 | } | ||
94 | |||
95 | // All of these methods below are marked "ignore" because JSDoc treats them as fields, not function. How brilliant. The Element methods are documented anyway though. | ||
96 | /** Capturing override - See {@link YAHOO.ext.Element#setVisibilityMode} for method details. | ||
97 | * @method */ | ||
98 | YAHOO.ext.Actor.prototype.setVisibilityMode = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setVisibilityMode); | ||
99 | /** Capturing override - See {@link YAHOO.ext.Element#enableDisplayMode} for method details. | ||
100 | * @method */ | ||
101 | YAHOO.ext.Actor.prototype.enableDisplayMode = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.enableDisplayMode); | ||
102 | /** Capturing override - See {@link YAHOO.ext.Element#focus} for method details. | ||
103 | * @method */ | ||
104 | YAHOO.ext.Actor.prototype.focus = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.focus); | ||
105 | /** Capturing override - See {@link YAHOO.ext.Element#addClass} for method details. | ||
106 | * @method */ | ||
107 | YAHOO.ext.Actor.prototype.addClass = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.addClass); | ||
108 | /** Capturing override - See {@link YAHOO.ext.Element#removeClass} for method details. | ||
109 | * @method */ | ||
110 | YAHOO.ext.Actor.prototype.removeClass = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.removeClass); | ||
111 | /** Capturing override - See {@link YAHOO.ext.Element#replaceClass} for method details. | ||
112 | * @method */ | ||
113 | YAHOO.ext.Actor.prototype.replaceClass = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.replaceClass); | ||
114 | /** Capturing override - See {@link YAHOO.ext.Element#setStyle} for method details. | ||
115 | * @method */ | ||
116 | YAHOO.ext.Actor.prototype.setStyle = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setStyle); | ||
117 | /** Capturing override - See {@link YAHOO.ext.Element#setLeft} for method details. | ||
118 | * @method */ | ||
119 | YAHOO.ext.Actor.prototype.setLeft = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setLeft); | ||
120 | /** Capturing override - See {@link YAHOO.ext.Element#setTop} for method details. | ||
121 | * @method */ | ||
122 | YAHOO.ext.Actor.prototype.setTop = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setTop); | ||
123 | /** Capturing override - See {@link YAHOO.ext.Element#setAbsolutePositioned} for method details. | ||
124 | * @method */ | ||
125 | YAHOO.ext.Actor.prototype.setAbsolutePositioned = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setAbsolutePositioned); | ||
126 | /** Capturing override - See {@link YAHOO.ext.Element#setRelativePositioned} for method details. | ||
127 | * @method */ | ||
128 | YAHOO.ext.Actor.prototype.setRelativePositioned = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setRelativePositioned); | ||
129 | /** Capturing override - See {@link YAHOO.ext.Element#clearPositioning} for method details. | ||
130 | * @method */ | ||
131 | YAHOO.ext.Actor.prototype.clearPositioning = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.clearPositioning); | ||
132 | /** Capturing override - See {@link YAHOO.ext.Element#setPositioning} for method details. | ||
133 | * @method */ | ||
134 | YAHOO.ext.Actor.prototype.setPositioning = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.setPositioning); | ||
135 | /** Capturing override - See {@link YAHOO.ext.Element#clip} for method details. | ||
136 | * @method */ | ||
137 | YAHOO.ext.Actor.prototype.clip = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.clip); | ||
138 | /** Capturing override - See {@link YAHOO.ext.Element#unclip} for method details. | ||
139 | * @method */ | ||
140 | YAHOO.ext.Actor.prototype.unclip = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.unclip); | ||
141 | /** Capturing override - See {@link YAHOO.ext.Element#clearOpacity} for method details. | ||
142 | * @method */ | ||
143 | YAHOO.ext.Actor.prototype.clearOpacity = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.clearOpacity); | ||
144 | /** Capturing override - See {@link YAHOO.ext.Element#update} for method details. | ||
145 | * @method */ | ||
146 | YAHOO.ext.Actor.prototype.update = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.update); | ||
147 | /** Capturing override - See {@link YAHOO.ext.Element#remove} for method details. | ||
148 | * @method */ | ||
149 | YAHOO.ext.Actor.prototype.remove = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.remove); | ||
150 | YAHOO.ext.Actor.prototype.fitToParent = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.fitToParent); | ||
151 | YAHOO.ext.Actor.prototype.appendChild = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.appendChild); | ||
152 | YAHOO.ext.Actor.prototype.createChild = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.createChild); | ||
153 | YAHOO.ext.Actor.prototype.appendTo = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.appendTo); | ||
154 | YAHOO.ext.Actor.prototype.insertBefore = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.insertBefore); | ||
155 | YAHOO.ext.Actor.prototype.insertAfter = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.insertAfter); | ||
156 | YAHOO.ext.Actor.prototype.wrap = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.wrap); | ||
157 | YAHOO.ext.Actor.prototype.replace = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.replace); | ||
158 | YAHOO.ext.Actor.prototype.insertHtml = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.insertHtml); | ||
159 | YAHOO.ext.Actor.prototype.set = YAHOO.ext.Actor.overrideBasic(YAHOO.ext.Actor.superclass.set); | ||
160 | |||
161 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#load} for method details. | ||
162 | * @method */ | ||
163 | YAHOO.ext.Actor.prototype.load = function(){ | ||
164 | if(!this.capturing){ | ||
165 | return YAHOO.ext.Actor.superclass.load.apply(this, arguments); | ||
166 | } | ||
167 | var args = Array.prototype.slice.call(arguments, 0); | ||
168 | return this.capture(new YAHOO.ext.Actor.AsyncAction(this, YAHOO.ext.Actor.superclass.load, | ||
169 | args, 2)); | ||
170 | }; | ||
171 | |||
172 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#animate} for method details. | ||
173 | * @method */ | ||
174 | YAHOO.ext.Actor.prototype.animate = function(args, duration, onComplete, easing, animType){ | ||
175 | if(!this.capturing){ | ||
176 | return YAHOO.ext.Actor.superclass.animate.apply(this, arguments); | ||
177 | } | ||
178 | return this.capture(new YAHOO.ext.Actor.AsyncAction(this, YAHOO.ext.Actor.superclass.animate, | ||
179 | [args, duration, onComplete, easing, animType], 2)); | ||
180 | }; | ||
181 | |||
182 | /** Capturing and animation syncing override - See {@link YAHOO.ext.Element#setVisible} for method details. | ||
183 | * @method */ | ||
184 | YAHOO.ext.Actor.prototype.setVisible = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setVisible, 1, 3); | ||
185 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#toggle} for method details. | ||
186 | * @method */ | ||
187 | YAHOO.ext.Actor.prototype.toggle = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.toggle, 0, 2); | ||
188 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setXY} for method details. | ||
189 | * @method */ | ||
190 | YAHOO.ext.Actor.prototype.setXY = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setXY, 1, 3); | ||
191 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setLocation} for method details. | ||
192 | * @method */ | ||
193 | YAHOO.ext.Actor.prototype.setLocation = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setLocation, 2, 4); | ||
194 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setWidth} for method details. | ||
195 | * @method */ | ||
196 | YAHOO.ext.Actor.prototype.setWidth = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setWidth, 1, 3); | ||
197 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setHeight} for method details. | ||
198 | * @method */ | ||
199 | YAHOO.ext.Actor.prototype.setHeight = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setHeight, 1, 3); | ||
200 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setSize} for method details. | ||
201 | * @method */ | ||
202 | YAHOO.ext.Actor.prototype.setSize = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setSize, 2, 4); | ||
203 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setBounds} for method details. | ||
204 | * @method */ | ||
205 | YAHOO.ext.Actor.prototype.setBounds = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setBounds, 4, 6); | ||
206 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setOpacity} for method details. | ||
207 | * @method */ | ||
208 | YAHOO.ext.Actor.prototype.setOpacity = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setOpacity, 1, 3); | ||
209 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#moveTo} for method details. | ||
210 | * @method */ | ||
211 | YAHOO.ext.Actor.prototype.moveTo = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.moveTo, 2, 4); | ||
212 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#move} for method details. | ||
213 | * @method */ | ||
214 | YAHOO.ext.Actor.prototype.move = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.move, 2, 4); | ||
215 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#alignTo} for method details. | ||
216 | * @method */ | ||
217 | YAHOO.ext.Actor.prototype.alignTo = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.alignTo, 3, 5); | ||
218 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#hide} for method details. | ||
219 | * @method */ | ||
220 | YAHOO.ext.Actor.prototype.hide = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.hide, 0, 2); | ||
221 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#show} for method details. | ||
222 | * @method */ | ||
223 | YAHOO.ext.Actor.prototype.show = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.show, 0, 2); | ||
224 | |||
225 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#setBox} for method details. | ||
226 | * @method */ | ||
227 | YAHOO.ext.Actor.prototype.setBox = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setBox, 2, 4); | ||
228 | |||
229 | /**Capturing and animation syncing override - See {@link YAHOO.ext.Element#autoHeight} for method details. | ||
230 | * @method */ | ||
231 | YAHOO.ext.Actor.prototype.autoHeight = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.autoHeight, 0, 2); | ||
232 | /** Capturing override - See {@link YAHOO.ext.Element#setX} for method details. | ||
233 | * @method */ | ||
234 | YAHOO.ext.Actor.prototype.setX = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setX, 1, 3); | ||
235 | /** Capturing override - See {@link YAHOO.ext.Element#setY} for method details. | ||
236 | * @method */ | ||
237 | YAHOO.ext.Actor.prototype.setY = YAHOO.ext.Actor.overrideAnimation(YAHOO.ext.Actor.superclass.setY, 1, 3); | ||
238 | |||
239 | /** | ||
240 | * Start self capturing calls on this Actor. All subsequent calls are captured and executed when play() is called. | ||
241 | */ | ||
242 | YAHOO.ext.Actor.prototype.startCapture = function(){ | ||
243 | this.capturing = true; | ||
244 | this.playlist = new YAHOO.ext.Animator.AnimSequence(); | ||
245 | }; | ||
246 | |||
247 | /** | ||
248 | * Stop self capturing calls on this Actor. | ||
249 | */ | ||
250 | YAHOO.ext.Actor.prototype.stopCapture = function(){ | ||
251 | this.capturing = false; | ||
252 | }; | ||
253 | |||
254 | /** | ||
255 | * Clears any calls that have been self captured. | ||
256 | */ | ||
257 | YAHOO.ext.Actor.prototype.clear = function(){ | ||
258 | this.playlist = new YAHOO.ext.Animator.AnimSequence(); | ||
259 | }; | ||
260 | |||
261 | /** | ||
262 | * Starts playback of self captured calls. | ||
263 | * @param {<i>Function</i>} oncomplete (optional) Callback to execute when playback has completed | ||
264 | */ | ||
265 | YAHOO.ext.Actor.prototype.play = function(oncomplete){ | ||
266 | this.capturing = false; | ||
267 | if(this.playlist){ | ||
268 | this.playlist.play(oncomplete); | ||
269 | } | ||
270 | }; | ||
271 | |||
272 | /** | ||
273 | * Capture a function call. | ||
274 | * @param {Function} fcn The function to call | ||
275 | * @param {<i>Array</i>} args (optional) The arguments to call the function with | ||
276 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
277 | */ | ||
278 | YAHOO.ext.Actor.prototype.addCall = function(fcn, args, scope){ | ||
279 | if(!this.capturing){ | ||
280 | fcn.apply(scope || this, args || []); | ||
281 | }else{ | ||
282 | this.capture(new YAHOO.ext.Actor.Action(scope, fcn, args || [])); | ||
283 | } | ||
284 | }; | ||
285 | |||
286 | /** | ||
287 | * Capture an async function call. | ||
288 | * @param {Function} fcn The function to call | ||
289 | * @param {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED. | ||
290 | * @param {<i>Array</i>} args The arguments to call the function with | ||
291 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
292 | */ | ||
293 | YAHOO.ext.Actor.prototype.addAsyncCall = function(fcn, callbackIndex, args, scope){ | ||
294 | if(!this.capturing){ | ||
295 | fcn.apply(scope || this, args || []); | ||
296 | }else{ | ||
297 | this.capture(new YAHOO.ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex)); | ||
298 | } | ||
299 | }, | ||
300 | |||
301 | /** | ||
302 | * Capture a pause (in seconds). | ||
303 | * @param {Number} seconds The seconds to pause | ||
304 | */ | ||
305 | YAHOO.ext.Actor.prototype.pause = function(seconds){ | ||
306 | this.capture(new YAHOO.ext.Actor.PauseAction(seconds)); | ||
307 | }; | ||
308 | |||
309 | /** | ||
310 | * Shake this element from side to side | ||
311 | */ | ||
312 | YAHOO.ext.Actor.prototype.shake = function(){ | ||
313 | this.move('left', 20, true, .05); | ||
314 | this.move('right', 40, true, .05); | ||
315 | this.move('left', 40, true, .05); | ||
316 | this.move('right', 20, true, .05); | ||
317 | }; | ||
318 | |||
319 | /** | ||
320 | * Bounce this element from up and down | ||
321 | */ | ||
322 | YAHOO.ext.Actor.prototype.bounce = function(){ | ||
323 | this.move('up', 20, true, .05); | ||
324 | this.move('down', 40, true, .05); | ||
325 | this.move('up', 40, true, .05); | ||
326 | this.move('down', 20, true, .05); | ||
327 | }; | ||
328 | |||
329 | /** | ||
330 | * Show the element using a "blinds" effect | ||
331 | * @param {String} anchor The part of the element that it should appear to exapand from. | ||
332 | The short/long options currently are t/top, l/left | ||
333 | * @param {<i>Number</i>} newSize (optional) The size to animate to. (Default to current size) | ||
334 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
335 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut) | ||
336 | */ | ||
337 | YAHOO.ext.Actor.prototype.blindShow = function(anchor, newSize, duration, easing){ | ||
338 | var size = this.getSize(); | ||
339 | this.clip(); | ||
340 | anchor = anchor.toLowerCase(); | ||
341 | switch(anchor){ | ||
342 | case 't': | ||
343 | case 'top': | ||
344 | this.setHeight(1); | ||
345 | this.setVisible(true); | ||
346 | this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
347 | break; | ||
348 | case 'l': | ||
349 | case 'left': | ||
350 | this.setWidth(1); | ||
351 | this.setVisible(true); | ||
352 | this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
353 | break; | ||
354 | } | ||
355 | this.unclip(); | ||
356 | return size; | ||
357 | }; | ||
358 | |||
359 | /** | ||
360 | * Hide the element using a "blinds" effect | ||
361 | * @param {String} anchor The part of the element that it should appear to collapse to. | ||
362 | The short/long options are t/top, l/left, b/bottom, r/right. | ||
363 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
364 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn) | ||
365 | */ | ||
366 | YAHOO.ext.Actor.prototype.blindHide = function(anchor, duration, easing){ | ||
367 | var size = this.getSize(); | ||
368 | this.clip(); | ||
369 | anchor = anchor.toLowerCase(); | ||
370 | switch(anchor){ | ||
371 | case 't': | ||
372 | case 'top': | ||
373 | this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
374 | this.setVisible(false); | ||
375 | break; | ||
376 | case 'l': | ||
377 | case 'left': | ||
378 | this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
379 | this.setVisible(false); | ||
380 | break; | ||
381 | case 'r': | ||
382 | case 'right': | ||
383 | this.animate({width: {to: 1}, points: {by: [size.width, 0]}}, | ||
384 | duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion); | ||
385 | this.setVisible(false); | ||
386 | break; | ||
387 | case 'b': | ||
388 | case 'bottom': | ||
389 | this.animate({height: {to: 1}, points: {by: [0, size.height]}}, | ||
390 | duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion); | ||
391 | this.setVisible(false); | ||
392 | break; | ||
393 | } | ||
394 | return size; | ||
395 | }; | ||
396 | |||
397 | /** | ||
398 | * Show the element using a "slide in" effect - In order for this effect to work the element MUST have a child element container that can be "slid" otherwise a blindShow effect is rendered. | ||
399 | * @param {String} anchor The part of the element that it should appear to slide from. | ||
400 | The short/long options currently are t/top, l/left | ||
401 | * @param {<i>Number</i>} newSize (optional) The size to animate to. (Default to current size) | ||
402 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
403 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOuth) | ||
404 | */ | ||
405 | YAHOO.ext.Actor.prototype.slideShow = function(anchor, newSize, duration, easing, clearPositioning){ | ||
406 | var size = this.getSize(); | ||
407 | this.clip(); | ||
408 | var firstChild = this.dom.firstChild; | ||
409 | if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode | ||
410 | this.blindShow(anchor, newSize, duration, easing); | ||
411 | return; | ||
412 | } | ||
413 | var child = YAHOO.ext.Element.get(firstChild, true); | ||
414 | var pos = child.getPositioning(); | ||
415 | this.addCall(child.setAbsolutePositioned, null, child); | ||
416 | this.setVisible(true); | ||
417 | anchor = anchor.toLowerCase(); | ||
418 | switch(anchor){ | ||
419 | case 't': | ||
420 | case 'top': | ||
421 | this.addCall(child.setStyle, ['right', ''], child); | ||
422 | this.addCall(child.setStyle, ['top', ''], child); | ||
423 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
424 | this.addCall(child.setStyle, ['bottom', '0px'], child); | ||
425 | this.setHeight(1); | ||
426 | this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
427 | break; | ||
428 | case 'l': | ||
429 | case 'left': | ||
430 | this.addCall(child.setStyle, ['left', ''], child); | ||
431 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
432 | this.addCall(child.setStyle, ['right', '0px'], child); | ||
433 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
434 | this.setWidth(1); | ||
435 | this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
436 | break; | ||
437 | case 'r': | ||
438 | case 'right': | ||
439 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
440 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
441 | this.addCall(child.setStyle, ['right', ''], child); | ||
442 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
443 | this.setWidth(1); | ||
444 | this.setWidth(newSize || size.width, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
445 | break; | ||
446 | case 'b': | ||
447 | case 'bottom': | ||
448 | this.addCall(child.setStyle, ['right', ''], child); | ||
449 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
450 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
451 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
452 | this.setHeight(1); | ||
453 | this.setHeight(newSize || size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeOut); | ||
454 | break; | ||
455 | } | ||
456 | if(clearPositioning !== false){ | ||
457 | this.addCall(child.setPositioning, [pos], child); | ||
458 | } | ||
459 | this.unclip(); | ||
460 | return size; | ||
461 | }; | ||
462 | |||
463 | /** | ||
464 | * Hide the element using a "slide in" effect - In order for this effect to work the element MUST have a child element container that can be "slid" otherwise a blindHide effect is rendered. | ||
465 | * @param {String} anchor The part of the element that it should appear to slide to. | ||
466 | The short/long options are t/top, l/left, b/bottom, r/right. | ||
467 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
468 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn) | ||
469 | */ | ||
470 | YAHOO.ext.Actor.prototype.slideHide = function(anchor, duration, easing){ | ||
471 | var size = this.getSize(); | ||
472 | this.clip(); | ||
473 | var firstChild = this.dom.firstChild; | ||
474 | if(!firstChild || (firstChild.nodeName && "#TEXT" == firstChild.nodeName.toUpperCase())) { // can't do a slide with only a textnode | ||
475 | this.blindHide(anchor, duration, easing); | ||
476 | return; | ||
477 | } | ||
478 | var child = YAHOO.ext.Element.get(firstChild, true); | ||
479 | var pos = child.getPositioning(); | ||
480 | this.addCall(child.setAbsolutePositioned, null, child); | ||
481 | anchor = anchor.toLowerCase(); | ||
482 | switch(anchor){ | ||
483 | case 't': | ||
484 | case 'top': | ||
485 | this.addCall(child.setStyle, ['right', ''], child); | ||
486 | this.addCall(child.setStyle, ['top', ''], child); | ||
487 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
488 | this.addCall(child.setStyle, ['bottom', '0px'], child); | ||
489 | this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
490 | this.setVisible(false); | ||
491 | break; | ||
492 | case 'l': | ||
493 | case 'left': | ||
494 | this.addCall(child.setStyle, ['left', ''], child); | ||
495 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
496 | this.addCall(child.setStyle, ['right', '0px'], child); | ||
497 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
498 | this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
499 | this.setVisible(false); | ||
500 | break; | ||
501 | case 'r': | ||
502 | case 'right': | ||
503 | this.addCall(child.setStyle, ['right', ''], child); | ||
504 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
505 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
506 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
507 | this.setSize(1, size.height, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
508 | this.setVisible(false); | ||
509 | break; | ||
510 | case 'b': | ||
511 | case 'bottom': | ||
512 | this.addCall(child.setStyle, ['right', ''], child); | ||
513 | this.addCall(child.setStyle, ['top', '0px'], child); | ||
514 | this.addCall(child.setStyle, ['left', '0px'], child); | ||
515 | this.addCall(child.setStyle, ['bottom', ''], child); | ||
516 | this.setSize(size.width, 1, true, duration || .5, null, easing || YAHOO.util.Easing.easeIn); | ||
517 | this.setVisible(false); | ||
518 | break; | ||
519 | } | ||
520 | this.addCall(child.setPositioning, [pos], child); | ||
521 | return size; | ||
522 | }; | ||
523 | |||
524 | /** | ||
525 | * Hide the element by "squishing" it into the corner | ||
526 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
527 | */ | ||
528 | YAHOO.ext.Actor.prototype.squish = function(duration){ | ||
529 | var size = this.getSize(); | ||
530 | this.clip(); | ||
531 | this.setSize(1, 1, true, duration || .5); | ||
532 | this.setVisible(false); | ||
533 | return size; | ||
534 | }; | ||
535 | |||
536 | /** | ||
537 | * Fade an element in | ||
538 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
539 | */ | ||
540 | YAHOO.ext.Actor.prototype.appear = function(duration){ | ||
541 | this.setVisible(true, true, duration); | ||
542 | }; | ||
543 | |||
544 | /** | ||
545 | * Fade an element out | ||
546 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
547 | */ | ||
548 | YAHOO.ext.Actor.prototype.fade = function(duration){ | ||
549 | this.setVisible(false, true, duration); | ||
550 | }; | ||
551 | |||
552 | /** | ||
553 | * Blink the element as if it was clicked and then collapse on it's center | ||
554 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
555 | */ | ||
556 | YAHOO.ext.Actor.prototype.switchOff = function(duration){ | ||
557 | this.clip(); | ||
558 | this.setVisible(false, true, .1); | ||
559 | this.clearOpacity(); | ||
560 | this.setVisible(true); | ||
561 | this.animate({height: {to: 1}, points: {by: [0, this.getHeight()/2]}}, | ||
562 | duration || .5, null, YAHOO.util.Easing.easeOut, YAHOO.util.Motion); | ||
563 | this.setVisible(false); | ||
564 | }; | ||
565 | |||
566 | /** | ||
567 | * Highlight the element using a background color (or passed attribute) animation | ||
568 | * @param {String} color (optional) The color to use for the highlight | ||
569 | * @param {<i>String</i>} fromColor (optional) If the element does not currently have a background color, you will need to pass in a color to animate from | ||
570 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
571 | * @param {<i>String</i>} attribute (optional) Specify a CSS attribute to use other than background color - camelCase | ||
572 | */ | ||
573 | YAHOO.ext.Actor.prototype.highlight = function(color, fromColor, duration, attribute){ | ||
574 | attribute = attribute || 'background-color'; | ||
575 | var original = this.getStyle(attribute); | ||
576 | fromColor = fromColor || ((original && original != '' && original != 'transparent') ? original : '#FFFFFF'); | ||
577 | var cfg = {}; | ||
578 | cfg[attribute] = {to: color, from: fromColor}; | ||
579 | this.setVisible(true); | ||
580 | this.animate(cfg, duration || .5, null, YAHOO.util.Easing.bounceOut, YAHOO.util.ColorAnim); | ||
581 | this.setStyle(attribute, original); | ||
582 | }; | ||
583 | |||
584 | /** | ||
585 | * Fade the element in and out the specified amount of times | ||
586 | * @param {<i>Number</i>} count (optional) How many times to pulse (Defaults to 3) | ||
587 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
588 | */ | ||
589 | YAHOO.ext.Actor.prototype.pulsate = function(count, duration){ | ||
590 | count = count || 3; | ||
591 | for(var i = 0; i < count; i++){ | ||
592 | this.toggle(true, duration || .25); | ||
593 | this.toggle(true, duration || .25); | ||
594 | } | ||
595 | }; | ||
596 | |||
597 | /** | ||
598 | * Fade the element as it is falling from it's current position | ||
599 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
600 | */ | ||
601 | YAHOO.ext.Actor.prototype.dropOut = function(duration){ | ||
602 | this.animate({opacity: {to: 0}, points: {by: [0, this.getHeight()]}}, | ||
603 | duration || .5, null, YAHOO.util.Easing.easeIn, YAHOO.util.Motion); | ||
604 | this.setVisible(false); | ||
605 | }; | ||
606 | |||
607 | /** | ||
608 | * Hide the element in a way that it appears as if it is flying off the screen | ||
609 | * @param {String} anchor The part of the page that the element should appear to move to. | ||
610 | The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left, | ||
611 | tr/top-right, bl/bottom-left or br/bottom-right. | ||
612 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
613 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeIn) | ||
614 | */ | ||
615 | YAHOO.ext.Actor.prototype.moveOut = function(anchor, duration, easing){ | ||
616 | var Y = YAHOO.util; | ||
617 | var vw = Y.Dom.getViewportWidth(); | ||
618 | var vh = Y.Dom.getViewportHeight(); | ||
619 | var cpoints = this.getCenterXY() | ||
620 | var centerX = cpoints[0]; | ||
621 | var centerY = cpoints[1]; | ||
622 | var anchor = anchor.toLowerCase(); | ||
623 | var p; | ||
624 | switch(anchor){ | ||
625 | case 't': | ||
626 | case 'top': | ||
627 | p = [centerX, -this.getHeight()]; | ||
628 | break; | ||
629 | case 'l': | ||
630 | case 'left': | ||
631 | p = [-this.getWidth(), centerY]; | ||
632 | break; | ||
633 | case 'r': | ||
634 | case 'right': | ||
635 | p = [vw+this.getWidth(), centerY]; | ||
636 | break; | ||
637 | case 'b': | ||
638 | case 'bottom': | ||
639 | p = [centerX, vh+this.getHeight()]; | ||
640 | break; | ||
641 | case 'tl': | ||
642 | case 'top-left': | ||
643 | p = [-this.getWidth(), -this.getHeight()]; | ||
644 | break; | ||
645 | case 'bl': | ||
646 | case 'bottom-left': | ||
647 | p = [-this.getWidth(), vh+this.getHeight()]; | ||
648 | break; | ||
649 | case 'br': | ||
650 | case 'bottom-right': | ||
651 | p = [vw+this.getWidth(), vh+this.getHeight()]; | ||
652 | break; | ||
653 | case 'tr': | ||
654 | case 'top-right': | ||
655 | p = [vw+this.getWidth(), -this.getHeight()]; | ||
656 | break; | ||
657 | } | ||
658 | this.moveTo(p[0], p[1], true, duration || .35, null, easing || Y.Easing.easeIn); | ||
659 | this.setVisible(false); | ||
660 | }; | ||
661 | |||
662 | /** | ||
663 | * Show the element in a way that it appears as if it is flying onto the screen | ||
664 | * @param {String} anchor The part of the page that the element should appear to move from. | ||
665 | The short/long options are t/top, l/left, b/bottom, r/right, tl/top-left, | ||
666 | tr/top-right, bl/bottom-left or br/bottom-right. | ||
667 | * @param {<i>Array</i>} to (optional) Array of x and y position to move to like [x, y] (Defaults to center screen) | ||
668 | * @param {<i>Float</i>} duration (optional) How long the effect lasts (in seconds) | ||
669 | * @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut) | ||
670 | */ | ||
671 | YAHOO.ext.Actor.prototype.moveIn = function(anchor, to, duration, easing){ | ||
672 | to = to || this.getCenterXY(); | ||
673 | this.moveOut(anchor, .01); | ||
674 | this.setVisible(true); | ||
675 | this.setXY(to, true, duration || .35, null, easing || YAHOO.util.Easing.easeOut); | ||
676 | }; | ||
677 | /** | ||
678 | * Show a ripple of exploding, attenuating borders to draw attention to an Element. | ||
679 | * @param {<i>Number<i>} color (optional) The color of the border. | ||
680 | * @param {<i>Number</i>} count (optional) How many ripples. | ||
681 | * @param {<i>Float</i>} duration (optional) How long each ripple takes to expire | ||
682 | */ | ||
683 | YAHOO.ext.Actor.prototype.frame = function(color, count, duration){ | ||
684 | color = color || "red"; | ||
685 | count = count || 3; | ||
686 | duration = duration || .5; | ||
687 | var frameFn = function(callback){ | ||
688 | var box = this.getBox(); | ||
689 | var animFn = function(){ | ||
690 | var proxy = this.createProxy({ | ||
691 | tag:"div", | ||
692 | style:{ | ||
693 | visbility:"hidden", | ||
694 | position:"absolute", | ||
695 | 'z-index':"35000", // yee haw | ||
696 | border:"0px solid " + color | ||
697 | } | ||
698 | }); | ||
699 | var scale = proxy.isBorderBox() ? 2 : 1; | ||
700 | proxy.animate({ | ||
701 | top:{from:box.y, to:box.y - 20}, | ||
702 | left:{from:box.x, to:box.x - 20}, | ||
703 | borderWidth:{from:0, to:10}, | ||
704 | opacity:{from:1, to:0}, | ||
705 | height:{from:box.height, to:(box.height + (20*scale))}, | ||
706 | width:{from:box.width, to:(box.width + (20*scale))} | ||
707 | }, duration, function(){ | ||
708 | proxy.remove(); | ||
709 | }); | ||
710 | if(--count > 0){ | ||
711 | animFn.defer((duration/2)*1000, this); | ||
712 | }else{ | ||
713 | if(typeof callback == 'function'){ | ||
714 | callback(); | ||
715 | } | ||
716 | } | ||
717 | } | ||
718 | animFn.call(this); | ||
719 | } | ||
720 | this.addAsyncCall(frameFn, 0, null, this); | ||
721 | }; | ||
722 | |||
723 | YAHOO.ext.Actor.Action = function(actor, method, args){ | ||
724 | this.actor = actor; | ||
725 | this.method = method; | ||
726 | this.args = args; | ||
727 | } | ||
728 | |||
729 | YAHOO.ext.Actor.Action.prototype = { | ||
730 | play : function(onComplete){ | ||
731 | this.method.apply(this.actor || window, this.args); | ||
732 | onComplete(); | ||
733 | } | ||
734 | }; | ||
735 | |||
736 | |||
737 | YAHOO.ext.Actor.AsyncAction = function(actor, method, args, onIndex){ | ||
738 | YAHOO.ext.Actor.AsyncAction.superclass.constructor.call(this, actor, method, args); | ||
739 | this.onIndex = onIndex; | ||
740 | this.originalCallback = this.args[onIndex]; | ||
741 | } | ||
742 | YAHOO.extendX(YAHOO.ext.Actor.AsyncAction, YAHOO.ext.Actor.Action); | ||
743 | |||
744 | YAHOO.ext.Actor.AsyncAction.prototype.play = function(onComplete){ | ||
745 | var callbackArg = this.originalCallback ? | ||
746 | this.originalCallback.createSequence(onComplete) : onComplete; | ||
747 | this.args[this.onIndex] = callbackArg; | ||
748 | this.method.apply(this.actor, this.args); | ||
749 | }; | ||
750 | |||
751 | |||
752 | YAHOO.ext.Actor.PauseAction = function(seconds){ | ||
753 | this.seconds = seconds; | ||
754 | }; | ||
755 | YAHOO.ext.Actor.PauseAction.prototype = { | ||
756 | play : function(onComplete){ | ||
757 | setTimeout(onComplete, this.seconds * 1000); | ||
758 | } | ||
759 | }; | ||
diff --git a/frontend/beta/js/YUI-extensions/anim/Animator.js b/frontend/beta/js/YUI-extensions/anim/Animator.js new file mode 100644 index 0000000..ed250fb --- a/dev/null +++ b/frontend/beta/js/YUI-extensions/anim/Animator.js | |||
@@ -0,0 +1,482 @@ | |||
1 | /** | ||
2 | * @class YAHOO.ext.Animator | ||
3 | * Provides support for syncing animations for multiple {@link YAHOO.ext.Actor}s.<br><br> | ||
4 | * <br><br>This example can be seen in action <a href="http://www.jackslocum.com/yui/2006/08/19/a-splitbar-component-for-yahoo-ui/" target="_new">here</a> | ||
5 | * by clicking on "Click here and I will point it out" at the end of the first paragraph.<br> | ||
6 | * <pre><code> | ||
7 | var animator = new YAHOO.ext.Animator(); | ||
8 | var cursor = new YAHOO.ext.Actor('cursor-img', animator); | ||
9 | var click = new YAHOO.ext.Actor('click-img', animator); | ||
10 | var resize = new YAHOO.ext.Actor('resize-img', animator); | ||
11 | |||
12 | // start capturing | ||
13 | animator.startCapture(); | ||
14 | |||
15 | // these animations will be run in sequence | ||
16 | cursor.show(); | ||
17 | cursor.moveTo(500,400); | ||
18 | cursor.moveTo(20, getEl('navbar').getY()+10, true, .75); | ||
19 | click.show(); | ||
20 | click.alignTo(cursor, 'tl', [-4, -4]); | ||
21 | |||
22 | // Add an async function call, pass callback to argument 1 | ||
23 | animator.addAsyncCall(Blog.navbar.undockDelegate, 1); | ||
24 | |||
25 | // pause .5 seconds | ||
26 | animator.pause(.5); | ||
27 | |||
28 | // again, these animations will be run in sequence | ||
29 | click.hide(true, .7); | ||
30 | cursor.alignTo('splitter', 'tr', [0, +100], true, 1); | ||
31 | resize.alignTo('splitter', 'tr', [-12, +100]); | ||
32 | |||
33 | // start sync block: these animations will run at the same time | ||
34 | animator.beginSync(); | ||
35 | cursor.hide(); | ||
36 | resize.show(); | ||
37 | animator.endSync(); | ||
38 | |||
39 | // play the captured animation sequences, call myCallback when done | ||
40 | animator.play(myCallback); | ||
41 | * </code></pre> | ||
42 | * @requires YAHOO.ext.Element | ||
43 | * @requires YAHOO.util.Dom | ||
44 | * @requires YAHOO.util.Event | ||
45 | * @requires YAHOO.util.CustomEvent | ||
46 | * @requires YAHOO.util.Anim | ||
47 | * @requires YAHOO.util.ColorAnim | ||
48 | * @requires YAHOO.util.Motion | ||
49 | * @constructor | ||
50 | * @param {String/HTMLElement} el The dom element or element id | ||
51 | * @param {<i>YAHOO.ext.Animator</i>} animator (optional) The Animator that will capture this Actor's actions | ||
52 | * @param {<i>Boolean</i>} selfCapture (optional) Whether this actor should capture it's own actions to support self playback without an animator (defaults to false) | ||
53 | */ | ||
54 | YAHOO.ext.Animator = function(/*Actors...*/){ | ||
55 | this.actors = []; | ||
56 | this.playlist = new YAHOO.ext.Animator.AnimSequence(); | ||
57 | this.captureDelegate = this.capture.createDelegate(this); | ||
58 | this.playDelegate = this.play.createDelegate(this); | ||
59 | this.syncing = false; | ||
60 | this.stopping = false; | ||
61 | this.playing = false; | ||
62 | for(var i = 0; i < arguments.length; i++){ | ||
63 | this.addActor(arguments[i]); | ||
64 | } | ||
65 | }; | ||
66 | |||
67 | YAHOO.ext.Animator.prototype = { | ||
68 | |||
69 | capture : function(actor, action){ | ||
70 | if(this.syncing){ | ||
71 | if(!this.syncMap[actor.id]){ | ||
72 | this.syncMap[actor.id] = new YAHOO.ext.Animator.AnimSequence(); | ||
73 | } | ||
74 | this.syncMap[actor.id].add(action); | ||
75 | }else{ | ||
76 | this.playlist.add(action); | ||
77 | } | ||
78 | }, | ||
79 | |||
80 | /** | ||
81 | * Add an actor. The actor is also set to capturing = true. | ||
82 | * @param {YAHOO.ext.Actor} actor | ||
83 | */ | ||
84 | addActor : function(actor){ | ||
85 | actor.onCapture.subscribe(this.captureDelegate); | ||
86 | this.actors.push(actor); | ||
87 | }, | ||
88 | |||
89 | |||
90 | /** | ||
91 | * Start capturing actions on the added actors. | ||
92 | * @param {<i>Boolean</i>} clearPlaylist Whether to also create a new playlist | ||
93 | */ | ||
94 | startCapture : function(clearPlaylist){ | ||
95 | for(var i = 0; i < this.actors.length; i++){ | ||
96 | var a = this.actors[i]; | ||
97 | if(!this.isCapturing(a)){ | ||
98 | a.onCapture.subscribe(this.captureDelegate); | ||
99 | } | ||
100 | a.capturing = true; | ||
101 | } | ||
102 | if(clearPlaylist){ | ||
103 | this.playlist = new YAHOO.ext.Animator.AnimSequence(); | ||
104 | } | ||
105 | }, | ||
106 | |||
107 | /** | ||
108 | * Checks whether this animator is listening to a specific actor. | ||
109 | * @param {YAHOO.ext.Actor} actor | ||
110 | */ | ||
111 | isCapturing : function(actor){ | ||
112 | var subscribers = actor.onCapture.subscribers; | ||
113 | if(subscribers){ | ||
114 | for(var i = 0; i < subscribers.length; i++){ | ||
115 | if(subscribers[i] && subscribers[i].contains(this.captureDelegate)){ | ||
116 | return true; | ||
117 | } | ||
118 | } | ||
119 | } | ||
120 | return false; | ||
121 | }, | ||
122 | |||
123 | /** | ||
124 | * Stop capturing on all added actors. | ||
125 | */ | ||
126 | stopCapture : function(){ | ||
127 | for(var i = 0; i < this.actors.length; i++){ | ||
128 | var a = this.actors[i]; | ||
129 | a.onCapture.unsubscribe(this.captureDelegate); | ||
130 | a.capturing = false; | ||
131 | } | ||
132 | }, | ||
133 | |||
134 | /** | ||
135 | * Start a multi-actor sync block. By default all animations are run in sequence. While in the sync block | ||
136 | * each actor's own animations will still be sequenced, but all actors will animate at the same time. | ||
137 | */ | ||
138 | beginSync : function(){ | ||
139 | this.syncing = true; | ||
140 | this.syncMap = {}; | ||
141 | }, | ||
142 | |||
143 | /** | ||
144 | * End the multi-actor sync block | ||
145 | */ | ||
146 | endSync : function(){ | ||
147 | this.syncing = false; | ||
148 | var composite = new YAHOO.ext.Animator.CompositeSequence(); | ||
149 | for(key in this.syncMap){ | ||
150 | if(typeof this.syncMap[key] != 'function'){ | ||
151 | composite.add(this.syncMap[key]); | ||
152 | } | ||
153 | } | ||
154 | this.playlist.add(composite); | ||
155 | this.syncMap = null; | ||
156 | }, | ||
157 | |||
158 | /** | ||
159 | * Starts playback of the playlist, also stops any capturing. To start capturing again call {@link #startCapture}. | ||
160 | * @param {<i>Function</i>} oncomplete (optional) Callback to execute when playback has completed | ||
161 | */ | ||
162 | play : function(oncomplete){ | ||
163 | if(this.playing) return; // can't play the same animation twice at once | ||
164 | this.stopCapture(); | ||
165 | this.playlist.play(oncomplete); | ||
166 | }, | ||
167 | |||
168 | /** | ||
169 | * Stop at the next available stopping point | ||
170 | */ | ||
171 | stop : function(){ | ||
172 | this.playlist.stop(); | ||
173 | }, | ||
174 | |||
175 | /** | ||
176 | * Check if this animator is currently playing | ||
177 | */ | ||
178 | isPlaying : function(){ | ||
179 | return this.playlist.isPlaying(); | ||
180 | }, | ||
181 | /** | ||
182 | * Clear the playlist | ||
183 | */ | ||
184 | clear : function(){ | ||
185 | this.playlist = new YAHOO.ext.Animator.AnimSequence(); | ||
186 | }, | ||
187 | |||
188 | /** | ||
189 | * Add a function call to the playlist. | ||
190 | * @param {Function} fcn The function to call | ||
191 | * @param {<i>Array</i>} args The arguments to call the function with | ||
192 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
193 | */ | ||
194 | addCall : function(fcn, args, scope){ | ||
195 | this.playlist.add(new YAHOO.ext.Actor.Action(scope, fcn, args || [])); | ||
196 | }, | ||
197 | |||
198 | /** | ||
199 | * Add an async function call to the playlist. | ||
200 | * @param {Function} fcn The function to call | ||
201 | * @param {Number} callbackIndex The index of the callback parameter on the passed function. A CALLBACK IS REQUIRED. | ||
202 | * @param {<i>Array</i>} args The arguments to call the function with | ||
203 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
204 | */ | ||
205 | addAsyncCall : function(fcn, callbackIndex, args, scope){ | ||
206 | this.playlist.add(new YAHOO.ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex)); | ||
207 | }, | ||
208 | |||
209 | /** | ||
210 | * Add a pause to the playlist (in seconds) | ||
211 | * @param {Number} seconds The number of seconds to pause. | ||
212 | */ | ||
213 | pause : function(seconds){ | ||
214 | this.playlist.add(new YAHOO.ext.Actor.PauseAction(seconds)); | ||
215 | } | ||
216 | |||
217 | }; | ||
218 | /** | ||
219 | * Static function to build a AnimatorComposite from a css selector (requires YAHOO.ext.Element.selectorFunction be defined) | ||
220 | * @param {String/Array} selector The css selector or an array of nodes to animate | ||
221 | * @method @static | ||
222 | */ | ||
223 | YAHOO.ext.Animator.select = function(selector){ | ||
224 | var els; | ||
225 | if(typeof selector == 'string'){ | ||
226 | els = YAHOO.ext.Element.selectorFunction(selector); | ||
227 | }else if(selector instanceof Array){ | ||
228 | els = selector; | ||
229 | }else{ | ||
230 | throw 'Invalid selector'; | ||
231 | } | ||
232 | return new YAHOO.ext.AnimatorComposite(els); | ||
233 | }; | ||
234 | var getActors = YAHOO.ext.Animator.select; | ||
235 | |||
236 | /** | ||
237 | * @class YAHOO.ext.AnimatorComposite | ||
238 | * Composite class with synchronized animations. This is the class returned by getActors(selector) or YAHOO.ext.Animator.select(). | ||
239 | */ | ||
240 | YAHOO.ext.AnimatorComposite = function(els){ | ||
241 | this.animator = new YAHOO.ext.Animator(); | ||
242 | this.addElements(els); | ||
243 | this.syncAnims = true; | ||
244 | }; | ||
245 | YAHOO.ext.AnimatorComposite.prototype = { | ||
246 | isComposite: true, | ||
247 | /** | ||
248 | * Adds elements to this composite. | ||
249 | * @param {Array} els An array of elements to add | ||
250 | * @return {AnimatorComposite} this | ||
251 | */ | ||
252 | addElements : function(els){ | ||
253 | if(!els) return this; | ||
254 | var anim = this.animator; | ||
255 | for(var i = 0, len = els.length; i < len; i++) { | ||
256 | anim.addActor(new YAHOO.ext.Actor(els[i])); | ||
257 | } | ||
258 | anim.startCapture(); | ||
259 | return this; | ||
260 | }, | ||
261 | /** | ||
262 | * Operations called after sequence() will be performed one by one on each element in this composite. | ||
263 | * @return {AnimatorComposite} this | ||
264 | */ | ||
265 | sequence : function(){ | ||
266 | this.syncAnims = false; | ||
267 | return this; | ||
268 | }, | ||
269 | /** | ||
270 | * Operations called after sync() will be performed at the same time on each element in this composite. | ||
271 | * @return {AnimatorComposite} this | ||
272 | */ | ||
273 | sync : function(){ | ||
274 | this.syncAnims = true; | ||
275 | return this; | ||
276 | }, | ||
277 | invoke : function(fn, args){ | ||
278 | var els = this.animator.actors; | ||
279 | if(this.syncAnims) this.animator.beginSync(); | ||
280 | for(var i = 0, len = els.length; i < len; i++) { | ||
281 | YAHOO.ext.Actor.prototype[fn].apply(els[i], args); | ||
282 | } | ||
283 | if(this.syncAnims) this.animator.endSync(); | ||
284 | return this; | ||
285 | }, | ||
286 | /** | ||
287 | * Play the actions queued in this composite. | ||
288 | * @param {Function} callback (optional) callback is called when all animations have compelted | ||
289 | * @return {AnimatorComposite} this | ||
290 | */ | ||
291 | play : function(callback){ | ||
292 | this.animator.play(callback); | ||
293 | return this; | ||
294 | }, | ||
295 | /** | ||
296 | * Clear all actions in the queue. | ||
297 | * @param {Function} callback (optional) callback is called when all animations have compelted | ||
298 | * @return {AnimatorComposite} this | ||
299 | */ | ||
300 | reset : function(callback){ | ||
301 | this.animator.startCapture(true); | ||
302 | return this; | ||
303 | }, | ||
304 | /** | ||
305 | * Add a pause | ||
306 | * @param {Number} seconds | ||
307 | * @return {AnimatorComposite} this | ||
308 | */ | ||
309 | pause : function(seconds){ | ||
310 | this.animator.pause(seconds); | ||
311 | return this; | ||
312 | }, | ||
313 | /** | ||
314 | * Get the YAHOO.ext.Animator that controls the animations for this composite. | ||
315 | * @return {YAHOO.ext.Animator} | ||
316 | */ | ||
317 | getAnimator : function(){ | ||
318 | return this.animator; | ||
319 | }, | ||
320 | /** | ||
321 | * Calls the passed function passing (el, this, index) for each element in this composite. | ||
322 | * @param {Function} fn The function to call | ||
323 | * @param {Object} scope (optional) The <i>this</i> object (defaults to the element) | ||
324 | * @return {AnimatorComposite} this | ||
325 | */ | ||
326 | each : function(fn, scope){ | ||
327 | var els = this.animator.actors; | ||
328 | if(this.syncAnims) this.animator.beginSync(); | ||
329 | for(var i = 0, len = els.length; i < len; i++){ | ||
330 | fn.call(scope || els[i], els[i], this, i); | ||
331 | } | ||
332 | if(this.syncAnims) this.animator.endSync(); | ||
333 | return this; | ||
334 | }, | ||
335 | /** | ||
336 | * Add a function call to the playlist. | ||
337 | * @param {Function} fcn The function to call | ||
338 | * @param {<i>Array</i>} args (optional) The arguments to call the function with | ||
339 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
340 | * @return {AnimatorComposite} this | ||
341 | */ | ||
342 | addCall : function(fcn, args, scope){ | ||
343 | this.animator.addCall(fcn, args, scope); | ||
344 | return this; | ||
345 | }, | ||
346 | /** | ||
347 | * Add an async function call to the playlist. | ||
348 | * @param {Function} fcn The function to call | ||
349 | * @param {Number} callbackIndex The index of the callback parameter on the passed function. <b>A CALLBACK IS REQUIRED</b>. | ||
350 | * @param {<i>Array</i>} args (optional) The arguments to call the function with | ||
351 | * @param {<i>Object</i>} scope (optional) The scope of the function | ||
352 | * @return {AnimatorComposite} this | ||
353 | */ | ||
354 | addAsyncCall : function(fcn, callbackIndex, args, scope){ | ||
355 | this.animator.addAsyncCall(fcn, callbackIndex, args, scope); | ||
356 | return this; | ||
357 | } | ||
358 | }; | ||
359 | for(var fnName in YAHOO.ext.Actor.prototype){ | ||
360 | if(typeof YAHOO.ext.Actor.prototype[fnName] == 'function'){ | ||
361 | YAHOO.ext.CompositeElement.createCall(YAHOO.ext.AnimatorComposite.prototype, fnName); | ||
362 | } | ||
363 | } | ||
364 | |||
365 | |||
366 | YAHOO.ext.Animator.AnimSequence = function(){ | ||
367 | this.actions = []; | ||
368 | this.nextDelegate = this.next.createDelegate(this); | ||
369 | this.playDelegate = this.play.createDelegate(this); | ||
370 | this.oncomplete = null; | ||
371 | this.playing = false; | ||
372 | this.stopping = false; | ||
373 | this.actionIndex = -1; | ||
374 | }; | ||
375 | |||
376 | YAHOO.ext.Animator.AnimSequence.prototype = { | ||
377 | |||
378 | add : function(action){ | ||
379 | this.actions.push(action); | ||
380 | }, | ||
381 | |||
382 | next : function(){ | ||
383 | if(this.stopping){ | ||
384 | this.playing = false; | ||
385 | if(this.oncomplete){ | ||
386 | this.oncomplete(this, false); | ||
387 | } | ||
388 | return; | ||
389 | } | ||
390 | var nextAction = this.actions[++this.actionIndex]; | ||
391 | if(nextAction){ | ||
392 | nextAction.play(this.nextDelegate); | ||
393 | }else{ | ||
394 | this.playing = false; | ||
395 | if(this.oncomplete){ | ||
396 | this.oncomplete(this, true); | ||
397 | } | ||
398 | } | ||
399 | }, | ||
400 | |||
401 | play : function(oncomplete){ | ||
402 | if(this.playing) return; // can't play the same sequence twice at once | ||
403 | this.oncomplete = oncomplete; | ||
404 | this.stopping = false; | ||
405 | this.playing = true; | ||
406 | this.actionIndex = -1; | ||
407 | this.next(); | ||
408 | }, | ||
409 | |||
410 | stop : function(){ | ||
411 | this.stopping = true; | ||
412 | }, | ||
413 | |||
414 | isPlaying : function(){ | ||
415 | return this.playing; | ||
416 | }, | ||
417 | |||
418 | clear : function(){ | ||
419 | this.actions = []; | ||
420 | }, | ||
421 | |||
422 | addCall : function(fcn, args, scope){ | ||
423 | this.actions.push(new YAHOO.ext.Actor.Action(scope, fcn, args || [])); | ||
424 | }, | ||
425 | |||
426 | addAsyncCall : function(fcn, callbackIndex, args, scope){ | ||
427 | this.actions.push(new YAHOO.ext.Actor.AsyncAction(scope, fcn, args || [], callbackIndex)); | ||
428 | }, | ||
429 | |||
430 | pause : function(seconds){ | ||
431 | this.actions.push(new YAHOO.ext.Actor.PauseAction(seconds)); | ||
432 | } | ||
433 | |||
434 | }; | ||
435 | |||
436 | YAHOO.ext.Animator.CompositeSequence = function(){ | ||
437 | this.sequences = []; | ||
438 | this.completed = 0; | ||
439 | this.trackDelegate = this.trackCompletion.createDelegate(this); | ||
440 | } | ||
441 | |||
442 | YAHOO.ext.Animator.CompositeSequence.prototype = { | ||
443 | add : function(sequence){ | ||
444 | this.sequences.push(sequence); | ||
445 | }, | ||
446 | |||
447 | play : function(onComplete){ | ||
448 | this.completed = 0; | ||
449 | if(this.sequences.length < 1){ | ||
450 | if(onComplete)onComplete(); | ||
451 | return; | ||
452 | } | ||
453 | this.onComplete = onComplete; | ||
454 | for(var i = 0; i < this.sequences.length; i++){ | ||
455 | this.sequences[i].play(this.trackDelegate); | ||
456 | } | ||
457 | }, | ||
458 | |||
459 | trackCompletion : function(){ | ||
460 | ++this.completed; | ||
461 | if(this.completed >= this.sequences.length && this.onComplete){ | ||
462 | this.onComplete(); | ||
463 | } | ||
464 | }, | ||
465 | |||
466 | stop : function(){ | ||
467 | for(var i = 0; i < this.sequences.length; i++){ | ||
468 | this.sequences[i].stop(); | ||
469 | } | ||
470 | }, | ||
471 | |||
472 | isPlaying : function(){ | ||
473 | for(var i = 0; i < this.sequences.length; i++){ | ||
474 | if(this.sequences[i].isPlaying()){ | ||
475 | return true; | ||
476 | } | ||
477 | } | ||
478 | return false; | ||
479 | } | ||
480 | }; | ||
481 | |||
482 | |||