git.roojs.org Git - roojs1/blob - Roo/Fx.js

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