994 lines
No EOL
38 KiB
HTML
994 lines
No EOL
38 KiB
HTML
<html><head><title>Fx.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>Fx.js</h1><pre class="highlighted"><code>
|
|
<i>//Notifies Element that fx methods are available</i>
|
|
Ext.enableFx = true;
|
|
|
|
<i>/**
|
|
* @class Ext.Fx
|
|
* <p>A class to provide basic animation and visual effects support. <b>Note:</b> 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 <b>in</b> Element, Ext.Fx <b>must</b> be included <b>in</b> order <b>for</b> 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" <b>in</b> that
|
|
* they <b>return</b> the Element object itself as the method <b>return</b> value, it is not always possible to mix the two <b>in</b> 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 <b>this</b> reason,
|
|
* <b>while</b> it may be possible to mix certain Fx and non-Fx method calls <b>in</b> a single chain, it may not always provide the
|
|
* expected results and should be done <b>with</b> 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 <b>in</b> the Config Options section
|
|
* below are common options that can be passed to any Fx method.</b>
|
|
* @cfg {Function} callback A <b>function</b> called when the effect is finished
|
|
* @cfg {Object} scope The scope of the effect <b>function</b>
|
|
* @cfg {String} easing A valid Easing value <b>for</b> the effect
|
|
* @cfg {String} afterCls A css class to apply after the effect
|
|
* @cfg {Number} duration The length of time (<b>in</b> 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 style attribute instead of visibility when hiding Elements (only applies to
|
|
* effects that end <b>with</b> the element being visually hidden, ignored otherwise)
|
|
* @cfg {String/Object/Function} afterStyle A style specification string eg "width:100px", or object <b>in</b> the form {width:"100px"}, or
|
|
* a <b>function</b> 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 <b>while</b> 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 <b>in</b> sequence
|
|
* @cfg {Boolean} stopFx Whether subsequent effects should be stopped and removed after the current effect finishes
|
|
*/</i>
|
|
Ext.Fx = {
|
|
<i>/**
|
|
* Slides the element into view. An anchor point can be optionally passed to set the point of
|
|
* origin <b>for</b> the slide effect. This <b>function</b> automatically handles wrapping the element <b>with</b>
|
|
* a fixed-size container <b>if</b> needed. See the Fx class overview <b>for</b> valid anchor point options.
|
|
* Usage:
|
|
*<pre><code>
|
|
<i>// <b>default</b>: slide the element <b>in</b> from the top</i>
|
|
el.slideIn();
|
|
|
|
<i>// custom: slide the element <b>in</b> from the right <b>with</b> a 2-second duration</i>
|
|
el.slideIn('r', { duration: 2 });
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.slideIn('t', {<br/>
|
|
easing: 'easeOut', <br/>
|
|
duration: .5<br/>
|
|
});
|
|
</code></pre>
|
|
* @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't')
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
slideIn : <b>function</b>(anchor, o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
|
|
anchor = anchor || "t";
|
|
|
|
<i>// fix display to visibility</i>
|
|
<b>this</b>.fixDisplay();
|
|
|
|
<i>// restore values after effect</i>
|
|
<b>var</b> r = <b>this</b>.getFxRestore();
|
|
<b>var</b> b = <b>this</b>.getBox();
|
|
<i>// fixed size <b>for</b> slide</i>
|
|
<b>this</b>.setSize(b);
|
|
|
|
<i>// wrap <b>if</b> needed</i>
|
|
<b>var</b> wrap = <b>this</b>.fxWrap(r.pos, o, "hidden");
|
|
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
st.visibility = "visible";
|
|
st.position = "absolute";
|
|
|
|
<i>// clear out temp styles after slide and unwrap</i>
|
|
<b>var</b> after = <b>function</b>(){
|
|
el.fxUnwrap(wrap, r.pos, o);
|
|
st.width = r.width;
|
|
st.height = r.height;
|
|
el.afterFx(o);
|
|
};
|
|
<i>// time to calc the positions</i>
|
|
<b>var</b> a, pt = {to: [b.x, b.y]}, bw = {to: b.width}, bh = {to: b.height};
|
|
|
|
<b>switch</b>(anchor.toLowerCase()){
|
|
<b>case</b> "t":
|
|
wrap.setSize(b.width, 0);
|
|
st.left = st.bottom = "0";
|
|
a = {height: bh};
|
|
<b>break</b>;
|
|
<b>case</b> "l":
|
|
wrap.setSize(0, b.height);
|
|
st.right = st.top = "0";
|
|
a = {width: bw};
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
wrap.setSize(0, b.height);
|
|
wrap.setX(b.right);
|
|
st.left = st.top = "0";
|
|
a = {width: bw, points: pt};
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
wrap.setSize(b.width, 0);
|
|
wrap.setY(b.bottom);
|
|
st.left = st.top = "0";
|
|
a = {height: bh, points: pt};
|
|
<b>break</b>;
|
|
<b>case</b> "tl":
|
|
wrap.setSize(0, 0);
|
|
st.right = st.bottom = "0";
|
|
a = {width: bw, height: bh};
|
|
<b>break</b>;
|
|
<b>case</b> "bl":
|
|
wrap.setSize(0, 0);
|
|
wrap.setY(b.y+b.height);
|
|
st.right = st.top = "0";
|
|
a = {width: bw, height: bh, points: pt};
|
|
<b>break</b>;
|
|
<b>case</b> "br":
|
|
wrap.setSize(0, 0);
|
|
wrap.setXY([b.right, b.bottom]);
|
|
st.left = st.top = "0";
|
|
a = {width: bw, height: bh, points: pt};
|
|
<b>break</b>;
|
|
<b>case</b> "tr":
|
|
wrap.setSize(0, 0);
|
|
wrap.setX(b.x+b.width);
|
|
st.left = st.bottom = "0";
|
|
a = {width: bw, height: bh, points: pt};
|
|
<b>break</b>;
|
|
}
|
|
<b>this</b>.dom.style.visibility = "visible";
|
|
wrap.show();
|
|
|
|
arguments.callee.anim = wrap.fxanim(a,
|
|
o,
|
|
'motion',
|
|
.5,
|
|
'easeOut', after);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Slides the element out of view. An anchor point can be optionally passed to set the end point
|
|
* <b>for</b> the slide effect. When the effect is completed, the element will be hidden (visibility =
|
|
* 'hidden') but block elements will still take up space <b>in</b> the document. The element must be removed
|
|
* from the DOM using the 'remove' config option <b>if</b> desired. This <b>function</b> automatically handles
|
|
* wrapping the element <b>with</b> a fixed-size container <b>if</b> needed. See the Fx class overview <b>for</b> valid anchor point options.
|
|
* Usage:
|
|
*<pre><code>
|
|
<i>// <b>default</b>: slide the element out to the top</i>
|
|
el.slideOut();
|
|
|
|
<i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
|
|
el.slideOut('r', { duration: 2 });
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.slideOut('t', {<br/>
|
|
easing: 'easeOut', <br/>
|
|
duration: .5,<br/>
|
|
remove: false,<br />
|
|
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 <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
slideOut : <b>function</b>(anchor, o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
|
|
anchor = anchor || "t";
|
|
|
|
<i>// restore values after effect</i>
|
|
<b>var</b> r = <b>this</b>.getFxRestore();
|
|
|
|
<b>var</b> b = <b>this</b>.getBox();
|
|
<i>// fixed size <b>for</b> slide</i>
|
|
<b>this</b>.setSize(b);
|
|
|
|
<i>// wrap <b>if</b> needed</i>
|
|
<b>var</b> wrap = <b>this</b>.fxWrap(r.pos, o, "visible");
|
|
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
st.visibility = "visible";
|
|
st.position = "absolute";
|
|
|
|
wrap.setSize(b);
|
|
|
|
<b>var</b> after = <b>function</b>(){
|
|
<b>if</b>(o.useDisplay){
|
|
el.setDisplayed(false);
|
|
}<b>else</b>{
|
|
el.hide();
|
|
}
|
|
|
|
el.fxUnwrap(wrap, r.pos, o);
|
|
|
|
st.width = r.width;
|
|
st.height = r.height;
|
|
|
|
el.afterFx(o);
|
|
};
|
|
|
|
<b>var</b> a, zero = {to: 0};
|
|
<b>switch</b>(anchor.toLowerCase()){
|
|
<b>case</b> "t":
|
|
st.left = st.bottom = "0";
|
|
a = {height: zero};
|
|
<b>break</b>;
|
|
<b>case</b> "l":
|
|
st.right = st.top = "0";
|
|
a = {width: zero};
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
st.left = st.top = "0";
|
|
a = {width: zero, points: {to:[b.right, b.y]}};
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
st.left = st.top = "0";
|
|
a = {height: zero, points: {to:[b.x, b.bottom]}};
|
|
<b>break</b>;
|
|
<b>case</b> "tl":
|
|
st.right = st.bottom = "0";
|
|
a = {width: zero, height: zero};
|
|
<b>break</b>;
|
|
<b>case</b> "bl":
|
|
st.right = st.top = "0";
|
|
a = {width: zero, height: zero, points: {to:[b.x, b.bottom]}};
|
|
<b>break</b>;
|
|
<b>case</b> "br":
|
|
st.left = st.top = "0";
|
|
a = {width: zero, height: zero, points: {to:[b.x+b.width, b.bottom]}};
|
|
<b>break</b>;
|
|
<b>case</b> "tr":
|
|
st.left = st.bottom = "0";
|
|
a = {width: zero, height: zero, points: {to:[b.right, b.y]}};
|
|
<b>break</b>;
|
|
}
|
|
|
|
arguments.callee.anim = wrap.fxanim(a,
|
|
o,
|
|
'motion',
|
|
.5,
|
|
"easeOut", after);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Fades the element out <b>while</b> slowly expanding it <b>in</b> all directions. When the effect is completed, the
|
|
* element will be hidden (visibility = 'hidden') but block elements will still take up space <b>in</b> the document.
|
|
* The element must be removed from the DOM using the 'remove' config option <b>if</b> desired.
|
|
* Usage:
|
|
*<pre><code>
|
|
<i>// <b>default</b></i>
|
|
el.puff();
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.puff({<br/>
|
|
easing: 'easeOut', <br/>
|
|
duration: .5,<br/>
|
|
remove: false,<br />
|
|
useDisplay: false
|
|
});
|
|
</code></pre>
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
puff : <b>function</b>(o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
<b>this</b>.clearOpacity();
|
|
<b>this</b>.show();
|
|
|
|
<i>// restore values after effect</i>
|
|
<b>var</b> r = <b>this</b>.getFxRestore();
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
|
|
<b>var</b> after = <b>function</b>(){
|
|
<b>if</b>(o.useDisplay){
|
|
el.setDisplayed(false);
|
|
}<b>else</b>{
|
|
el.hide();
|
|
}
|
|
|
|
el.clearOpacity();
|
|
|
|
el.setPositioning(r.pos);
|
|
st.width = r.width;
|
|
st.height = r.height;
|
|
st.fontSize = '';
|
|
el.afterFx(o);
|
|
};
|
|
|
|
<b>var</b> width = <b>this</b>.getWidth();
|
|
<b>var</b> height = <b>this</b>.getHeight();
|
|
|
|
arguments.callee.anim = <b>this</b>.fxanim({
|
|
width : {to: <b>this</b>.adjustWidth(width * 2)},
|
|
height : {to: <b>this</b>.adjustHeight(height * 2)},
|
|
points : {by: [-(width * .5), -(height * .5)]},
|
|
opacity : {to: 0},
|
|
fontSize: {to:200, unit: "%"}
|
|
},
|
|
o,
|
|
'motion',
|
|
.5,
|
|
"easeOut", after);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Blinks the element as <b>if</b> 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 <b>in</b> the document. The element must be removed from the using the 'remove' config option <b>if</b> desired.
|
|
* Usage:
|
|
*<pre><code>
|
|
<i>// <b>default</b></i>
|
|
el.switchOff();
|
|
|
|
<i>// all config options shown <b>with</b> default values</i>
|
|
el.switchOff({<br/>
|
|
easing: 'easeIn', <br/>
|
|
duration: .3,<br/>
|
|
remove: false,<br />
|
|
useDisplay: false
|
|
});
|
|
</code></pre>
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
switchOff : <b>function</b>(o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
<b>this</b>.clearOpacity();
|
|
<b>this</b>.clip();
|
|
|
|
<i>// restore values after effect</i>
|
|
<b>var</b> r = <b>this</b>.getFxRestore();
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
|
|
<b>var</b> after = <b>function</b>(){
|
|
<b>if</b>(o.useDisplay){
|
|
el.setDisplayed(false);
|
|
}<b>else</b>{
|
|
el.hide();
|
|
}
|
|
|
|
el.clearOpacity();
|
|
el.setPositioning(r.pos);
|
|
st.width = r.width;
|
|
st.height = r.height;
|
|
|
|
el.afterFx(o);
|
|
};
|
|
|
|
<b>this</b>.fxanim({opacity:{to:0.3}}, null, null, .1, null, <b>function</b>(){
|
|
<b>this</b>.clearOpacity();
|
|
(<b>function</b>(){
|
|
<b>this</b>.fxanim({
|
|
height:{to:1},
|
|
points:{by:[0, <b>this</b>.getHeight() * .5]}
|
|
}, o, 'motion', 0.3, 'easeIn', after);
|
|
}).defer(100, <b>this</b>);
|
|
});
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Highlights the Element by setting a color (applies to the background-color by <b>default</b>, 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>
|
|
<i>// <b>default</b>: highlight background to yellow</i>
|
|
el.highlight();
|
|
|
|
<i>// custom: highlight foreground text to blue <b>for</b> 2 seconds</i>
|
|
el.highlight("0000ff", { attr: 'color', duration: 2 });
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.highlight("ffff9c", {<br/>
|
|
attr: "background-color", <i>//can be any valid css attribute that supports a color value<br/></i>
|
|
endColor: (current color) or "ffffff",<br/>
|
|
easing: 'easeIn',<br/>
|
|
duration: 1<br/>
|
|
});
|
|
</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 <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
highlight : <b>function</b>(color, o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
color = color || "ffff9c";
|
|
attr = o.attr || "backgroundColor";
|
|
|
|
<b>this</b>.clearOpacity();
|
|
<b>this</b>.show();
|
|
|
|
<b>var</b> origColor = <b>this</b>.getColor(attr);
|
|
<b>var</b> restoreColor = <b>this</b>.dom.style[attr];
|
|
endColor = (o.endColor || origColor) || "ffffff";
|
|
|
|
<b>var</b> after = <b>function</b>(){
|
|
el.dom.style[attr] = restoreColor;
|
|
el.afterFx(o);
|
|
};
|
|
|
|
<b>var</b> a = {};
|
|
a[attr] = {from: color, to: endColor};
|
|
arguments.callee.anim = <b>this</b>.fxanim(a,
|
|
o,
|
|
'color',
|
|
1,
|
|
'easeIn', after);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Shows a ripple of exploding, attenuating borders to draw attention to an Element.
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// <b>default</b>: a single light blue ripple</i>
|
|
el.frame();
|
|
|
|
<i>// custom: 3 red ripples lasting 3 seconds total</i>
|
|
el.frame("ff0000", 3, { duration: 3 });
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.frame("C3DAF9", 1, {<br/>
|
|
duration: 1 <i>//duration of entire animation (not each individual ripple)<br/></i>
|
|
<i>// Note: Easing is not configurable and will be ignored <b>if</b> included</i>
|
|
});
|
|
</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 <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
frame : <b>function</b>(color, count, o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
color = color || "#C3DAF9";
|
|
<b>if</b>(color.length == 6){
|
|
color = "#" + color;
|
|
}
|
|
count = count || 1;
|
|
duration = o.duration || 1;
|
|
<b>this</b>.show();
|
|
|
|
<b>var</b> b = <b>this</b>.getBox();
|
|
<b>var</b> animFn = <b>function</b>(){
|
|
<b>var</b> proxy = <b>this</b>.createProxy({
|
|
tag:"div",
|
|
style:{
|
|
visbility:"hidden",
|
|
position:"absolute",
|
|
"z-index":"35000", <i>// yee haw</i>
|
|
border:"0px solid " + color
|
|
}
|
|
});
|
|
<b>var</b> 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, <b>function</b>(){
|
|
proxy.remove();
|
|
});
|
|
<b>if</b>(--count > 0){
|
|
animFn.defer((duration/2)*1000, <b>this</b>);
|
|
}<b>else</b>{
|
|
el.afterFx(o);
|
|
}
|
|
};
|
|
animFn.call(<b>this</b>);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Creates a pause before any subsequent queued effects begin. If there are
|
|
* no effects queued after the pause it will have no affect.
|
|
* Usage:
|
|
<pre><code>
|
|
el.pause(1);
|
|
</code></pre>
|
|
* @param {Number} seconds The length of time to pause (<b>in</b> seconds)
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
pause : <b>function</b>(seconds){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
<b>var</b> o = {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
setTimeout(<b>function</b>(){
|
|
el.afterFx(o);
|
|
}, seconds * 1000);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Fade an element <b>in</b> (from transparent to opaque). The ending opacity can be specified
|
|
* using the "endOpacity" config option.
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// <b>default</b>: fade <b>in</b> from opactiy 0 to 100%</i>
|
|
el.fadeIn();
|
|
|
|
<i>// custom: fade <b>in</b> from opcaity 0 to 75% over 2 seconds</i>
|
|
el.fadeIn({ endOpacity: .75, duration: 2});
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.fadeIn({<br/>
|
|
endOpacity: 1, <i>//can be any value between 0 and 1 (e.g. .5)<br/></i>
|
|
easing: 'easeOut',<br/>
|
|
duration: .5<br/>
|
|
});
|
|
</code></pre>
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
fadeIn : <b>function</b>(o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
el.queueFx(o, <b>function</b>(){
|
|
<b>this</b>.setOpacity(0);
|
|
<b>this</b>.fixDisplay();
|
|
<b>this</b>.dom.style.visibility = 'visible';
|
|
<b>var</b> to = o.endOpacity || 1;
|
|
arguments.callee.anim = <b>this</b>.fxanim({opacity:{to:to}},
|
|
o, null, .5, "easeOut", <b>function</b>(){
|
|
<b>if</b>(to == 1){
|
|
<b>this</b>.clearOpacity();
|
|
}
|
|
el.afterFx(o);
|
|
});
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Fade an element out (from opaque to transparent). The ending opacity can be specified
|
|
* using the "endOpacity" config option.
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// <b>default</b>: fade out from the element's current opacity to 0</i>
|
|
el.fadeOut();
|
|
|
|
<i>// custom: fade out from the element's current opacity to 25% over 2 seconds</i>
|
|
el.fadeOut({ endOpacity: .25, duration: 2});
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.fadeOut({<br/>
|
|
endOpacity: 0, <i>//can be any value between 0 and 1 (e.g. .5)<br/></i>
|
|
easing: 'easeOut',<br/>
|
|
duration: .5<br/>
|
|
remove: false,<br />
|
|
useDisplay: false
|
|
});
|
|
</code></pre>
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
fadeOut : <b>function</b>(o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
el.queueFx(o, <b>function</b>(){
|
|
arguments.callee.anim = <b>this</b>.fxanim({opacity:{to:o.endOpacity || 0}},
|
|
o, null, .5, "easeOut", <b>function</b>(){
|
|
<b>if</b>(this.visibilityMode == Ext.Element.DISPLAY || o.useDisplay){
|
|
<b>this</b>.dom.style.display = "none";
|
|
}<b>else</b>{
|
|
<b>this</b>.dom.style.visibility = "hidden";
|
|
}
|
|
<b>this</b>.clearOpacity();
|
|
el.afterFx(o);
|
|
});
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Animates the transition of an element's dimensions from a starting height/width
|
|
* to an ending height/width.
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// change height and width to 100x100 pixels</i>
|
|
el.scale(100, 100);
|
|
|
|
<i>// common config options shown <b>with</b> default values. The height and width will <b>default</b> to</i>
|
|
<i>// the element's existing values <b>if</b> passed as null.</i>
|
|
el.scale(
|
|
[element's width],<br/>
|
|
[element's height], {<br/>
|
|
easing: 'easeOut',<br/>
|
|
duration: .35<br/>
|
|
});
|
|
</code></pre>
|
|
* @param {Number} width The <b>new</b> width (pass null to keep the original width)
|
|
* @param {Number} height The <b>new</b> height (pass null to keep the original height)
|
|
* @param {Object} options (optional) Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
scale : <b>function</b>(w, h, o){
|
|
<b>this</b>.shift(Ext.apply({}, o, {
|
|
width: w,
|
|
height: h
|
|
}));
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Animates the transition of any combination of an element's dimensions, xy position and/or opacity.
|
|
* Any of these properties not specified <b>in</b> the config object will not be changed. This effect
|
|
* requires that at least one <b>new</b> dimension, position or opacity setting must be passed <b>in</b> on
|
|
* the config object <b>in</b> order <b>for</b> the <b>function</b> to have any affect.
|
|
* Usage:
|
|
<pre><code>
|
|
<i>// slide the element horizontally to x position 200 <b>while</b> changing the height and opacity</i>
|
|
el.shift({ x: 200, height: 50, opacity: .8 });
|
|
|
|
<i>// common config options shown <b>with</b> default values.</i>
|
|
el.shift({
|
|
width: [element's width],<br/>
|
|
height: [element's height],<br/>
|
|
x: [element's x position],<br/>
|
|
y: [element's y position],<br/>
|
|
opacity: [element's opacity],<br/>
|
|
easing: 'easeOut',<br/>
|
|
duration: .35<br/>
|
|
});
|
|
</code></pre>
|
|
* @param {Object} options Object literal <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
shift : <b>function</b>(o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
el.queueFx(o, <b>function</b>(){
|
|
<b>var</b> a = {}, w = o.width, h = o.height, x = o.x, y = o.y, op = o.opacity;
|
|
<b>if</b>(w !== undefined){
|
|
a.width = {to: <b>this</b>.adjustWidth(w)};
|
|
}
|
|
<b>if</b>(h !== undefined){
|
|
a.height = {to: <b>this</b>.adjustHeight(h)};
|
|
}
|
|
<b>if</b>(x !== undefined || y !== undefined){
|
|
a.points = {to: [
|
|
x !== undefined ? x : <b>this</b>.getX(),
|
|
y !== undefined ? y : <b>this</b>.getY()
|
|
]};
|
|
}
|
|
<b>if</b>(op !== undefined){
|
|
a.opacity = {to: op};
|
|
}
|
|
<b>if</b>(o.xy !== undefined){
|
|
a.points = {to: o.xy};
|
|
}
|
|
arguments.callee.anim = <b>this</b>.fxanim(a,
|
|
o, 'motion', .35, "easeOut", <b>function</b>(){
|
|
el.afterFx(o);
|
|
});
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Slides the element <b>while</b> fading it out of view. An anchor point can be optionally passed to set the
|
|
* ending point of the effect.
|
|
* Usage:
|
|
*<pre><code>
|
|
<i>// <b>default</b>: slide the element downward <b>while</b> fading out</i>
|
|
el.ghost();
|
|
|
|
<i>// custom: slide the element out to the right <b>with</b> a 2-second duration</i>
|
|
el.ghost('r', { duration: 2 });
|
|
|
|
<i>// common config options shown <b>with</b> default values</i>
|
|
el.ghost('b', {<br/>
|
|
easing: 'easeOut', <br/>
|
|
duration: .5<br/>
|
|
remove: false,<br />
|
|
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 <b>with</b> any of the Fx config options
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
ghost : <b>function</b>(anchor, o){
|
|
<b>var</b> el = <b>this</b>.getFxEl();
|
|
o = o || {};
|
|
|
|
el.queueFx(o, <b>function</b>(){
|
|
anchor = anchor || "b";
|
|
|
|
<i>// restore values after effect</i>
|
|
<b>var</b> r = <b>this</b>.getFxRestore();
|
|
<b>var</b> w = <b>this</b>.getWidth(),
|
|
h = <b>this</b>.getHeight();
|
|
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
|
|
<b>var</b> after = <b>function</b>(){
|
|
<b>if</b>(o.useDisplay){
|
|
el.setDisplayed(false);
|
|
}<b>else</b>{
|
|
el.hide();
|
|
}
|
|
|
|
el.clearOpacity();
|
|
el.setPositioning(r.pos);
|
|
st.width = r.width;
|
|
st.height = r.height;
|
|
|
|
el.afterFx(o);
|
|
};
|
|
|
|
<b>var</b> a = {opacity: {to: 0}, points: {}}, pt = a.points;
|
|
<b>switch</b>(anchor.toLowerCase()){
|
|
<b>case</b> "t":
|
|
pt.by = [0, -h];
|
|
<b>break</b>;
|
|
<b>case</b> "l":
|
|
pt.by = [-w, 0];
|
|
<b>break</b>;
|
|
<b>case</b> "r":
|
|
pt.by = [w, 0];
|
|
<b>break</b>;
|
|
<b>case</b> "b":
|
|
pt.by = [0, h];
|
|
<b>break</b>;
|
|
<b>case</b> "tl":
|
|
pt.by = [-w, -h];
|
|
<b>break</b>;
|
|
<b>case</b> "bl":
|
|
pt.by = [-w, h];
|
|
<b>break</b>;
|
|
<b>case</b> "br":
|
|
pt.by = [w, h];
|
|
<b>break</b>;
|
|
<b>case</b> "tr":
|
|
pt.by = [w, -h];
|
|
<b>break</b>;
|
|
}
|
|
|
|
arguments.callee.anim = <b>this</b>.fxanim(a,
|
|
o,
|
|
'motion',
|
|
.5,
|
|
"easeOut", after);
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Ensures that all effects queued after syncFx is called on the element are
|
|
* run concurrently. This is the opposite of {@link #sequenceFx}.
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
syncFx : <b>function</b>(){
|
|
<b>this</b>.fxDefaults = Ext.apply(<b>this</b>.fxDefaults || {}, {
|
|
block : false,
|
|
concurrent : true,
|
|
stopFx : false
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/**
|
|
* Ensures that all effects queued after sequenceFx is called on the element are
|
|
* run <b>in</b> sequence. This is the opposite of {@link #syncFx}.
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
sequenceFx : <b>function</b>(){
|
|
<b>this</b>.fxDefaults = Ext.apply(<b>this</b>.fxDefaults || {}, {
|
|
block : false,
|
|
concurrent : false,
|
|
stopFx : false
|
|
});
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
nextFx : <b>function</b>(){
|
|
<b>var</b> ef = <b>this</b>.fxQueue[0];
|
|
<b>if</b>(ef){
|
|
ef.call(<b>this</b>);
|
|
}
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> the element has any effects actively running or queued, <b>else</b> returns false.
|
|
* @<b>return</b> {Boolean} True <b>if</b> element has active effects, <b>else</b> false
|
|
*/</i>
|
|
hasActiveFx : <b>function</b>(){
|
|
<b>return</b> this.fxQueue && <b>this</b>.fxQueue[0];
|
|
},
|
|
|
|
<i>/**
|
|
* Stops any running effects and clears the element's internal effects queue <b>if</b> it contains
|
|
* any additional effects that haven't started yet.
|
|
* @<b>return</b> {Element} The Element
|
|
*/</i>
|
|
stopFx : <b>function</b>(){
|
|
<b>if</b>(this.hasActiveFx()){
|
|
<b>var</b> cur = <b>this</b>.fxQueue[0];
|
|
<b>if</b>(cur && cur.anim && cur.anim.isAnimated()){
|
|
<b>this</b>.fxQueue = [cur]; <i>// clear out others</i>
|
|
cur.anim.stop(true);
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
beforeFx : <b>function</b>(o){
|
|
<b>if</b>(this.hasActiveFx() && !o.concurrent){
|
|
<b>if</b>(o.stopFx){
|
|
<b>this</b>.stopFx();
|
|
<b>return</b> true;
|
|
}
|
|
<b>return</b> false;
|
|
}
|
|
<b>return</b> true;
|
|
},
|
|
|
|
<i>/**
|
|
* Returns true <b>if</b> the element is currently blocking so that no other effect can be queued
|
|
* until <b>this</b> effect is finished, <b>else</b> returns false <b>if</b> 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 <b>if</b> the user clicks several times).
|
|
* @<b>return</b> {Boolean} True <b>if</b> blocking, <b>else</b> false
|
|
*/</i>
|
|
hasFxBlock : <b>function</b>(){
|
|
<b>var</b> q = <b>this</b>.fxQueue;
|
|
<b>return</b> q && q[0] && q[0].block;
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
queueFx : <b>function</b>(o, fn){
|
|
<b>if</b>(!<b>this</b>.fxQueue){
|
|
<b>this</b>.fxQueue = [];
|
|
}
|
|
<b>if</b>(!<b>this</b>.hasFxBlock()){
|
|
Ext.applyIf(o, <b>this</b>.fxDefaults);
|
|
<b>if</b>(!o.concurrent){
|
|
<b>var</b> run = <b>this</b>.beforeFx(o);
|
|
fn.block = o.block;
|
|
<b>this</b>.fxQueue.push(fn);
|
|
<b>if</b>(run){
|
|
<b>this</b>.nextFx();
|
|
}
|
|
}<b>else</b>{
|
|
fn.call(<b>this</b>);
|
|
}
|
|
}
|
|
<b>return</b> this;
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
fxWrap : <b>function</b>(pos, o, vis){
|
|
<b>var</b> wrap;
|
|
<b>if</b>(!o.wrap || !(wrap = Ext.get(o.wrap))){
|
|
<b>var</b> wrapXY;
|
|
<b>if</b>(o.fixPosition){
|
|
wrapXY = <b>this</b>.getXY();
|
|
}
|
|
<b>var</b> div = document.createElement("div");
|
|
div.style.visibility = vis;
|
|
wrap = Ext.get(<b>this</b>.dom.parentNode.insertBefore(div, <b>this</b>.dom));
|
|
wrap.setPositioning(pos);
|
|
<b>if</b>(wrap.getStyle("position") == "static"){
|
|
wrap.position("relative");
|
|
}
|
|
<b>this</b>.clearPositioning('auto');
|
|
wrap.clip();
|
|
wrap.dom.appendChild(<b>this</b>.dom);
|
|
<b>if</b>(wrapXY){
|
|
wrap.setXY(wrapXY);
|
|
}
|
|
}
|
|
<b>return</b> wrap;
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
fxUnwrap : <b>function</b>(wrap, pos, o){
|
|
<b>this</b>.clearPositioning();
|
|
<b>this</b>.setPositioning(pos);
|
|
<b>if</b>(!o.wrap){
|
|
wrap.dom.parentNode.insertBefore(<b>this</b>.dom, wrap.dom);
|
|
wrap.remove();
|
|
}
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
getFxRestore : <b>function</b>(){
|
|
<b>var</b> st = <b>this</b>.dom.style;
|
|
<b>return</b> {pos: <b>this</b>.getPositioning(), width: st.width, height : st.height};
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
afterFx : <b>function</b>(o){
|
|
<b>if</b>(o.afterStyle){
|
|
<b>this</b>.applyStyles(o.afterStyle);
|
|
}
|
|
<b>if</b>(o.afterCls){
|
|
<b>this</b>.addClass(o.afterCls);
|
|
}
|
|
<b>if</b>(o.remove === true){
|
|
<b>this</b>.remove();
|
|
}
|
|
Ext.callback(o.callback, o.scope, [<b>this</b>]);
|
|
<b>if</b>(!o.concurrent){
|
|
<b>this</b>.fxQueue.shift();
|
|
<b>this</b>.nextFx();
|
|
}
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
getFxEl : <b>function</b>(){ <i>// support <b>for</b> composite element fx</i>
|
|
<b>return</b> Ext.get(<b>this</b>.dom);
|
|
},
|
|
|
|
<i>/* @private */</i>
|
|
fxanim : <b>function</b>(args, opt, animType, defaultDur, defaultEase, cb){
|
|
animType = animType || 'run';
|
|
opt = opt || {};
|
|
<b>var</b> anim = Ext.lib.Anim[animType](
|
|
<b>this</b>.dom, args,
|
|
(opt.duration || defaultDur) || .35,
|
|
(opt.easing || defaultEase) || 'easeOut',
|
|
<b>function</b>(){
|
|
Ext.callback(cb, <b>this</b>);
|
|
},
|
|
<b>this</b>
|
|
);
|
|
opt.anim = anim;
|
|
<b>return</b> anim;
|
|
}
|
|
};
|
|
|
|
<i>// backwords compat</i>
|
|
Ext.Fx.resize = Ext.Fx.scale;
|
|
|
|
<i>//When included, Ext.Fx is automatically applied to Element so that all basic</i>
|
|
<i>//effects are available directly via the Element API</i>
|
|
Ext.apply(Ext.Element.prototype, Ext.Fx);
|
|
</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright © 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
|
|
</body></html> |