X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/ee06f37b0f6f6d94cd05a6ffae556660f7c4a2bc..c930e9176a5a85509c5b0230e2bff5c22a591432:/source/core/Fx.js?ds=sidebyside diff --git a/source/core/Fx.js b/source/core/Fx.js deleted file mode 100644 index 708e9297..00000000 --- a/source/core/Fx.js +++ /dev/null @@ -1,1020 +0,0 @@ -/* - * Ext JS Library 2.2.1 - * Copyright(c) 2006-2009, Ext JS, LLC. - * licensing@extjs.com - * - * http://extjs.com/license - */ - - -//Notifies Element that fx methods are available -Ext.enableFx = true; - -/** - * @class Ext.Fx - *
A class to provide basic animation and visual effects support. Note: This class is automatically applied - * to the {@link Ext.Element} interface when included, so all effects calls should be performed via Element. - * Conversely, since the effects are not actually defined in Element, Ext.Fx must be included in order for the - * Element effects to work.
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.
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:
--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 -- * 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. - * - * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the - * Fx class, so do not need to use the callback parameter to specify another effect -- effects can simply be chained together - * and called in sequence (e.g., el.slideIn().highlight();). The callback is intended for any additional code that should - * run once a particular effect has completed. The Element being operated upon is passed as the first parameter. - * @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 display CSS property instead of visibility 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 - */ -Ext.Fx = { - /** - * 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: - *
-// 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
-});
-
- * @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 {Ext.Element} The Element
- */
- slideIn : function(anchor, o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
-
- anchor = anchor || "t";
-
- // fix display to visibility
- this.fixDisplay();
-
- // restore values after effect
- var r = this.getFxRestore();
- var b = this.getBox();
- // fixed size for slide
- this.setSize(b);
-
- // wrap if needed
- var wrap = this.fxWrap(r.pos, o, "hidden");
-
- var st = this.dom.style;
- st.visibility = "visible";
- st.position = "absolute";
-
- // clear out temp styles after slide and unwrap
- var after = function(){
- el.fxUnwrap(wrap, r.pos, o);
- st.width = r.width;
- st.height = r.height;
- el.afterFx(o);
- };
- // time to calc the positions
- var a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
-
- switch(anchor.toLowerCase()){
- case "t":
- wrap.setSize(b.width, 0);
- st.left = st.bottom = "0";
- a = {height: bh};
- break;
- case "l":
- wrap.setSize(0, b.height);
- st.right = st.top = "0";
- a = {width: bw};
- break;
- case "r":
- wrap.setSize(0, b.height);
- wrap.setX(b.right);
- st.left = st.top = "0";
- a = {width: bw, points: pt};
- break;
- case "b":
- wrap.setSize(b.width, 0);
- wrap.setY(b.bottom);
- st.left = st.top = "0";
- a = {height: bh, points: pt};
- break;
- case "tl":
- wrap.setSize(0, 0);
- st.right = st.bottom = "0";
- a = {width: bw, height: bh};
- break;
- case "bl":
- wrap.setSize(0, 0);
- wrap.setY(b.y+b.height);
- st.right = st.top = "0";
- a = {width: bw, height: bh, points: pt};
- break;
- case "br":
- wrap.setSize(0, 0);
- wrap.setXY([b.right, b.bottom]);
- st.left = st.top = "0";
- a = {width: bw, height: bh, points: pt};
- break;
- case "tr":
- wrap.setSize(0, 0);
- wrap.setX(b.x+b.width);
- st.left = st.bottom = "0";
- a = {width: bw, height: bh, points: pt};
- break;
- }
- this.dom.style.visibility = "visible";
- wrap.show();
-
- arguments.callee.anim = wrap.fxanim(a,
- o,
- 'motion',
- .5,
- 'easeOut', after);
- });
- return this;
- },
-
- /**
- * 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:
- *
-// 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
-});
-
- * @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 {Ext.Element} The Element
- */
- slideOut : function(anchor, o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
-
- anchor = anchor || "t";
-
- // restore values after effect
- var r = this.getFxRestore();
-
- var b = this.getBox();
- // fixed size for slide
- this.setSize(b);
-
- // wrap if needed
- var wrap = this.fxWrap(r.pos, o, "visible");
-
- var st = this.dom.style;
- st.visibility = "visible";
- st.position = "absolute";
-
- wrap.setSize(b);
-
- var after = function(){
- if(o.useDisplay){
- el.setDisplayed(false);
- }else{
- el.hide();
- }
-
- el.fxUnwrap(wrap, r.pos, o);
-
- st.width = r.width;
- st.height = r.height;
-
- el.afterFx(o);
- };
-
- var a, zero = {to: 0};
- switch(anchor.toLowerCase()){
- case "t":
- st.left = st.bottom = "0";
- a = {height: zero};
- break;
- case "l":
- st.right = st.top = "0";
- a = {width: zero};
- break;
- case "r":
- st.left = st.top = "0";
- a = {width: zero, points: {to:[b.right, b.y]}};
- break;
- case "b":
- st.left = st.top = "0";
- a = {height: zero, points: {to:[b.x, b.bottom]}};
- break;
- case "tl":
- st.right = st.bottom = "0";
- a = {width: zero, height: zero};
- break;
- case "bl":
- st.right = st.top = "0";
- a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
- break;
- case "br":
- st.left = st.top = "0";
- a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
- break;
- case "tr":
- st.left = st.bottom = "0";
- a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
- break;
- }
-
- arguments.callee.anim = wrap.fxanim(a,
- o,
- 'motion',
- .5,
- "easeOut", after);
- });
- return this;
- },
-
- /**
- * 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:
- *
-// default
-el.puff();
-
-// common config options shown with default values
-el.puff({
- easing: 'easeOut',
- duration: .5,
- remove: false,
- useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- puff : function(o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
- this.clearOpacity();
- this.show();
-
- // restore values after effect
- var r = this.getFxRestore();
- var st = this.dom.style;
-
- var after = function(){
- if(o.useDisplay){
- el.setDisplayed(false);
- }else{
- el.hide();
- }
-
- el.clearOpacity();
-
- el.setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
- st.fontSize = '';
- el.afterFx(o);
- };
-
- var width = this.getWidth();
- var height = this.getHeight();
-
- arguments.callee.anim = this.fxanim({
- width : {to: this.adjustWidth(width * 2)},
- height : {to: this.adjustHeight(height * 2)},
- points : {by: [-(width * .5), -(height * .5)]},
- opacity : {to: 0},
- fontSize: {to:200, unit: "%"}
- },
- o,
- 'motion',
- .5,
- "easeOut", after);
- });
- return this;
- },
-
- /**
- * 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:
- *
-// default
-el.switchOff();
-
-// all config options shown with default values
-el.switchOff({
- easing: 'easeIn',
- duration: .3,
- remove: false,
- useDisplay: false
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- switchOff : function(o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
- this.clearOpacity();
- this.clip();
-
- // restore values after effect
- var r = this.getFxRestore();
- var st = this.dom.style;
-
- var after = function(){
- if(o.useDisplay){
- el.setDisplayed(false);
- }else{
- el.hide();
- }
-
- el.clearOpacity();
- el.setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
-
- el.afterFx(o);
- };
-
- this.fxanim({opacity:{to:0.3}}, null, null, .1, null, function(){
- this.clearOpacity();
- (function(){
- this.fxanim({
- height:{to:1},
- points:{by:[0, this.getHeight() * .5]}
- }, o, 'motion', 0.3, 'easeIn', after);
- }).defer(100, this);
- });
- });
- return this;
- },
-
- /**
- * 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:
-
-// 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
-});
-
- * @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 {Ext.Element} The Element
- */
- highlight : function(color, o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
- color = color || "ffff9c";
- var attr = o.attr || "backgroundColor";
-
- this.clearOpacity();
- this.show();
-
- var origColor = this.getColor(attr);
- var restoreColor = this.dom.style[attr];
- var endColor = (o.endColor || origColor) || "ffffff";
-
- var after = function(){
- el.dom.style[attr] = restoreColor;
- el.afterFx(o);
- };
-
- var a = {};
- a[attr] = {from: color, to: endColor};
- arguments.callee.anim = this.fxanim(a,
- o,
- 'color',
- 1,
- 'easeIn', after);
- });
- return this;
- },
-
- /**
- * Shows a ripple of exploding, attenuating borders to draw attention to an Element.
- * Usage:
-
-// 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 each individual ripple.
- // Note: Easing is not configurable and will be ignored if included
-});
-
- * @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 {Ext.Element} The Element
- */
- frame : function(color, count, o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
- color = color || "#C3DAF9";
- if(color.length == 6){
- color = "#" + color;
- }
- count = count || 1;
- var duration = o.duration || 1;
- this.show();
-
- var b = this.getBox();
- var animFn = function(){
- var proxy = Ext.getBody().createChild({
- style:{
- visbility:"hidden",
- position:"absolute",
- "z-index":"35000", // yee haw
- border:"0px solid " + color
- }
- });
- var scale = Ext.isBorderBox ? 2 : 1;
- proxy.animate({
- top:{from:b.y, to:b.y - 20},
- left:{from:b.x, to:b.x - 20},
- borderWidth:{from:0, to:10},
- opacity:{from:1, to:0},
- height:{from:b.height, to:(b.height + (20*scale))},
- width:{from:b.width, to:(b.width + (20*scale))}
- }, duration, function(){
- proxy.remove();
- if(--count > 0){
- animFn();
- }else{
- el.afterFx(o);
- }
- });
- };
- animFn.call(this);
- });
- return this;
- },
-
- /**
- * Creates a pause before any subsequent queued effects begin. If there are
- * no effects queued after the pause it will have no effect.
- * Usage:
-
-el.pause(1);
-
- * @param {Number} seconds The length of time to pause (in seconds)
- * @return {Ext.Element} The Element
- */
- pause : function(seconds){
- var el = this.getFxEl();
- var o = {};
-
- el.queueFx(o, function(){
- setTimeout(function(){
- el.afterFx(o);
- }, seconds * 1000);
- });
- return this;
- },
-
- /**
- * Fade an element in (from transparent to opaque). The ending opacity can be specified
- * using the "endOpacity" config option.
- * Usage:
-
-// 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
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- fadeIn : function(o){
- var el = this.getFxEl();
- o = o || {};
- el.queueFx(o, function(){
- this.setOpacity(0);
- this.fixDisplay();
- this.dom.style.visibility = 'visible';
- var to = o.endOpacity || 1;
- arguments.callee.anim = this.fxanim({opacity:{to:to}},
- o, null, .5, "easeOut", function(){
- if(to == 1){
- this.clearOpacity();
- }
- el.afterFx(o);
- });
- });
- return this;
- },
-
- /**
- * Fade an element out (from opaque to transparent). The ending opacity can be specified
- * using the "endOpacity" config option. Note that IE may require useDisplay:true in order
- * to redisplay correctly.
- * Usage:
-
-// 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
-});
-
- * @param {Object} options (optional) Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- fadeOut : function(o){
- var el = this.getFxEl();
- o = o || {};
- el.queueFx(o, function(){
- var to = o.endOpacity || 0;
- arguments.callee.anim = this.fxanim({opacity:{to:to}},
- o, null, .5, "easeOut", function(){
- if(to === 0){
- if(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){
- this.dom.style.display = "none";
- }else{
- this.dom.style.visibility = "hidden";
- }
- this.clearOpacity();
- }
- el.afterFx(o);
- });
- });
- return this;
- },
-
- /**
- * Animates the transition of an element's dimensions from a starting height/width
- * to an ending height/width.
- * Usage:
-
-// 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
- }
-);
-
- * @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 {Ext.Element} The Element
- */
- scale : function(w, h, o){
- this.shift(Ext.apply({}, o, {
- width: w,
- height: h
- }));
- return this;
- },
-
- /**
- * 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:
-
-// 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
-});
-
- * @param {Object} options Object literal with any of the Fx config options
- * @return {Ext.Element} The Element
- */
- shift : function(o){
- var el = this.getFxEl();
- o = o || {};
- el.queueFx(o, function(){
- var a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity;
- if(w !== undefined){
- a.width = {to: this.adjustWidth(w)};
- }
- if(h !== undefined){
- a.height = {to: this.adjustHeight(h)};
- }
- if(o.left !== undefined){
- a.left = {to: o.left};
- }
- if(o.top !== undefined){
- a.top = {to: o.top};
- }
- if(o.right !== undefined){
- a.right = {to: o.right};
- }
- if(o.bottom !== undefined){
- a.bottom = {to: o.bottom};
- }
- if(x !== undefined || y !== undefined){
- a.points = {to: [
- x !== undefined ? x : this.getX(),
- y !== undefined ? y : this.getY()
- ]};
- }
- if(op !== undefined){
- a.opacity = {to: op};
- }
- if(o.xy !== undefined){
- a.points = {to: o.xy};
- }
- arguments.callee.anim = this.fxanim(a,
- o, 'motion', .35, "easeOut", function(){
- el.afterFx(o);
- });
- });
- return this;
- },
-
- /**
- * 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:
- *
-// 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
-});
-
- * @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 {Ext.Element} The Element
- */
- ghost : function(anchor, o){
- var el = this.getFxEl();
- o = o || {};
-
- el.queueFx(o, function(){
- anchor = anchor || "b";
-
- // restore values after effect
- var r = this.getFxRestore();
- var w = this.getWidth(),
- h = this.getHeight();
-
- var st = this.dom.style;
-
- var after = function(){
- if(o.useDisplay){
- el.setDisplayed(false);
- }else{
- el.hide();
- }
-
- el.clearOpacity();
- el.setPositioning(r.pos);
- st.width = r.width;
- st.height = r.height;
-
- el.afterFx(o);
- };
-
- var a = {opacity: {to: 0}, points: {}}, pt = a.points;
- switch(anchor.toLowerCase()){
- case "t":
- pt.by = [0, -h];
- break;
- case "l":
- pt.by = [-w, 0];
- break;
- case "r":
- pt.by = [w, 0];
- break;
- case "b":
- pt.by = [0, h];
- break;
- case "tl":
- pt.by = [-w, -h];
- break;
- case "bl":
- pt.by = [-w, h];
- break;
- case "br":
- pt.by = [w, h];
- break;
- case "tr":
- pt.by = [w, -h];
- break;
- }
-
- arguments.callee.anim = this.fxanim(a,
- o,
- 'motion',
- .5,
- "easeOut", after);
- });
- return this;
- },
-
- /**
- * Ensures that all effects queued after syncFx is called on the element are
- * run concurrently. This is the opposite of {@link #sequenceFx}.
- * @return {Ext.Element} The Element
- */
- syncFx : function(){
- this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
- block : false,
- concurrent : true,
- stopFx : false
- });
- return this;
- },
-
- /**
- * Ensures that all effects queued after sequenceFx is called on the element are
- * run in sequence. This is the opposite of {@link #syncFx}.
- * @return {Ext.Element} The Element
- */
- sequenceFx : function(){
- this.fxDefaults = Ext.apply(this.fxDefaults || {}, {
- block : false,
- concurrent : false,
- stopFx : false
- });
- return this;
- },
-
- /* @private */
- nextFx : function(){
- var ef = this.fxQueue[0];
- if(ef){
- ef.call(this);
- }
- },
-
- /**
- * 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
- */
- hasActiveFx : function(){
- return this.fxQueue && this.fxQueue[0];
- },
-
- /**
- * Stops any running effects and clears the element's internal effects queue if it contains
- * any additional effects that haven't started yet.
- * @return {Ext.Element} The Element
- */
- stopFx : function(){
- if(this.hasActiveFx()){
- var cur = this.fxQueue[0];
- if(cur && cur.anim && cur.anim.isAnimated()){
- this.fxQueue = [cur]; // clear out others
- cur.anim.stop(true);
- }
- }
- return this;
- },
-
- /* @private */
- beforeFx : function(o){
- if(this.hasActiveFx() && !o.concurrent){
- if(o.stopFx){
- this.stopFx();
- return true;
- }
- return false;
- }
- return true;
- },
-
- /**
- * 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
- */
- hasFxBlock : function(){
- var q = this.fxQueue;
- return q && q[0] && q[0].block;
- },
-
- /* @private */
- queueFx : function(o, fn){
- if(!this.fxQueue){
- this.fxQueue = [];
- }
- if(!this.hasFxBlock()){
- Ext.applyIf(o, this.fxDefaults);
- if(!o.concurrent){
- var run = this.beforeFx(o);
- fn.block = o.block;
- this.fxQueue.push(fn);
- if(run){
- this.nextFx();
- }
- }else{
- fn.call(this);
- }
- }
- return this;
- },
-
- /* @private */
- fxWrap : function(pos, o, vis){
- var wrap;
- if(!o.wrap || !(wrap = Ext.get(o.wrap))){
- var wrapXY;
- if(o.fixPosition){
- wrapXY = this.getXY();
- }
- var div = document.createElement("div");
- div.style.visibility = vis;
- wrap = Ext.get(this.dom.parentNode.insertBefore(div, this.dom));
- wrap.setPositioning(pos);
- if(wrap.getStyle("position") == "static"){
- wrap.position("relative");
- }
- this.clearPositioning('auto');
- wrap.clip();
- wrap.dom.appendChild(this.dom);
- if(wrapXY){
- wrap.setXY(wrapXY);
- }
- }
- return wrap;
- },
-
- /* @private */
- fxUnwrap : function(wrap, pos, o){
- this.clearPositioning();
- this.setPositioning(pos);
- if(!o.wrap){
- wrap.dom.parentNode.insertBefore(this.dom, wrap.dom);
- wrap.remove();
- }
- },
-
- /* @private */
- getFxRestore : function(){
- var st = this.dom.style;
- return {pos: this.getPositioning(), width: st.width, height : st.height};
- },
-
- /* @private */
- afterFx : function(o){
- if(o.afterStyle){
- this.applyStyles(o.afterStyle);
- }
- if(o.afterCls){
- this.addClass(o.afterCls);
- }
- if(o.remove === true){
- this.remove();
- }
- Ext.callback(o.callback, o.scope, [this]);
- if(!o.concurrent){
- this.fxQueue.shift();
- this.nextFx();
- }
- },
-
- /* @private */
- getFxEl : function(){ // support for composite element fx
- return Ext.get(this.dom);
- },
-
- /* @private */
- fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){
- animType = animType || 'run';
- opt = opt || {};
- var anim = Ext.lib.Anim[animType](
- this.dom, args,
- (opt.duration || defaultDur) || .35,
- (opt.easing || defaultEase) || 'easeOut',
- function(){
- Ext.callback(cb, this);
- },
- this
- );
- opt.anim = anim;
- return anim;
- }
-};
-
-// backwords compat
-Ext.Fx.resize = Ext.Fx.scale;
-
-//When included, Ext.Fx is automatically applied to Element so that all basic
-//effects are available directly via the Element API
-Ext.apply(Ext.Element.prototype, Ext.Fx);