docs/source/Fx.html

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