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