+++ /dev/null
-<html><head><title>/home/alan/gitlive/roojs1/Roo/Fx.js</title><link rel="stylesheet" type="text/css" href="../../css/highlight-js.css"/></head><body class="highlightpage"><code class="jsdoc-pretty"><span class="jsdoc-comment">/*
- * Based on:
- * Ext JS Library 1.1.1
- * Copyright(c) 2006-2007, Ext JS, LLC.
- *
- * Originally Released Under LGPL - original licence link has changed is not relivant.
- *
- * Fork - LGPL
- * <script type="text/javascript">
- */
-
-
-
-//Notifies Element that fx methods are available
-</span><span class="jsdoc-var">Roo.enableFx </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">;
-
-</span><span class="jsdoc-comment">/**
- * @class Roo.Fx
- * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied
- * to the {@link Roo.Element} interface when included, so all effects calls should be performed via Element.
- * Conversely, since the effects are not actually defined in Element, Roo.Fx <b>must</b> be included in order for the
- * Element effects to work.</p><br/>
- *
- * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that
- * they return the Element object itself as the method return value, it is not always possible to mix the two in a single
- * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced.
- * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason,
- * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the
- * expected results and should be done with care.</p><br/>
- *
- * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element
- * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p>
-<pre>
-Value Description
------ -----------------------------
-tl The top left corner
-t The center of the top edge
-tr The top right corner
-l The center of the left edge
-r The center of the right edge
-bl The bottom left corner
-b The center of the bottom edge
-br The bottom right corner
-</pre>
- * <b>Although some Fx methods accept specific custom config parameters, the ones shown in the Config Options section
- * below are common options that can be passed to any Fx method.</b>
- * @cfg {Function} callback A function called when the effect is finished
- * @cfg {Object} scope The scope of the effect function
- * @cfg {String} easing A valid Easing value for the effect
- * @cfg {String} afterCls A css class to apply after the effect
- * @cfg {Number} duration The length of time (in seconds) that the effect should last
- * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes
- * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to
- * effects that end with the element being visually hidden, ignored otherwise)
- * @cfg {String/Object/Function} afterStyle A style specification string, e.g. "width:100px", or an object in the form {width:"100px"}, or
- * a function which returns such a specification that will be applied to the Element after the effect finishes
- * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs
- * @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
- * @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
- */
-</span><span class="jsdoc-var">Roo.Fx </span><span class="jsdoc-syntax">= {
- </span><span class="jsdoc-comment">/**
- * Slides the element into view. An anchor point can be optionally passed to set the point of
- * origin for the slide effect. This function automatically handles wrapping the element with
- * a fixed-size container if needed. See the Fx class overview for valid anchor point options.
- * Usage:
- *<pre><code>
-// default: slide the element in from the top
-el.slideIn();
-
-// custom: slide the element in from the right with a 2-second duration
-el.slideIn('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideIn('t', {
- easing: 'easeOut',
- duration: .5
-});
-</code></pre>
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">slideIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
-
- </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"t"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-comment">// fix display to visibility
- </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-comment">// restore values after effect
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-comment">// fixed size for slide
- </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-comment">// wrap if needed
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxWrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"visible"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"absolute"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-comment">// clear out temp styles after slide and unwrap
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">el.fxUnwrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
- </span><span class="jsdoc-comment">// time to calc the positions
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: [</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}, </span><span class="jsdoc-var">bw </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">}, </span><span class="jsdoc-var">bh </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">};
-
- </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"t"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, 0);
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"l"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"r"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, </span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">wrap.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"b"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, 0);
- </span><span class="jsdoc-var">wrap.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"bl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
- </span><span class="jsdoc-var">wrap.setY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"br"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
- </span><span class="jsdoc-var">wrap.setXY</span><span class="jsdoc-syntax">([</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]);
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tr"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(0, 0);
- </span><span class="jsdoc-var">wrap.setX</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bw</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">bh</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">pt</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- }
- </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"visible"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">wrap.show</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Slides the element out of view. An anchor point can be optionally passed to set the end point
- * for the slide effect. When the effect is completed, the element will be hidden (visibility =
- * 'hidden') but block elements will still take up space in the document. The element must be removed
- * from the DOM using the 'remove' config option if desired. This function automatically handles
- * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options.
- * Usage:
- *<pre><code>
-// default: slide the element out to the top
-el.slideOut();
-
-// custom: slide the element out to the right with a 2-second duration
-el.slideOut('r', { duration: 2 });
-
-// common config options shown with default values
-el.slideOut('t', {
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-</code></pre>
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">slideOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
-
- </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"t"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-comment">// restore values after effect
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-comment">// fixed size for slide
- </span><span class="jsdoc-var">this.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-comment">// wrap if needed
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxWrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"visible"</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"visible"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.position </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"absolute"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-var">wrap.setSize</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">b</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
- }
-
- </span><span class="jsdoc-var">el.fxUnwrap</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
-
- </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">zero </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0};
- </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"t"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"l"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"r"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"b"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"bl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.right </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"br"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.top </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">+</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.bottom</span><span class="jsdoc-syntax">]}};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tr"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">st.left </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">st.bottom </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"0"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">zero</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:[</span><span class="jsdoc-var">b.right</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">]}};
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- }
-
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">wrap.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Fades the element out while slowly expanding it in all directions. When the effect is completed, the
- * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document.
- * The element must be removed from the DOM using the 'remove' config option if desired.
- * Usage:
- *<pre><code>
-// default
-el.puff();
-
-// common config options shown with default values
-el.puff({
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-</code></pre>
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">puff </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-comment">// restore values after effect
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
- }
-
- </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.fontSize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">''</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">* 2)},
- </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">* 2)},
- </span><span class="jsdoc-var">points </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">by</span><span class="jsdoc-syntax">: [-(</span><span class="jsdoc-var">width </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">), -(</span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">* </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">)]},
- </span><span class="jsdoc-var">opacity </span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0},
- </span><span class="jsdoc-var">fontSize</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:200, </span><span class="jsdoc-var">unit</span><span class="jsdoc-syntax">: </span><span class="jsdoc-string">"%"</span><span class="jsdoc-syntax">}
- },
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
- * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
- * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired.
- * Usage:
- *<pre><code>
-// default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
- easing: 'easeIn',
- duration: .3,
- remove: false,
- useDisplay: false
-});
-</code></pre>
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">switchOff </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.clip</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-comment">// restore values after effect
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
- }
-
- </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
-
- </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:0.3}}, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.1</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- (</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:1},
- </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">by</span><span class="jsdoc-syntax">:[0, </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">() * </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">]}
- }, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">, 0.3, </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- })</span><span class="jsdoc-var">.defer</span><span class="jsdoc-syntax">(100, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- });
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Highlights the Element by setting a color (applies to the background-color by default, but can be
- * changed using the "attr" config option) and then fading back to the original color. If no original
- * color is available, you should provide the "endColor" config option which will be cleared after the animation.
- * Usage:
-<pre><code>
-// default: highlight background to yellow
-el.highlight();
-
-// custom: highlight foreground text to blue for 2 seconds
-el.highlight("0000ff", { attr: 'color', duration: 2 });
-
-// common config options shown with default values
-el.highlight("ffff9c", {
- attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
- endColor: (current color) or "ffffff",
- easing: 'easeIn',
- duration: 1
-});
-</code></pre>
- * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">highlight </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"ffff9c"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">attr </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.attr </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"backgroundColor"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">origColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getColor</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">restoreColor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-var">endColor </span><span class="jsdoc-syntax">= (</span><span class="jsdoc-var">o.endColor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">origColor</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-string">"ffffff"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">el.dom.style</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = </span><span class="jsdoc-var">restoreColor</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {};
- </span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">attr</span><span class="jsdoc-syntax">] = {</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">endColor</span><span class="jsdoc-syntax">};
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'color'</span><span class="jsdoc-syntax">,
- 1,
- </span><span class="jsdoc-string">'easeIn'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
- * Usage:
-<pre><code>
-// default: a single light blue ripple
-el.frame();
-
-// custom: 3 red ripples lasting 3 seconds total
-el.frame("ff0000", 3, { duration: 3 });
-
-// common config options shown with default values
-el.frame("C3DAF9", 1, {
- duration: 1 //duration of entire animation (not each individual ripple)
- // Note: Easing is not configurable and will be ignored if included
-});
-</code></pre>
- * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9').
- * @param {Number} count (optional) The number of ripples to display (defaults to 1)
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">frame </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">count</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"#C3DAF9"</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">color.length </span><span class="jsdoc-syntax">== 6){
- </span><span class="jsdoc-var">color </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"#" </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">color</span><span class="jsdoc-syntax">;
- }
- </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">|| 1;
- </span><span class="jsdoc-var">duration </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.duration </span><span class="jsdoc-syntax">|| 1;
- </span><span class="jsdoc-var">this.show</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">b </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getBox</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">animFn </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">proxy </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.createProxy</span><span class="jsdoc-syntax">({
-
- </span><span class="jsdoc-var">style</span><span class="jsdoc-syntax">:{
- </span><span class="jsdoc-var">visbility</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">position</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"absolute"</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">"z-index"</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"35000"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-comment">// yee haw
- </span><span class="jsdoc-var">border</span><span class="jsdoc-syntax">:</span><span class="jsdoc-string">"0px solid " </span><span class="jsdoc-syntax">+ </span><span class="jsdoc-var">color
- </span><span class="jsdoc-syntax">}
- });
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.isBorderBox </span><span class="jsdoc-syntax">? 2 : 1;
- </span><span class="jsdoc-var">proxy.animate</span><span class="jsdoc-syntax">({
- </span><span class="jsdoc-var">top</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.y </span><span class="jsdoc-syntax">- 20},
- </span><span class="jsdoc-var">left</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.x </span><span class="jsdoc-syntax">- 20},
- </span><span class="jsdoc-var">borderWidth</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:0, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:10},
- </span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:1, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:0},
- </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:(</span><span class="jsdoc-var">b.height </span><span class="jsdoc-syntax">+ (20*</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">))},
- </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">from</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">b.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:(</span><span class="jsdoc-var">b.width </span><span class="jsdoc-syntax">+ (20*</span><span class="jsdoc-var">scale</span><span class="jsdoc-syntax">))}
- }, </span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">proxy.remove</span><span class="jsdoc-syntax">();
- });
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(--</span><span class="jsdoc-var">count </span><span class="jsdoc-syntax">> 0){
- </span><span class="jsdoc-var">animFn.defer</span><span class="jsdoc-syntax">((</span><span class="jsdoc-var">duration</span><span class="jsdoc-syntax">/2)*1000, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- }
- };
- </span><span class="jsdoc-var">animFn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Creates a pause before any subsequent queued effects begin. If there are
- * no effects queued after the pause it will have no effect.
- * Usage:
-<pre><code>
-el.pause(1);
-</code></pre>
- * @param {Number} seconds The length of time to pause (in seconds)
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">pause </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">seconds</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">setTimeout</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- }, </span><span class="jsdoc-var">seconds </span><span class="jsdoc-syntax">* 1000);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Fade an element in (from transparent to opaque). The ending opacity can be specified
- * using the "endOpacity" config option.
- * Usage:
-<pre><code>
-// default: fade in from opacity 0 to 100%
-el.fadeIn();
-
-// custom: fade in from opacity 0 to 75% over 2 seconds
-el.fadeIn({ endOpacity: .75, duration: 2});
-
-// common config options shown with default values
-el.fadeIn({
- endOpacity: 1, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5
-});
-</code></pre>
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">fadeIn </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.setOpacity</span><span class="jsdoc-syntax">(0);
- </span><span class="jsdoc-var">this.fixDisplay</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">'visible'</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.endOpacity </span><span class="jsdoc-syntax">|| 1;
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">}},
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">to </span><span class="jsdoc-syntax">== 1){
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- }
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- });
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Fade an element out (from opaque to transparent). The ending opacity can be specified
- * using the "endOpacity" config option.
- * Usage:
-<pre><code>
-// default: fade out from the element's current opacity to 0
-el.fadeOut();
-
-// custom: fade out from the element's current opacity to 25% over 2 seconds
-el.fadeOut({ endOpacity: .25, duration: 2});
-
-// common config options shown with default values
-el.fadeOut({
- endOpacity: 0, //can be any value between 0 and 1 (e.g. .5)
- easing: 'easeOut',
- duration: .5
- remove: false,
- useDisplay: false
-});
-</code></pre>
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">fadeOut </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">({</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">:{</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">:</span><span class="jsdoc-var">o.endOpacity </span><span class="jsdoc-syntax">|| 0}},
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">null</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.visibilityMode </span><span class="jsdoc-syntax">== </span><span class="jsdoc-var">Roo.Element.DISPLAY </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.dom.style.display </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"none"</span><span class="jsdoc-syntax">;
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">this.dom.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-string">"hidden"</span><span class="jsdoc-syntax">;
- }
- </span><span class="jsdoc-var">this.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- });
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Animates the transition of an element's dimensions from a starting height/width
- * to an ending height/width.
- * Usage:
-<pre><code>
-// change height and width to 100x100 pixels
-el.scale(100, 100);
-
-// common config options shown with default values. The height and width will default to
-// the element's existing values if passed as null.
-el.scale(
- [element's width],
- [element's height], {
- easing: 'easeOut',
- duration: .35
-});
-</code></pre>
- * @param {Number} width The new width (pass undefined to keep the original width)
- * @param {Number} height The new height (pass undefined to keep the original height)
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">scale </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.shift</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">({}, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, {
- </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">height</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">h
- </span><span class="jsdoc-syntax">}));
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
- * Any of these properties not specified in the config object will not be changed. This effect
- * requires that at least one new dimension, position or opacity setting must be passed in on
- * the config object in order for the function to have any effect.
- * Usage:
-<pre><code>
-// slide the element horizontally to x position 200 while changing the height and opacity
-el.shift({ x: 200, height: 50, opacity: .8 });
-
-// common config options shown with default values.
-el.shift({
- width: [element's width],
- height: [element's height],
- x: [element's x position],
- y: [element's y position],
- opacity: [element's opacity],
- easing: 'easeOut',
- duration: .35
-});
-</code></pre>
- * @param {Object} options Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">shift </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {}, </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.height</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.x</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.y</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.opacity</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">a.width </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustWidth</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">)};
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">a.height </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.adjustHeight</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">)};
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">a.points </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: [
- </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">x </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getX</span><span class="jsdoc-syntax">(),
- </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined </span><span class="jsdoc-syntax">? </span><span class="jsdoc-var">y </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getY</span><span class="jsdoc-syntax">()
- ]};
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">op </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">a.opacity </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">op</span><span class="jsdoc-syntax">};
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.xy </span><span class="jsdoc-syntax">!== </span><span class="jsdoc-var">undefined</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">a.points </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">o.xy</span><span class="jsdoc-syntax">};
- }
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">.35</span><span class="jsdoc-syntax">, </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- });
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Slides the element while fading it out of view. An anchor point can be optionally passed to set the
- * ending point of the effect.
- * Usage:
- *<pre><code>
-// default: slide the element downward while fading out
-el.ghost();
-
-// custom: slide the element out to the right with a 2-second duration
-el.ghost('r', { duration: 2 });
-
-// common config options shown with default values
-el.ghost('b', {
- easing: 'easeOut',
- duration: .5
- remove: false,
- useDisplay: false
-});
-</code></pre>
- * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b')
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">ghost </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">el </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxEl</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o </span><span class="jsdoc-syntax">|| {};
-
- </span><span class="jsdoc-var">el.queueFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anchor </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">"b"</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-comment">// restore values after effect
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">r </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getFxRestore</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">w </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getWidth</span><span class="jsdoc-syntax">(),
- </span><span class="jsdoc-var">h </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getHeight</span><span class="jsdoc-syntax">();
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">after </span><span class="jsdoc-syntax">= </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.useDisplay</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">el.setDisplayed</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">);
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">el.hide</span><span class="jsdoc-syntax">();
- }
-
- </span><span class="jsdoc-var">el.clearOpacity</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">el.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">r.pos</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">st.width </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.width</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">st.height </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">r.height</span><span class="jsdoc-syntax">;
-
- </span><span class="jsdoc-var">el.afterFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- };
-
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">a </span><span class="jsdoc-syntax">= {</span><span class="jsdoc-var">opacity</span><span class="jsdoc-syntax">: {</span><span class="jsdoc-var">to</span><span class="jsdoc-syntax">: 0}, </span><span class="jsdoc-var">points</span><span class="jsdoc-syntax">: {}}, </span><span class="jsdoc-var">pt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">a.points</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">switch</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">anchor.toLowerCase</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"t"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"l"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"r"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, 0];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"b"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [0, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"bl"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [-</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"br"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">case </span><span class="jsdoc-string">"tr"</span><span class="jsdoc-syntax">:
- </span><span class="jsdoc-var">pt.by </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">w</span><span class="jsdoc-syntax">, -</span><span class="jsdoc-var">h</span><span class="jsdoc-syntax">];
- </span><span class="jsdoc-keyword">break</span><span class="jsdoc-syntax">;
- }
-
- </span><span class="jsdoc-var">arguments.callee.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxanim</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">a</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">'motion'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">.5</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-string">"easeOut"</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">after</span><span class="jsdoc-syntax">);
- });
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Ensures that all effects queued after syncFx is called on the element are
- * run concurrently. This is the opposite of {@link #sequenceFx}.
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">syncFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">|| {}, {
- </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
- </span><span class="jsdoc-syntax">});
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Ensures that all effects queued after sequenceFx is called on the element are
- * run in sequence. This is the opposite of {@link #syncFx}.
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">sequenceFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.fxDefaults </span><span class="jsdoc-syntax">|| {}, {
- </span><span class="jsdoc-var">block </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">concurrent </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">false
- </span><span class="jsdoc-syntax">});
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">nextFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">ef </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">ef</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">ef.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- }
- },
-
- </span><span class="jsdoc-comment">/**
- * Returns true if the element has any effects actively running or queued, else returns false.
- * @return {Boolean} True if element has active effects, else false
- */
- </span><span class="jsdoc-var">hasActiveFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
- },
-
- </span><span class="jsdoc-comment">/**
- * Stops any running effects and clears the element's internal effects queue if it contains
- * any additional effects that haven't started yet.
- * @return {Roo.Element} The Element
- */
- </span><span class="jsdoc-var">stopFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasActiveFx</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">[0];
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cur </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">cur.anim </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">cur.anim.isAnimated</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">= [</span><span class="jsdoc-var">cur</span><span class="jsdoc-syntax">]; </span><span class="jsdoc-comment">// clear out others
- </span><span class="jsdoc-var">cur.anim.stop</span><span class="jsdoc-syntax">(</span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">);
- }
- }
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">beforeFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.hasActiveFx</span><span class="jsdoc-syntax">() && !</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.stopFx</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.stopFx</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
- }
- </span><span class="jsdoc-keyword">return false</span><span class="jsdoc-syntax">;
- }
- </span><span class="jsdoc-keyword">return true</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/**
- * Returns true if the element is currently blocking so that no other effect can be queued
- * until this effect is finished, else returns false if blocking is not set. This is commonly
- * used to ensure that an effect initiated by a user action runs to completion prior to the
- * same effect being restarted (e.g., firing only one effect even if the user clicks several times).
- * @return {Boolean} True if blocking, else false
- */
- </span><span class="jsdoc-var">hasFxBlock </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">q </span><span class="jsdoc-syntax">&& </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">[0] && </span><span class="jsdoc-var">q</span><span class="jsdoc-syntax">[0]</span><span class="jsdoc-var">.block</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">queueFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.fxQueue</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.fxQueue </span><span class="jsdoc-syntax">= [];
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">this.hasFxBlock</span><span class="jsdoc-syntax">()){
- </span><span class="jsdoc-var">Roo.applyIf</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.fxDefaults</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">run </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.beforeFx</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">fn.block </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">o.block</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">this.fxQueue.push</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">fn</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">run</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
- }
- }</span><span class="jsdoc-keyword">else</span><span class="jsdoc-syntax">{
- </span><span class="jsdoc-var">fn.call</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- }
- }
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">fxWrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.wrap </span><span class="jsdoc-syntax">|| !(</span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.wrap</span><span class="jsdoc-syntax">))){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.fixPosition</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">wrapXY </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.getXY</span><span class="jsdoc-syntax">();
- }
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">div </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">document.createElement</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"div"</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">div.style.visibility </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">vis</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">wrap </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">div</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">));
- </span><span class="jsdoc-var">wrap.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap.getStyle</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"position"</span><span class="jsdoc-syntax">) == </span><span class="jsdoc-string">"static"</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">wrap.position</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">"relative"</span><span class="jsdoc-syntax">);
- }
- </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-string">'auto'</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">wrap.clip</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">wrap.dom.appendChild</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">wrap.setXY</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrapXY</span><span class="jsdoc-syntax">);
- }
- }
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">;
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">fxUnwrap </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">wrap</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.clearPositioning</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.setPositioning</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.wrap</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">wrap.dom.parentNode.insertBefore</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">wrap.dom</span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">wrap.remove</span><span class="jsdoc-syntax">();
- }
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">getFxRestore </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">st </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">this.dom.style</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-syntax">{</span><span class="jsdoc-var">pos</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">this.getPositioning</span><span class="jsdoc-syntax">(), </span><span class="jsdoc-var">width</span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">st.width</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">height </span><span class="jsdoc-syntax">: </span><span class="jsdoc-var">st.height</span><span class="jsdoc-syntax">};
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">afterFx </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.applyStyles</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterStyle</span><span class="jsdoc-syntax">);
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.addClass</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.afterCls</span><span class="jsdoc-syntax">);
- }
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.remove </span><span class="jsdoc-syntax">=== </span><span class="jsdoc-keyword">true</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.remove</span><span class="jsdoc-syntax">();
- }
- </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">o.callback</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">o.scope</span><span class="jsdoc-syntax">, [</span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">]);
- </span><span class="jsdoc-keyword">if</span><span class="jsdoc-syntax">(!</span><span class="jsdoc-var">o.concurrent</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">this.fxQueue.shift</span><span class="jsdoc-syntax">();
- </span><span class="jsdoc-var">this.nextFx</span><span class="jsdoc-syntax">();
- }
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">getFxEl </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){ </span><span class="jsdoc-comment">// support for composite element fx
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">Roo.get</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">);
- },
-
- </span><span class="jsdoc-comment">/* @private */
- </span><span class="jsdoc-var">fxanim </span><span class="jsdoc-syntax">: </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">opt</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">){
- </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">animType </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-string">'run'</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">opt </span><span class="jsdoc-syntax">|| {};
- </span><span class="jsdoc-keyword">var </span><span class="jsdoc-var">anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.lib.Anim</span><span class="jsdoc-syntax">[</span><span class="jsdoc-var">animType</span><span class="jsdoc-syntax">](
- </span><span class="jsdoc-var">this.dom</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">args</span><span class="jsdoc-syntax">,
- (</span><span class="jsdoc-var">opt.duration </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultDur</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-var">.35</span><span class="jsdoc-syntax">,
- (</span><span class="jsdoc-var">opt.easing </span><span class="jsdoc-syntax">|| </span><span class="jsdoc-var">defaultEase</span><span class="jsdoc-syntax">) || </span><span class="jsdoc-string">'easeOut'</span><span class="jsdoc-syntax">,
- </span><span class="jsdoc-keyword">function</span><span class="jsdoc-syntax">(){
- </span><span class="jsdoc-var">Roo.callback</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">cb</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">this</span><span class="jsdoc-syntax">);
- },
- </span><span class="jsdoc-var">this
- </span><span class="jsdoc-syntax">);
- </span><span class="jsdoc-var">opt.anim </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
- </span><span class="jsdoc-keyword">return </span><span class="jsdoc-var">anim</span><span class="jsdoc-syntax">;
- }
-};
-
-</span><span class="jsdoc-comment">// backwords compat
-</span><span class="jsdoc-var">Roo.Fx.resize </span><span class="jsdoc-syntax">= </span><span class="jsdoc-var">Roo.Fx.scale</span><span class="jsdoc-syntax">;
-
-</span><span class="jsdoc-comment">//When included, Roo.Fx is automatically applied to Element so that all basic
-//effects are available directly via the Element API
-</span><span class="jsdoc-var">Roo.apply</span><span class="jsdoc-syntax">(</span><span class="jsdoc-var">Roo.Element.prototype</span><span class="jsdoc-syntax">, </span><span class="jsdoc-var">Roo.Fx</span><span class="jsdoc-syntax">);</span></code></body></html>
\ No newline at end of file