Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / Fx.html
1 <html>
2 <head>
3   <title>The source code</title>
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
6 </head>
7 <body  onload="prettyPrint();">
8     <pre class="prettyprint lang-js">/*!
9  * Ext JS Library 3.0.3
10  * Copyright(c) 2006-2009 Ext JS, LLC
11  * licensing@extjs.com
12  * http://www.extjs.com/license
13  */
14 (function(){\r
15     // contants\r
16     var NULL = null,\r
17         UNDEFINED = undefined,\r
18         TRUE = true,\r
19         FALSE = false,\r
20         SETX = "setX",\r
21         SETY = "setY",\r
22         SETXY = "setXY",\r
23         LEFT = "left",\r
24         BOTTOM = "bottom",\r
25         TOP = "top",\r
26         RIGHT = "right",\r
27         HEIGHT = "height",\r
28         WIDTH = "width",\r
29         POINTS = "points",\r
30         HIDDEN = "hidden",\r
31         ABSOLUTE = "absolute",\r
32         VISIBLE = "visible",\r
33         MOTION = "motion",\r
34         POSITION = "position",\r
35         EASEOUT = "easeOut",\r
36         /*\r
37          * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element\r
38          */\r
39         flyEl = new Ext.Element.Flyweight(),\r
40         queues = {},\r
41         getObject = function(o){\r
42             return o || {};\r
43         },\r
44         fly = function(dom){\r
45             flyEl.dom = dom;\r
46             flyEl.id = Ext.id(dom);\r
47             return flyEl;\r
48         },\r
49         /*\r
50          * Queueing now stored outside of the element due to closure issues\r
51          */\r
52         getQueue = function(id){\r
53             if(!queues[id]){\r
54                 queues[id] = [];\r
55             }\r
56             return queues[id];\r
57         },\r
58         setQueue = function(id, value){\r
59             queues[id] = value;\r
60         };\r
61         \r
62 //Notifies Element that fx methods are available\r
63 Ext.enableFx = TRUE;\r
64 \r
65 <div id="cls-Ext.Fx"></div>/**\r
66  * @class Ext.Fx\r
67  * <p>A class to provide basic animation and visual effects support.  <b>Note:</b> This class is automatically applied\r
68  * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}.\r
69  * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be\r
70  * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>\r
71  * \r
72  * <p><b><u>Method Chaining</u></b></p>\r
73  * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that\r
74  * they return the Element object itself as the method return value, it is not always possible to mix the two in a single\r
75  * method chain.  The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.\r
76  * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately.  For this reason,\r
77  * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the\r
78  * expected results and should be done with care.  Also see <tt>{@link #callback}</tt>.</p><br/>\r
79  *\r
80  * <p><b><u>Anchor Options for Motion Effects</u></b></p>\r
81  * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element\r
82  * that will serve as either the start or end point of the animation.  Following are all of the supported anchor positions:</p>\r
83 <pre>\r
84 Value  Description\r
85 -----  -----------------------------\r
86 tl     The top left corner\r
87 t      The center of the top edge\r
88 tr     The top right corner\r
89 l      The center of the left edge\r
90 r      The center of the right edge\r
91 bl     The bottom left corner\r
92 b      The center of the bottom edge\r
93 br     The bottom right corner\r
94 </pre>\r
95  * <b>Note</b>: some Fx methods accept specific custom config parameters.  The options shown in the Config Options\r
96  * section below are common options that can be passed to any Fx method unless otherwise noted.</b>\r
97  * \r
98  * @cfg {Function} callback A function called when the effect is finished.  Note that effects are queued internally by the\r
99  * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together\r
100  * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>\r
101  * el.slideIn().highlight();\r
102  * </code></pre>\r
103  * The callback is intended for any additional code that should run once a particular effect has completed. The Element\r
104  * being operated upon is passed as the first parameter.\r
105  * \r
106  * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window.\r
107  * \r
108  * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>\r
109  * <li><b><tt>backBoth</tt></b></li>\r
110  * <li><b><tt>backIn</tt></b></li>\r
111  * <li><b><tt>backOut</tt></b></li>\r
112  * <li><b><tt>bounceBoth</tt></b></li>\r
113  * <li><b><tt>bounceIn</tt></b></li>\r
114  * <li><b><tt>bounceOut</tt></b></li>\r
115  * <li><b><tt>easeBoth</tt></b></li>\r
116  * <li><b><tt>easeBothStrong</tt></b></li>\r
117  * <li><b><tt>easeIn</tt></b></li>\r
118  * <li><b><tt>easeInStrong</tt></b></li>\r
119  * <li><b><tt>easeNone</tt></b></li>\r
120  * <li><b><tt>easeOut</tt></b></li>\r
121  * <li><b><tt>easeOutStrong</tt></b></li>\r
122  * <li><b><tt>elasticBoth</tt></b></li>\r
123  * <li><b><tt>elasticIn</tt></b></li>\r
124  * <li><b><tt>elasticOut</tt></b></li>\r
125  * </ul></div>\r
126  *\r
127  * @cfg {String} afterCls A css class to apply after the effect\r
128  * @cfg {Number} duration The length of time (in seconds) that the effect should last\r
129  * \r
130  * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between\r
131  * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.\r
132  *  \r
133  * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes\r
134  * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to \r
135  * effects that end with the element being visually hidden, ignored otherwise)\r
136  * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object\r
137  * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the\r
138  * Element after the effect finishes.\r
139  * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs\r
140  * @cfg {Boolean} concurrent Whether to allow subsequently-queued effects to run at the same time as the current effect, or to ensure that they run in sequence\r
141  * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)\r
142  */\r
143 Ext.Fx = {\r
144     \r
145     // private - calls the function taking arguments from the argHash based on the key.  Returns the return value of the function.\r
146     //           this is useful for replacing switch statements (for example).\r
147     switchStatements : function(key, fn, argHash){\r
148         return fn.apply(this, argHash[key]);\r
149     },\r
150     \r
151     /**\r
152      * Slides the element into view.  An anchor point can be optionally passed to set the point of\r
153      * origin for the slide effect.  This function automatically handles wrapping the element with\r
154      * a fixed-size container if needed.  See the Fx class overview for valid anchor point options.\r
155      * Usage:\r
156      *<pre><code>\r
157 // default: slide the element in from the top\r
158 el.slideIn();\r
159 \r
160 // custom: slide the element in from the right with a 2-second duration\r
161 el.slideIn('r', { duration: 2 });\r
162 \r
163 // common config options shown with default values\r
164 el.slideIn('t', {\r
165     easing: 'easeOut',\r
166     duration: .5\r
167 });\r
168 </code></pre>\r
169      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
170      * @param {Object} options (optional) Object literal with any of the Fx config options\r
171      * @return {Ext.Element} The Element\r
172      */\r
173     slideIn : function(anchor, o){ \r
174         o = getObject(o);\r
175         var me = this,\r
176             dom = me.dom,\r
177             st = dom.style,\r
178             xy,\r
179             r,\r
180             b,              \r
181             wrap,               \r
182             after,\r
183             st,\r
184             args, \r
185             pt,\r
186             bw,\r
187             bh;\r
188             \r
189         anchor = anchor || "t";\r
190 \r
191         me.queueFx(o, function(){            \r
192             xy = fly(dom).getXY();\r
193             // fix display to visibility\r
194             fly(dom).fixDisplay();            \r
195             \r
196             // restore values after effect\r
197             r = fly(dom).getFxRestore();      \r
198             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
199             b.right = b.x + b.width;\r
200             b.bottom = b.y + b.height;\r
201             \r
202             // fixed size for slide\r
203             fly(dom).setWidth(b.width).setHeight(b.height);            \r
204             \r
205             // wrap if needed\r
206             wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);\r
207             \r
208             st.visibility = VISIBLE;\r
209             st.position = ABSOLUTE;\r
210             \r
211             // clear out temp styles after slide and unwrap\r
212             function after(){\r
213                  fly(dom).fxUnwrap(wrap, r.pos, o);\r
214                  st.width = r.width;\r
215                  st.height = r.height;\r
216                  fly(dom).afterFx(o);\r
217             }\r
218             \r
219             // time to calculate the positions        \r
220             pt = {to: [b.x, b.y]}; \r
221             bw = {to: b.width};\r
222             bh = {to: b.height};\r
223                 \r
224             function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){                    \r
225                 var ret = {};\r
226                 fly(wrap).setWidth(ww).setHeight(wh);\r
227                 if(fly(wrap)[sXY]){\r
228                     fly(wrap)[sXY](sXYval);                  \r
229                 }\r
230                 style[s1] = style[s2] = "0";                    \r
231                 if(w){\r
232                     ret.width = w\r
233                 };\r
234                 if(h){\r
235                     ret.height = h;\r
236                 }\r
237                 if(p){\r
238                     ret.points = p;\r
239                 }\r
240                 return ret;\r
241             };\r
242 \r
243             args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
244                     t  : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],\r
245                     l  : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],\r
246                     r  : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],\r
247                     b  : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],\r
248                     tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],\r
249                     bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],\r
250                     br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],\r
251                     tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]\r
252                 });\r
253             \r
254             st.visibility = VISIBLE;\r
255             fly(wrap).show();\r
256 \r
257             arguments.callee.anim = fly(wrap).fxanim(args,\r
258                 o,\r
259                 MOTION,\r
260                 .5,\r
261                 EASEOUT, \r
262                 after);\r
263         });\r
264         return me;\r
265     },\r
266     \r
267     /**\r
268      * Slides the element out of view.  An anchor point can be optionally passed to set the end point\r
269      * for the slide effect.  When the effect is completed, the element will be hidden (visibility = \r
270      * 'hidden') but block elements will still take up space in the document.  The element must be removed\r
271      * from the DOM using the 'remove' config option if desired.  This function automatically handles \r
272      * wrapping the element with a fixed-size container if needed.  See the Fx class overview for valid anchor point options.\r
273      * Usage:\r
274      *<pre><code>\r
275 // default: slide the element out to the top\r
276 el.slideOut();\r
277 \r
278 // custom: slide the element out to the right with a 2-second duration\r
279 el.slideOut('r', { duration: 2 });\r
280 \r
281 // common config options shown with default values\r
282 el.slideOut('t', {\r
283     easing: 'easeOut',\r
284     duration: .5,\r
285     remove: false,\r
286     useDisplay: false\r
287 });\r
288 </code></pre>\r
289      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')\r
290      * @param {Object} options (optional) Object literal with any of the Fx config options\r
291      * @return {Ext.Element} The Element\r
292      */\r
293     slideOut : function(anchor, o){\r
294         o = getObject(o);\r
295         var me = this,\r
296             dom = me.dom,\r
297             st = dom.style,\r
298             xy = me.getXY(),\r
299             wrap,\r
300             r,\r
301             b,\r
302             a,\r
303             zero = {to: 0}; \r
304                     \r
305         anchor = anchor || "t";\r
306 \r
307         me.queueFx(o, function(){\r
308             \r
309             // restore values after effect\r
310             r = fly(dom).getFxRestore(); \r
311             b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
312             b.right = b.x + b.width;\r
313             b.bottom = b.y + b.height;\r
314                 \r
315             // fixed size for slide   \r
316             fly(dom).setWidth(b.width).setHeight(b.height);\r
317 \r
318             // wrap if needed\r
319             wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);\r
320                 \r
321             st.visibility = VISIBLE;\r
322             st.position = ABSOLUTE;\r
323             fly(wrap).setWidth(b.width).setHeight(b.height);            \r
324 \r
325             function after(){\r
326                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                \r
327                 fly(dom).fxUnwrap(wrap, r.pos, o);\r
328                 st.width = r.width;\r
329                 st.height = r.height;\r
330                 fly(dom).afterFx(o);\r
331             }            \r
332             \r
333             function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){                    \r
334                 var ret = {};\r
335                 \r
336                 style[s1] = style[s2] = "0";\r
337                 ret[p1] = v1;               \r
338                 if(p2){\r
339                     ret[p2] = v2;               \r
340                 }\r
341                 if(p3){\r
342                     ret[p3] = v3;\r
343                 }\r
344                 \r
345                 return ret;\r
346             };\r
347             \r
348             a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
349                 t  : [st, LEFT, BOTTOM, HEIGHT, zero],\r
350                 l  : [st, RIGHT, TOP, WIDTH, zero],\r
351                 r  : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],\r
352                 b  : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
353                 tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],\r
354                 bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
355                 br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],\r
356                 tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]\r
357             });\r
358             \r
359             arguments.callee.anim = fly(wrap).fxanim(a,\r
360                 o,\r
361                 MOTION,\r
362                 .5,\r
363                 EASEOUT, \r
364                 after);\r
365         });\r
366         return me;\r
367     },\r
368 \r
369     /**\r
370      * Fades the element out while slowly expanding it in all directions.  When the effect is completed, the \r
371      * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. \r
372      * The element must be removed from the DOM using the 'remove' config option if desired.\r
373      * Usage:\r
374      *<pre><code>\r
375 // default\r
376 el.puff();\r
377 \r
378 // common config options shown with default values\r
379 el.puff({\r
380     easing: 'easeOut',\r
381     duration: .5,\r
382     remove: false,\r
383     useDisplay: false\r
384 });\r
385 </code></pre>\r
386      * @param {Object} options (optional) Object literal with any of the Fx config options\r
387      * @return {Ext.Element} The Element\r
388      */\r
389     puff : function(o){\r
390         o = getObject(o);\r
391         var me = this,\r
392             dom = me.dom,\r
393             st = dom.style,\r
394             width,\r
395             height,\r
396             r;\r
397 \r
398         me.queueFx(o, function(){\r
399             width = fly(dom).getWidth();\r
400             height = fly(dom).getHeight();\r
401             fly(dom).clearOpacity();\r
402             fly(dom).show();\r
403 \r
404             // restore values after effect\r
405             r = fly(dom).getFxRestore();                   \r
406             \r
407             function after(){\r
408                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();                  \r
409                 fly(dom).clearOpacity();  \r
410                 fly(dom).setPositioning(r.pos);\r
411                 st.width = r.width;\r
412                 st.height = r.height;\r
413                 st.fontSize = '';\r
414                 fly(dom).afterFx(o);\r
415             }   \r
416 \r
417             arguments.callee.anim = fly(dom).fxanim({\r
418                     width : {to : fly(dom).adjustWidth(width * 2)},\r
419                     height : {to : fly(dom).adjustHeight(height * 2)},\r
420                     points : {by : [-width * .5, -height * .5]},\r
421                     opacity : {to : 0},\r
422                     fontSize: {to : 200, unit: "%"}\r
423                 },\r
424                 o,\r
425                 MOTION,\r
426                 .5,\r
427                 EASEOUT,\r
428                  after);\r
429         });\r
430         return me;\r
431     },\r
432 \r
433     /**\r
434      * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).\r
435      * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still \r
436      * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.\r
437      * Usage:\r
438      *<pre><code>\r
439 // default\r
440 el.switchOff();\r
441 \r
442 // all config options shown with default values\r
443 el.switchOff({\r
444     easing: 'easeIn',\r
445     duration: .3,\r
446     remove: false,\r
447     useDisplay: false\r
448 });\r
449 </code></pre>\r
450      * @param {Object} options (optional) Object literal with any of the Fx config options\r
451      * @return {Ext.Element} The Element\r
452      */\r
453     switchOff : function(o){\r
454         o = getObject(o);\r
455         var me = this,\r
456             dom = me.dom,\r
457             st = dom.style,\r
458             r;\r
459 \r
460         me.queueFx(o, function(){\r
461             fly(dom).clearOpacity();\r
462             fly(dom).clip();\r
463 \r
464             // restore values after effect\r
465             r = fly(dom).getFxRestore();\r
466                 \r
467             function after(){\r
468                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();  \r
469                 fly(dom).clearOpacity();\r
470                 fly(dom).setPositioning(r.pos);\r
471                 st.width = r.width;\r
472                 st.height = r.height;   \r
473                 fly(dom).afterFx(o);\r
474             };\r
475 \r
476             fly(dom).fxanim({opacity : {to : 0.3}}, \r
477                 NULL, \r
478                 NULL, \r
479                 .1, \r
480                 NULL, \r
481                 function(){                                 \r
482                     fly(dom).clearOpacity();\r
483                         (function(){                            \r
484                             fly(dom).fxanim({\r
485                                 height : {to : 1},\r
486                                 points : {by : [0, fly(dom).getHeight() * .5]}\r
487                             }, \r
488                             o, \r
489                             MOTION, \r
490                             0.3, \r
491                             'easeIn', \r
492                             after);\r
493                         }).defer(100);\r
494                 });\r
495         });\r
496         return me;\r
497     },\r
498 \r
499     /**\r
500      * Highlights the Element by setting a color (applies to the background-color by default, but can be\r
501      * changed using the "attr" config option) and then fading back to the original color. If no original\r
502      * color is available, you should provide the "endColor" config option which will be cleared after the animation.\r
503      * Usage:\r
504 <pre><code>\r
505 // default: highlight background to yellow\r
506 el.highlight();\r
507 \r
508 // custom: highlight foreground text to blue for 2 seconds\r
509 el.highlight("0000ff", { attr: 'color', duration: 2 });\r
510 \r
511 // common config options shown with default values\r
512 el.highlight("ffff9c", {\r
513     attr: "background-color", //can be any valid CSS property (attribute) that supports a color value\r
514     endColor: (current color) or "ffffff",\r
515     easing: 'easeIn',\r
516     duration: 1\r
517 });\r
518 </code></pre>\r
519      * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')\r
520      * @param {Object} options (optional) Object literal with any of the Fx config options\r
521      * @return {Ext.Element} The Element\r
522      */ \r
523     highlight : function(color, o){\r
524         o = getObject(o);\r
525         var me = this,\r
526             dom = me.dom,\r
527             attr = o.attr || "backgroundColor",\r
528             a = {},\r
529             restore;\r
530 \r
531         me.queueFx(o, function(){\r
532             fly(dom).clearOpacity();\r
533             fly(dom).show();\r
534 \r
535             function after(){\r
536                 dom.style[attr] = restore;\r
537                 fly(dom).afterFx(o);\r
538             }            \r
539             restore = dom.style[attr];\r
540             a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};\r
541             arguments.callee.anim = fly(dom).fxanim(a,\r
542                 o,\r
543                 'color',\r
544                 1,\r
545                 'easeIn', \r
546                 after);\r
547         });\r
548         return me;\r
549     },\r
550 \r
551    /**\r
552     * Shows a ripple of exploding, attenuating borders to draw attention to an Element.\r
553     * Usage:\r
554 <pre><code>\r
555 // default: a single light blue ripple\r
556 el.frame();\r
557 \r
558 // custom: 3 red ripples lasting 3 seconds total\r
559 el.frame("ff0000", 3, { duration: 3 });\r
560 \r
561 // common config options shown with default values\r
562 el.frame("C3DAF9", 1, {\r
563     duration: 1 //duration of each individual ripple.\r
564     // Note: Easing is not configurable and will be ignored if included\r
565 });\r
566 </code></pre>\r
567     * @param {String} color (optional) The color of the border.  Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').\r
568     * @param {Number} count (optional) The number of ripples to display (defaults to 1)\r
569     * @param {Object} options (optional) Object literal with any of the Fx config options\r
570     * @return {Ext.Element} The Element\r
571     */\r
572     frame : function(color, count, o){\r
573         o = getObject(o);\r
574         var me = this,\r
575             dom = me.dom,\r
576             proxy,\r
577             active;\r
578 \r
579         me.queueFx(o, function(){\r
580             color = color || '#C3DAF9'\r
581             if(color.length == 6){\r
582                 color = '#' + color;\r
583             }            \r
584             count = count || 1;\r
585             fly(dom).show();\r
586 \r
587             var xy = fly(dom).getXY(),\r
588                 b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},\r
589                 queue = function(){\r
590                     proxy = fly(document.body || document.documentElement).createChild({\r
591                         style:{\r
592                             position : ABSOLUTE,\r
593                             'z-index': 35000, // yee haw\r
594                             border : '0px solid ' + color\r
595                         }\r
596                     });\r
597                     return proxy.queueFx({}, animFn);\r
598                 };\r
599             \r
600             \r
601             arguments.callee.anim = {\r
602                 isAnimated: true,\r
603                 stop: function() {\r
604                     count = 0;\r
605                     proxy.stopFx();\r
606                 }\r
607             };\r
608             \r
609             function animFn(){\r
610                 var scale = Ext.isBorderBox ? 2 : 1;\r
611                 active = proxy.anim({\r
612                     top : {from : b.y, to : b.y - 20},\r
613                     left : {from : b.x, to : b.x - 20},\r
614                     borderWidth : {from : 0, to : 10},\r
615                     opacity : {from : 1, to : 0},\r
616                     height : {from : b.height, to : b.height + 20 * scale},\r
617                     width : {from : b.width, to : b.width + 20 * scale}\r
618                 },{\r
619                     duration: o.duration || 1,\r
620                     callback: function() {\r
621                         proxy.remove();\r
622                         --count > 0 ? queue() : fly(dom).afterFx(o);\r
623                     }\r
624                 });\r
625                 arguments.callee.anim = {\r
626                     isAnimated: true,\r
627                     stop: function(){\r
628                         active.stop();\r
629                     }\r
630                 };\r
631             };\r
632             queue();\r
633         });\r
634         return me;\r
635     },\r
636 \r
637    /**\r
638     * Creates a pause before any subsequent queued effects begin.  If there are\r
639     * no effects queued after the pause it will have no effect.\r
640     * Usage:\r
641 <pre><code>\r
642 el.pause(1);\r
643 </code></pre>\r
644     * @param {Number} seconds The length of time to pause (in seconds)\r
645     * @return {Ext.Element} The Element\r
646     */\r
647     pause : function(seconds){        \r
648         var dom = this.dom,\r
649             t;\r
650 \r
651         this.queueFx({}, function(){\r
652             t = setTimeout(function(){\r
653                 fly(dom).afterFx({});\r
654             }, seconds * 1000);\r
655             arguments.callee.anim = {\r
656                 isAnimated: true,\r
657                 stop: function(){\r
658                     clearTimeout(t);\r
659                     fly(dom).afterFx({});\r
660                 }\r
661             };\r
662         });\r
663         return this;\r
664     },\r
665 \r
666    /**\r
667     * Fade an element in (from transparent to opaque).  The ending opacity can be specified\r
668     * using the <tt>{@link #endOpacity}</tt> config option.\r
669     * Usage:\r
670 <pre><code>\r
671 // default: fade in from opacity 0 to 100%\r
672 el.fadeIn();\r
673 \r
674 // custom: fade in from opacity 0 to 75% over 2 seconds\r
675 el.fadeIn({ endOpacity: .75, duration: 2});\r
676 \r
677 // common config options shown with default values\r
678 el.fadeIn({\r
679     endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)\r
680     easing: 'easeOut',\r
681     duration: .5\r
682 });\r
683 </code></pre>\r
684     * @param {Object} options (optional) Object literal with any of the Fx config options\r
685     * @return {Ext.Element} The Element\r
686     */\r
687     fadeIn : function(o){\r
688         o = getObject(o);\r
689         var me = this,\r
690             dom = me.dom,\r
691             to = o.endOpacity || 1;\r
692         \r
693         me.queueFx(o, function(){\r
694             fly(dom).setOpacity(0);\r
695             fly(dom).fixDisplay();\r
696             dom.style.visibility = VISIBLE;\r
697             arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},\r
698                 o, NULL, .5, EASEOUT, function(){\r
699                 if(to == 1){\r
700                     fly(dom).clearOpacity();\r
701                 }\r
702                 fly(dom).afterFx(o);\r
703             });\r
704         });\r
705         return me;\r
706     },\r
707 \r
708    /**\r
709     * Fade an element out (from opaque to transparent).  The ending opacity can be specified\r
710     * using the <tt>{@link #endOpacity}</tt> config option.  Note that IE may require\r
711     * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly.\r
712     * Usage:\r
713 <pre><code>\r
714 // default: fade out from the element's current opacity to 0\r
715 el.fadeOut();\r
716 \r
717 // custom: fade out from the element's current opacity to 25% over 2 seconds\r
718 el.fadeOut({ endOpacity: .25, duration: 2});\r
719 \r
720 // common config options shown with default values\r
721 el.fadeOut({\r
722     endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)\r
723     easing: 'easeOut',\r
724     duration: .5,\r
725     remove: false,\r
726     useDisplay: false\r
727 });\r
728 </code></pre>\r
729     * @param {Object} options (optional) Object literal with any of the Fx config options\r
730     * @return {Ext.Element} The Element\r
731     */\r
732     fadeOut : function(o){\r
733         o = getObject(o);\r
734         var me = this,\r
735             dom = me.dom,\r
736             style = dom.style,\r
737             to = o.endOpacity || 0;         \r
738         \r
739         me.queueFx(o, function(){  \r
740             arguments.callee.anim = fly(dom).fxanim({ \r
741                 opacity : {to : to}},\r
742                 o, \r
743                 NULL, \r
744                 .5, \r
745                 EASEOUT, \r
746                 function(){\r
747                     if(to == 0){\r
748                         Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? \r
749                             style.display = "none" :\r
750                             style.visibility = HIDDEN;\r
751                             \r
752                         fly(dom).clearOpacity();\r
753                     }\r
754                     fly(dom).afterFx(o);\r
755             });\r
756         });\r
757         return me;\r
758     },\r
759 \r
760    /**\r
761     * Animates the transition of an element's dimensions from a starting height/width\r
762     * to an ending height/width.  This method is a convenience implementation of {@link shift}.\r
763     * Usage:\r
764 <pre><code>\r
765 // change height and width to 100x100 pixels\r
766 el.scale(100, 100);\r
767 \r
768 // common config options shown with default values.  The height and width will default to\r
769 // the element&#39;s existing values if passed as null.\r
770 el.scale(\r
771     [element&#39;s width],\r
772     [element&#39;s height], {\r
773         easing: 'easeOut',\r
774         duration: .35\r
775     }\r
776 );\r
777 </code></pre>\r
778     * @param {Number} width  The new width (pass undefined to keep the original width)\r
779     * @param {Number} height  The new height (pass undefined to keep the original height)\r
780     * @param {Object} options (optional) Object literal with any of the Fx config options\r
781     * @return {Ext.Element} The Element\r
782     */\r
783     scale : function(w, h, o){\r
784         this.shift(Ext.apply({}, o, {\r
785             width: w,\r
786             height: h\r
787         }));\r
788         return this;\r
789     },\r
790 \r
791    /**\r
792     * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.\r
793     * Any of these properties not specified in the config object will not be changed.  This effect \r
794     * requires that at least one new dimension, position or opacity setting must be passed in on\r
795     * the config object in order for the function to have any effect.\r
796     * Usage:\r
797 <pre><code>\r
798 // slide the element horizontally to x position 200 while changing the height and opacity\r
799 el.shift({ x: 200, height: 50, opacity: .8 });\r
800 \r
801 // common config options shown with default values.\r
802 el.shift({\r
803     width: [element&#39;s width],\r
804     height: [element&#39;s height],\r
805     x: [element&#39;s x position],\r
806     y: [element&#39;s y position],\r
807     opacity: [element&#39;s opacity],\r
808     easing: 'easeOut',\r
809     duration: .35\r
810 });\r
811 </code></pre>\r
812     * @param {Object} options  Object literal with any of the Fx config options\r
813     * @return {Ext.Element} The Element\r
814     */\r
815     shift : function(o){\r
816         o = getObject(o);\r
817         var dom = this.dom,\r
818             a = {};\r
819                 \r
820         this.queueFx(o, function(){\r
821             for (var prop in o) {\r
822                 if (o[prop] != UNDEFINED) {                                                 \r
823                     a[prop] = {to : o[prop]};                   \r
824                 }\r
825             } \r
826             \r
827             a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;\r
828             a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a;   \r
829             \r
830             if (a.x || a.y || a.xy) {\r
831                 a.points = a.xy || \r
832                            {to : [ a.x ? a.x.to : fly(dom).getX(),\r
833                                    a.y ? a.y.to : fly(dom).getY()]};                  \r
834             }\r
835 \r
836             arguments.callee.anim = fly(dom).fxanim(a,\r
837                 o, \r
838                 MOTION, \r
839                 .35, \r
840                 EASEOUT, \r
841                 function(){\r
842                     fly(dom).afterFx(o);\r
843                 });\r
844         });\r
845         return this;\r
846     },\r
847 \r
848     /**\r
849      * Slides the element while fading it out of view.  An anchor point can be optionally passed to set the \r
850      * ending point of the effect.\r
851      * Usage:\r
852      *<pre><code>\r
853 // default: slide the element downward while fading out\r
854 el.ghost();\r
855 \r
856 // custom: slide the element out to the right with a 2-second duration\r
857 el.ghost('r', { duration: 2 });\r
858 \r
859 // common config options shown with default values\r
860 el.ghost('b', {\r
861     easing: 'easeOut',\r
862     duration: .5,\r
863     remove: false,\r
864     useDisplay: false\r
865 });\r
866 </code></pre>\r
867      * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')\r
868      * @param {Object} options (optional) Object literal with any of the Fx config options\r
869      * @return {Ext.Element} The Element\r
870      */\r
871     ghost : function(anchor, o){\r
872         o = getObject(o);\r
873         var me = this,\r
874             dom = me.dom,\r
875             st = dom.style,\r
876             a = {opacity: {to: 0}, points: {}},\r
877             pt = a.points,\r
878             r,\r
879             w,\r
880             h;\r
881             \r
882         anchor = anchor || "b";\r
883 \r
884         me.queueFx(o, function(){\r
885             // restore values after effect\r
886             r = fly(dom).getFxRestore();\r
887             w = fly(dom).getWidth();\r
888             h = fly(dom).getHeight();\r
889             \r
890             function after(){\r
891                 o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide();   \r
892                 fly(dom).clearOpacity();\r
893                 fly(dom).setPositioning(r.pos);\r
894                 st.width = r.width;\r
895                 st.height = r.height;\r
896                 fly(dom).afterFx(o);\r
897             }\r
898                 \r
899             pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {\r
900                t  : [0, -h],\r
901                l  : [-w, 0],\r
902                r  : [w, 0],\r
903                b  : [0, h],\r
904                tl : [-w, -h],\r
905                bl : [-w, h],\r
906                br : [w, h],\r
907                tr : [w, -h] \r
908             });\r
909                 \r
910             arguments.callee.anim = fly(dom).fxanim(a,\r
911                 o,\r
912                 MOTION,\r
913                 .5,\r
914                 EASEOUT, after);\r
915         });\r
916         return me;\r
917     },\r
918 \r
919     /**\r
920      * Ensures that all effects queued after syncFx is called on the element are\r
921      * run concurrently.  This is the opposite of {@link #sequenceFx}.\r
922      * @return {Ext.Element} The Element\r
923      */\r
924     syncFx : function(){\r
925         var me = this;\r
926         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
927             block : FALSE,\r
928             concurrent : TRUE,\r
929             stopFx : FALSE\r
930         });\r
931         return me;\r
932     },\r
933 \r
934     /**\r
935      * Ensures that all effects queued after sequenceFx is called on the element are\r
936      * run in sequence.  This is the opposite of {@link #syncFx}.\r
937      * @return {Ext.Element} The Element\r
938      */\r
939     sequenceFx : function(){\r
940         var me = this;\r
941         me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
942             block : FALSE,\r
943             concurrent : FALSE,\r
944             stopFx : FALSE\r
945         });\r
946         return me;\r
947     },\r
948 \r
949     /* @private */\r
950     nextFx : function(){        \r
951         var ef = getQueue(this.dom.id)[0];\r
952         if(ef){\r
953             ef.call(this);\r
954         }\r
955     },\r
956 \r
957     /**\r
958      * Returns true if the element has any effects actively running or queued, else returns false.\r
959      * @return {Boolean} True if element has active effects, else false\r
960      */\r
961     hasActiveFx : function(){\r
962         return getQueue(this.dom.id)[0];\r
963     },\r
964 \r
965     /**\r
966      * Stops any running effects and clears the element's internal effects queue if it contains\r
967      * any additional effects that haven't started yet.\r
968      * @return {Ext.Element} The Element\r
969      */\r
970     stopFx : function(finish){\r
971         var me = this,\r
972             id = me.dom.id;\r
973         if(me.hasActiveFx()){\r
974             var cur = getQueue(id)[0];\r
975             if(cur && cur.anim){\r
976                 if(cur.anim.isAnimated){\r
977                     setQueue(id, [cur]); //clear\r
978                     cur.anim.stop(finish !== undefined ? finish : TRUE);\r
979                 }else{\r
980                     setQueue(id, []);\r
981                 }\r
982             }\r
983         }\r
984         return me;\r
985     },\r
986 \r
987     /* @private */\r
988     beforeFx : function(o){\r
989         if(this.hasActiveFx() && !o.concurrent){\r
990            if(o.stopFx){\r
991                this.stopFx();\r
992                return TRUE;\r
993            }\r
994            return FALSE;\r
995         }\r
996         return TRUE;\r
997     },\r
998 \r
999     /**\r
1000      * Returns true if the element is currently blocking so that no other effect can be queued\r
1001      * until this effect is finished, else returns false if blocking is not set.  This is commonly\r
1002      * used to ensure that an effect initiated by a user action runs to completion prior to the\r
1003      * same effect being restarted (e.g., firing only one effect even if the user clicks several times).\r
1004      * @return {Boolean} True if blocking, else false\r
1005      */\r
1006     hasFxBlock : function(){\r
1007         var q = getQueue(this.dom.id);\r
1008         return q && q[0] && q[0].block;\r
1009     },\r
1010 \r
1011     /* @private */\r
1012     queueFx : function(o, fn){\r
1013         var me = fly(this.dom);\r
1014         if(!me.hasFxBlock()){\r
1015             Ext.applyIf(o, me.fxDefaults);\r
1016             if(!o.concurrent){\r
1017                 var run = me.beforeFx(o);\r
1018                 fn.block = o.block;\r
1019                 getQueue(me.dom.id).push(fn);\r
1020                 if(run){\r
1021                     me.nextFx();\r
1022                 }\r
1023             }else{\r
1024                 fn.call(me);\r
1025             }\r
1026         }\r
1027         return me;\r
1028     },\r
1029 \r
1030     /* @private */\r
1031     fxWrap : function(pos, o, vis){ \r
1032         var dom = this.dom,\r
1033             wrap,\r
1034             wrapXY;\r
1035         if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){            \r
1036             if(o.fixPosition){\r
1037                 wrapXY = fly(dom).getXY();\r
1038             }\r
1039             var div = document.createElement("div");\r
1040             div.style.visibility = vis;\r
1041             wrap = dom.parentNode.insertBefore(div, dom);\r
1042             fly(wrap).setPositioning(pos);\r
1043             if(fly(wrap).isStyle(POSITION, "static")){\r
1044                 fly(wrap).position("relative");\r
1045             }\r
1046             fly(dom).clearPositioning('auto');\r
1047             fly(wrap).clip();\r
1048             wrap.appendChild(dom);\r
1049             if(wrapXY){\r
1050                 fly(wrap).setXY(wrapXY);\r
1051             }\r
1052         }\r
1053         return wrap;\r
1054     },\r
1055 \r
1056     /* @private */\r
1057     fxUnwrap : function(wrap, pos, o){      \r
1058         var dom = this.dom;\r
1059         fly(dom).clearPositioning();\r
1060         fly(dom).setPositioning(pos);\r
1061         if(!o.wrap){\r
1062             var pn = fly(wrap).dom.parentNode;
1063             pn.insertBefore(dom, wrap); \r
1064             fly(wrap).remove();\r
1065         }\r
1066     },\r
1067 \r
1068     /* @private */\r
1069     getFxRestore : function(){\r
1070         var st = this.dom.style;\r
1071         return {pos: this.getPositioning(), width: st.width, height : st.height};\r
1072     },\r
1073 \r
1074     /* @private */\r
1075     afterFx : function(o){\r
1076         var dom = this.dom,\r
1077             id = dom.id;\r
1078         if(o.afterStyle){\r
1079             fly(dom).setStyle(o.afterStyle);            \r
1080         }\r
1081         if(o.afterCls){\r
1082             fly(dom).addClass(o.afterCls);\r
1083         }\r
1084         if(o.remove == TRUE){\r
1085             fly(dom).remove();\r
1086         }\r
1087         if(o.callback){\r
1088             o.callback.call(o.scope, fly(dom));\r
1089         }\r
1090         if(!o.concurrent){\r
1091             getQueue(id).shift();\r
1092             fly(dom).nextFx();\r
1093         }\r
1094     },\r
1095 \r
1096     /* @private */\r
1097     fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){\r
1098         animType = animType || 'run';\r
1099         opt = opt || {};\r
1100         var anim = Ext.lib.Anim[animType](\r
1101                 this.dom, \r
1102                 args,\r
1103                 (opt.duration || defaultDur) || .35,\r
1104                 (opt.easing || defaultEase) || EASEOUT,\r
1105                 cb,            \r
1106                 this\r
1107             );\r
1108         opt.anim = anim;\r
1109         return anim;\r
1110     }\r
1111 };\r
1112 \r
1113 // backwards compat\r
1114 Ext.Fx.resize = Ext.Fx.scale;\r
1115 \r
1116 //When included, Ext.Fx is automatically applied to Element so that all basic\r
1117 //effects are available directly via the Element API\r
1118 Ext.Element.addMethods(Ext.Fx);\r
1119 })();
1120 </pre>
1121 </body>
1122 </html>