开通博客赚积分
发布资源赚积分
分类

源码开发语言/平台
当前位置：首页 > 源码/资料 > 中间件编程 > 查看源码
Fx.js
资源名称：ext-3.0.0.zip　[点击查看]
上传用户：shuoshiled
上传日期：2018-01-28
资源大小：10124k
文件大小：39k
源码类别：

中间件编程

开发平台：

JavaScript

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