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/Actor.js | |
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/Actor.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/beta/js/YUI-extensions/anim/Actor.js | 759 |
1 files changed, 759 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 | }; | ||