src/ext-core/src/core/Fx.js

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