source/core/Fx.js

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