--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js">(function(){\r
+ // contants\r
+ var NULL = null,\r
+ UNDEFINED = undefined,\r
+ TRUE = true,\r
+ FALSE = false,\r
+ SETX = "setX",\r
+ SETY = "setY",\r
+ SETXY = "setXY",\r
+ LEFT = "left",\r
+ BOTTOM = "bottom",\r
+ TOP = "top",\r
+ RIGHT = "right",\r
+ HEIGHT = "height",\r
+ WIDTH = "width",\r
+ POINTS = "points",\r
+ HIDDEN = "hidden",\r
+ ABSOLUTE = "absolute",\r
+ VISIBLE = "visible",\r
+ MOTION = "motion",\r
+ POSITION = "position",\r
+ EASEOUT = "easeOut",\r
+ /*\r
+ * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element\r
+ */\r
+ flyEl = new Ext.Element.Flyweight(),\r
+ queues = {},\r
+ getObject = function(o){\r
+ return o || {};\r
+ },\r
+ fly = function(dom){\r
+ flyEl.dom = dom;\r
+ flyEl.id = Ext.id(dom);\r
+ return flyEl;\r
+ },\r
+ /*\r
+ * Queueing now stored outside of the element due to closure issues\r
+ */\r
+ getQueue = function(id){\r
+ if(!queues[id]){\r
+ queues[id] = [];\r
+ }\r
+ return queues[id];\r
+ },\r
+ setQueue = function(id, value){\r
+ queues[id] = value;\r
+ };\r
+ \r
+//Notifies Element that fx methods are available\r
+Ext.enableFx = TRUE;\r
+\r
+<div id="cls-Ext.Fx"></div>/**\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 {@link Ext.Element}.\r
+ * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be\r
+ * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/>\r
+ * \r
+ * <p><b><u>Method Chaining</u></b></p>\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. Also see <tt>{@link #callback}</tt>.</p><br/>\r
+ *\r
+ * <p><b><u>Anchor Options for Motion Effects</u></b></p>\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>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options\r
+ * section below are common options that can be passed to any Fx method unless otherwise noted.</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 a callback is not required to specify another effect -- effects can simply be chained together\r
+ * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code>\r
+ * el.slideIn().highlight();\r
+ * </code></pre>\r
+ * The callback is intended for any additional code that should run once a particular effect has completed. The Element\r
+ * being operated upon is passed as the first parameter.\r
+ * \r
+ * @cfg {Object} scope The scope of the <tt>{@link #callback}</tt> function\r
+ * \r
+ * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul>\r
+ * <li><b><tt>backBoth</tt></b></li>\r
+ * <li><b><tt>backIn</tt></b></li>\r
+ * <li><b><tt>backOut</tt></b></li>\r
+ * <li><b><tt>bounceBoth</tt></b></li>\r
+ * <li><b><tt>bounceIn</tt></b></li>\r
+ * <li><b><tt>bounceOut</tt></b></li>\r
+ * <li><b><tt>easeBoth</tt></b></li>\r
+ * <li><b><tt>easeBothStrong</tt></b></li>\r
+ * <li><b><tt>easeIn</tt></b></li>\r
+ * <li><b><tt>easeInStrong</tt></b></li>\r
+ * <li><b><tt>easeNone</tt></b></li>\r
+ * <li><b><tt>easeOut</tt></b></li>\r
+ * <li><b><tt>easeOutStrong</tt></b></li>\r
+ * <li><b><tt>elasticBoth</tt></b></li>\r
+ * <li><b><tt>elasticIn</tt></b></li>\r
+ * <li><b><tt>elasticOut</tt></b></li>\r
+ * </ul></div>\r
+ *\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
+ * \r
+ * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between\r
+ * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value.\r
+ * \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. <tt>"width:100px"</tt>, or an object\r
+ * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the\r
+ * 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 preceding effects should be stopped and removed before running current effect (only applies to non blocking effects)\r
+ */\r
+Ext.Fx = {\r
+ \r
+ // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function.\r
+ // this is useful for replacing switch statements (for example).\r
+ switchStatements : function(key, fn, argHash){\r
+ return fn.apply(this, argHash[key]);\r
+ },\r
+ \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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ st = dom.style,\r
+ xy,\r
+ r,\r
+ b, \r
+ wrap, \r
+ after,\r
+ st,\r
+ args, \r
+ pt,\r
+ bw,\r
+ bh;\r
+ \r
+ anchor = anchor || "t";\r
+\r
+ me.queueFx(o, function(){ \r
+ xy = fly(dom).getXY();\r
+ // fix display to visibility\r
+ fly(dom).fixDisplay(); \r
+ \r
+ // restore values after effect\r
+ r = fly(dom).getFxRestore(); \r
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
+ b.right = b.x + b.width;\r
+ b.bottom = b.y + b.height;\r
+ \r
+ // fixed size for slide\r
+ fly(dom).setWidth(b.width).setHeight(b.height); \r
+ \r
+ // wrap if needed\r
+ wrap = fly(dom).fxWrap(r.pos, o, HIDDEN);\r
+ \r
+ st.visibility = VISIBLE;\r
+ st.position = ABSOLUTE;\r
+ \r
+ // clear out temp styles after slide and unwrap\r
+ function after(){\r
+ fly(dom).fxUnwrap(wrap, r.pos, o);\r
+ st.width = r.width;\r
+ st.height = r.height;\r
+ fly(dom).afterFx(o);\r
+ }\r
+ \r
+ // time to calculate the positions \r
+ pt = {to: [b.x, b.y]}; \r
+ bw = {to: b.width};\r
+ bh = {to: b.height};\r
+ \r
+ function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ \r
+ var ret = {};\r
+ fly(wrap).setWidth(ww).setHeight(wh);\r
+ if(fly(wrap)[sXY]){\r
+ fly(wrap)[sXY](sXYval); \r
+ }\r
+ style[s1] = style[s2] = "0"; \r
+ if(w){\r
+ ret.width = w\r
+ };\r
+ if(h){\r
+ ret.height = h;\r
+ }\r
+ if(p){\r
+ ret.points = p;\r
+ }\r
+ return ret;\r
+ };\r
+\r
+ args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
+ t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL],\r
+ l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL],\r
+ r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt],\r
+ b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt],\r
+ tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt],\r
+ bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt],\r
+ br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt],\r
+ tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt]\r
+ });\r
+ \r
+ st.visibility = VISIBLE;\r
+ fly(wrap).show();\r
+\r
+ arguments.callee.anim = fly(wrap).fxanim(args,\r
+ o,\r
+ MOTION,\r
+ .5,\r
+ EASEOUT, \r
+ after);\r
+ });\r
+ return me;\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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ st = dom.style,\r
+ xy = me.getXY(),\r
+ wrap,\r
+ r,\r
+ b,\r
+ a,\r
+ zero = {to: 0}; \r
+ \r
+ anchor = anchor || "t";\r
+\r
+ me.queueFx(o, function(){\r
+ \r
+ // restore values after effect\r
+ r = fly(dom).getFxRestore(); \r
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight};\r
+ b.right = b.x + b.width;\r
+ b.bottom = b.y + b.height;\r
+ \r
+ // fixed size for slide \r
+ fly(dom).setWidth(b.width).setHeight(b.height);\r
+\r
+ // wrap if needed\r
+ wrap = fly(dom).fxWrap(r.pos, o, VISIBLE);\r
+ \r
+ st.visibility = VISIBLE;\r
+ st.position = ABSOLUTE;\r
+ fly(wrap).setWidth(b.width).setHeight(b.height); \r
+\r
+ function after(){\r
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
+ fly(dom).fxUnwrap(wrap, r.pos, o);\r
+ st.width = r.width;\r
+ st.height = r.height;\r
+ fly(dom).afterFx(o);\r
+ } \r
+ \r
+ function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ \r
+ var ret = {};\r
+ \r
+ style[s1] = style[s2] = "0";\r
+ ret[p1] = v1; \r
+ if(p2){\r
+ ret[p2] = v2; \r
+ }\r
+ if(p3){\r
+ ret[p3] = v3;\r
+ }\r
+ \r
+ return ret;\r
+ };\r
+ \r
+ a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, {\r
+ t : [st, LEFT, BOTTOM, HEIGHT, zero],\r
+ l : [st, RIGHT, TOP, WIDTH, zero],\r
+ r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}],\r
+ b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
+ tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero],\r
+ bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}],\r
+ br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}],\r
+ tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}]\r
+ });\r
+ \r
+ arguments.callee.anim = fly(wrap).fxanim(a,\r
+ o,\r
+ MOTION,\r
+ .5,\r
+ EASEOUT, \r
+ after);\r
+ });\r
+ return me;\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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ st = dom.style,\r
+ width,\r
+ height,\r
+ r;\r
+\r
+ me.queueFx(o, function(){\r
+ width = fly(dom).getWidth();\r
+ height = fly(dom).getHeight();\r
+ fly(dom).clearOpacity();\r
+ fly(dom).show();\r
+\r
+ // restore values after effect\r
+ r = fly(dom).getFxRestore(); \r
+ \r
+ function after(){\r
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
+ fly(dom).clearOpacity(); \r
+ fly(dom).setPositioning(r.pos);\r
+ st.width = r.width;\r
+ st.height = r.height;\r
+ st.fontSize = '';\r
+ fly(dom).afterFx(o);\r
+ } \r
+\r
+ arguments.callee.anim = fly(dom).fxanim({\r
+ width : {to : fly(dom).adjustWidth(width * 2)},\r
+ height : {to : fly(dom).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,\r
+ after);\r
+ });\r
+ return me;\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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ st = dom.style,\r
+ r;\r
+\r
+ me.queueFx(o, function(){\r
+ fly(dom).clearOpacity();\r
+ fly(dom).clip();\r
+\r
+ // restore values after effect\r
+ r = fly(dom).getFxRestore();\r
+ \r
+ function after(){\r
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
+ fly(dom).clearOpacity();\r
+ fly(dom).setPositioning(r.pos);\r
+ st.width = r.width;\r
+ st.height = r.height; \r
+ fly(dom).afterFx(o);\r
+ };\r
+\r
+ fly(dom).fxanim({opacity : {to : 0.3}}, \r
+ NULL, \r
+ NULL, \r
+ .1, \r
+ NULL, \r
+ function(){ \r
+ fly(dom).clearOpacity();\r
+ (function(){ \r
+ fly(dom).fxanim({\r
+ height : {to : 1},\r
+ points : {by : [0, fly(dom).getHeight() * .5]}\r
+ }, \r
+ o, \r
+ MOTION, \r
+ 0.3, \r
+ 'easeIn', \r
+ after);\r
+ }).defer(100);\r
+ });\r
+ });\r
+ return me;\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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ attr = o.attr || "backgroundColor",\r
+ a = {},\r
+ restore;\r
+\r
+ me.queueFx(o, function(){\r
+ fly(dom).clearOpacity();\r
+ fly(dom).show();\r
+\r
+ function after(){\r
+ dom.style[attr] = restore;\r
+ fly(dom).afterFx(o);\r
+ } \r
+ restore = dom.style[attr];\r
+ a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"};\r
+ arguments.callee.anim = fly(dom).fxanim(a,\r
+ o,\r
+ 'color',\r
+ 1,\r
+ 'easeIn', \r
+ after);\r
+ });\r
+ return me;\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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ proxy,\r
+ active;\r
+\r
+ me.queueFx(o, function(){\r
+ color = color || "#C3DAF9"\r
+ if(color.length == 6){\r
+ color = "#" + color;\r
+ } \r
+ count = count || 1;\r
+ fly(dom).show();\r
+\r
+ var xy = fly(dom).getXY(),\r
+ b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight},\r
+ queue = function(){\r
+ proxy = fly(document.body || document.documentElement).createChild({\r
+ style:{\r
+ visbility: HIDDEN,\r
+ position : ABSOLUTE,\r
+ "z-index": 35000, // yee haw\r
+ border : "0px solid " + color\r
+ }\r
+ });\r
+ return proxy.queueFx({}, animFn);\r
+ };\r
+ \r
+ \r
+ arguments.callee.anim = {\r
+ isAnimated: true,\r
+ stop: function() {\r
+ count = 0;\r
+ proxy.stopFx();\r
+ }\r
+ };\r
+ \r
+ function animFn(){\r
+ var scale = Ext.isBorderBox ? 2 : 1;\r
+ active = proxy.anim({\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
+ },{\r
+ duration: o.duration || 1,\r
+ callback: function() {\r
+ proxy.remove();\r
+ --count > 0 ? queue() : fly(dom).afterFx(o);\r
+ }\r
+ });\r
+ arguments.callee.anim = {\r
+ isAnimated: true,\r
+ stop: function(){\r
+ active.stop();\r
+ }\r
+ };\r
+ };\r
+ queue();\r
+ });\r
+ return me;\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 dom = this.dom,\r
+ t;\r
+\r
+ this.queueFx({}, function(){\r
+ t = setTimeout(function(){\r
+ fly(dom).afterFx({});\r
+ }, seconds * 1000);\r
+ arguments.callee.anim = {\r
+ isAnimated: true,\r
+ stop: function(){\r
+ clearTimeout(t);\r
+ fly(dom).afterFx({});\r
+ }\r
+ };\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 <tt>{@link #endOpacity}</tt> 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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ to = o.endOpacity || 1;\r
+ \r
+ me.queueFx(o, function(){\r
+ fly(dom).setOpacity(0);\r
+ fly(dom).fixDisplay();\r
+ dom.style.visibility = VISIBLE;\r
+ arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}},\r
+ o, NULL, .5, EASEOUT, function(){\r
+ if(to == 1){\r
+ fly(dom).clearOpacity();\r
+ }\r
+ fly(dom).afterFx(o);\r
+ });\r
+ });\r
+ return me;\r
+ },\r
+\r
+ /**\r
+ * Fade an element out (from opaque to transparent). The ending opacity can be specified\r
+ * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require\r
+ * <tt>{@link #useDisplay}:true</tt> in order 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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ style = dom.style,\r
+ to = o.endOpacity || 0; \r
+ \r
+ me.queueFx(o, function(){ \r
+ arguments.callee.anim = fly(dom).fxanim({ \r
+ opacity : {to : to}},\r
+ o, \r
+ NULL, \r
+ .5, \r
+ EASEOUT, \r
+ function(){\r
+ if(to == 0){\r
+ Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? \r
+ style.display = "none" :\r
+ style.visibility = HIDDEN;\r
+ \r
+ fly(dom).clearOpacity();\r
+ }\r
+ fly(dom).afterFx(o);\r
+ });\r
+ });\r
+ return me;\r
+ },\r
+\r
+ /**\r
+ * Animates the transition of an element's dimensions from a starting height/width\r
+ * to an ending height/width. This method is a convenience implementation of {@link shift}.\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
+ o = getObject(o);\r
+ var dom = this.dom,\r
+ a = {};\r
+ \r
+ this.queueFx(o, function(){\r
+ for (var prop in o) {\r
+ if (o[prop] != UNDEFINED) { \r
+ a[prop] = {to : o[prop]}; \r
+ }\r
+ } \r
+ \r
+ a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a;\r
+ a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; \r
+ \r
+ if (a.x || a.y || a.xy) {\r
+ a.points = a.xy || \r
+ {to : [ a.x ? a.x.to : fly(dom).getX(),\r
+ a.y ? a.y.to : fly(dom).getY()]}; \r
+ }\r
+\r
+ arguments.callee.anim = fly(dom).fxanim(a,\r
+ o, \r
+ MOTION, \r
+ .35, \r
+ EASEOUT, \r
+ function(){\r
+ fly(dom).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
+ o = getObject(o);\r
+ var me = this,\r
+ dom = me.dom,\r
+ st = dom.style,\r
+ a = {opacity: {to: 0}, points: {}},\r
+ pt = a.points,\r
+ r,\r
+ w,\r
+ h;\r
+ \r
+ anchor = anchor || "b";\r
+\r
+ me.queueFx(o, function(){\r
+ // restore values after effect\r
+ r = fly(dom).getFxRestore();\r
+ w = fly(dom).getWidth();\r
+ h = fly(dom).getHeight();\r
+ \r
+ function after(){\r
+ o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); \r
+ fly(dom).clearOpacity();\r
+ fly(dom).setPositioning(r.pos);\r
+ st.width = r.width;\r
+ st.height = r.height;\r
+ fly(dom).afterFx(o);\r
+ }\r
+ \r
+ pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, {\r
+ t : [0, -h],\r
+ l : [-w, 0],\r
+ r : [w, 0],\r
+ b : [0, h],\r
+ tl : [-w, -h],\r
+ bl : [-w, h],\r
+ br : [w, h],\r
+ tr : [w, -h] \r
+ });\r
+ \r
+ arguments.callee.anim = fly(dom).fxanim(a,\r
+ o,\r
+ MOTION,\r
+ .5,\r
+ EASEOUT, after);\r
+ });\r
+ return me;\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
+ var me = this;\r
+ me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
+ block : FALSE,\r
+ concurrent : TRUE,\r
+ stopFx : FALSE\r
+ });\r
+ return me;\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
+ var me = this;\r
+ me.fxDefaults = Ext.apply(me.fxDefaults || {}, {\r
+ block : FALSE,\r
+ concurrent : FALSE,\r
+ stopFx : FALSE\r
+ });\r
+ return me;\r
+ },\r
+\r
+ /* @private */\r
+ nextFx : function(){ \r
+ var ef = getQueue(this.dom.id)[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 getQueue(this.dom.id)[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(finish){\r
+ var me = this,\r
+ id = me.dom.id;\r
+ if(me.hasActiveFx()){\r
+ var cur = getQueue(id)[0];\r
+ if(cur && cur.anim){\r
+ if(cur.anim.isAnimated){\r
+ setQueue(id, [cur]); //clear\r
+ cur.anim.stop(finish !== undefined ? finish : TRUE);\r
+ }else{\r
+ setQueue(id, []);\r
+ }\r
+ }\r
+ }\r
+ return me;\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 = getQueue(this.dom.id);\r
+ return q && q[0] && q[0].block;\r
+ },\r
+\r
+ /* @private */\r
+ queueFx : function(o, fn){\r
+ var me = this;\r
+ if(!me.hasFxBlock()){\r
+ Ext.applyIf(o, me.fxDefaults);\r
+ if(!o.concurrent){\r
+ var run = me.beforeFx(o);\r
+ fn.block = o.block;\r
+ getQueue(me.dom.id).push(fn);\r
+ if(run){\r
+ me.nextFx();\r
+ }\r
+ }else{\r
+ fn.call(me);\r
+ }\r
+ }\r
+ return me;\r
+ },\r
+\r
+ /* @private */\r
+ fxWrap : function(pos, o, vis){ \r
+ var dom = this.dom,\r
+ wrap,\r
+ wrapXY;\r
+ if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ \r
+ if(o.fixPosition){\r
+ wrapXY = fly(dom).getXY();\r
+ }\r
+ var div = document.createElement("div");\r
+ div.style.visibility = vis;\r
+ wrap = dom.parentNode.insertBefore(div, dom);\r
+ fly(wrap).setPositioning(pos);\r
+ if(fly(wrap).isStyle(POSITION, "static")){\r
+ fly(wrap).position("relative");\r
+ }\r
+ fly(dom).clearPositioning('auto');\r
+ fly(wrap).clip();\r
+ wrap.appendChild(dom);\r
+ if(wrapXY){\r
+ fly(wrap).setXY(wrapXY);\r
+ }\r
+ }\r
+ return wrap;\r
+ },\r
+\r
+ /* @private */\r
+ fxUnwrap : function(wrap, pos, o){ \r
+ var dom = this.dom;\r
+ fly(dom).clearPositioning();\r
+ fly(dom).setPositioning(pos);\r
+ if(!o.wrap){\r
+ wrap.parentNode.insertBefore(dom, wrap);\r
+ fly(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
+ var dom = this.dom,\r
+ id = dom.id,\r
+ notConcurrent = !o.concurrent;\r
+ if(o.afterStyle){\r
+ fly(dom).setStyle(o.afterStyle); \r
+ }\r
+ if(o.afterCls){\r
+ fly(dom).addClass(o.afterCls);\r
+ }\r
+ if(o.remove == TRUE){\r
+ fly(dom).remove();\r
+ }\r
+ if(notConcurrent){\r
+ getQueue(id).shift();\r
+ }\r
+ if(o.callback){\r
+ o.callback.call(o.scope, fly(dom));\r
+ }\r
+ if(notConcurrent){\r
+ fly(dom).nextFx();\r
+ }\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, \r
+ args,\r
+ (opt.duration || defaultDur) || .35,\r
+ (opt.easing || defaultEase) || EASEOUT,\r
+ cb, \r
+ this\r
+ );\r
+ opt.anim = anim;\r
+ return anim;\r
+ }\r
+};\r
+\r
+// backwards 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.Element.addMethods(Ext.Fx);\r
+})();</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff