[76] | 1 | /*! |
---|
| 2 | * Ext JS Library 3.4.0 |
---|
| 3 | * Copyright(c) 2006-2011 Sencha Inc. |
---|
| 4 | * licensing@sencha.com |
---|
| 5 | * http://www.sencha.com/license |
---|
| 6 | */ |
---|
| 7 | (function(){ |
---|
| 8 | // contants |
---|
| 9 | var NULL = null, |
---|
| 10 | UNDEFINED = undefined, |
---|
| 11 | TRUE = true, |
---|
| 12 | FALSE = false, |
---|
| 13 | SETX = "setX", |
---|
| 14 | SETY = "setY", |
---|
| 15 | SETXY = "setXY", |
---|
| 16 | LEFT = "left", |
---|
| 17 | BOTTOM = "bottom", |
---|
| 18 | TOP = "top", |
---|
| 19 | RIGHT = "right", |
---|
| 20 | HEIGHT = "height", |
---|
| 21 | WIDTH = "width", |
---|
| 22 | POINTS = "points", |
---|
| 23 | HIDDEN = "hidden", |
---|
| 24 | ABSOLUTE = "absolute", |
---|
| 25 | VISIBLE = "visible", |
---|
| 26 | MOTION = "motion", |
---|
| 27 | POSITION = "position", |
---|
| 28 | EASEOUT = "easeOut", |
---|
| 29 | /* |
---|
| 30 | * Use a light flyweight here since we are using so many callbacks and are always assured a DOM element |
---|
| 31 | */ |
---|
| 32 | flyEl = new Ext.Element.Flyweight(), |
---|
| 33 | queues = {}, |
---|
| 34 | getObject = function(o){ |
---|
| 35 | return o || {}; |
---|
| 36 | }, |
---|
| 37 | fly = function(dom){ |
---|
| 38 | flyEl.dom = dom; |
---|
| 39 | flyEl.id = Ext.id(dom); |
---|
| 40 | return flyEl; |
---|
| 41 | }, |
---|
| 42 | /* |
---|
| 43 | * Queueing now stored outside of the element due to closure issues |
---|
| 44 | */ |
---|
| 45 | getQueue = function(id){ |
---|
| 46 | if(!queues[id]){ |
---|
| 47 | queues[id] = []; |
---|
| 48 | } |
---|
| 49 | return queues[id]; |
---|
| 50 | }, |
---|
| 51 | setQueue = function(id, value){ |
---|
| 52 | queues[id] = value; |
---|
| 53 | }; |
---|
| 54 | |
---|
| 55 | //Notifies Element that fx methods are available |
---|
| 56 | Ext.enableFx = TRUE; |
---|
| 57 | |
---|
| 58 | /** |
---|
| 59 | * @class Ext.Fx |
---|
| 60 | * <p>A class to provide basic animation and visual effects support. <b>Note:</b> This class is automatically applied |
---|
| 61 | * to the {@link Ext.Element} interface when included, so all effects calls should be performed via {@link Ext.Element}. |
---|
| 62 | * Conversely, since the effects are not actually defined in {@link Ext.Element}, Ext.Fx <b>must</b> be |
---|
| 63 | * {@link Ext#enableFx included} in order for the Element effects to work.</p><br/> |
---|
| 64 | * |
---|
| 65 | * <p><b><u>Method Chaining</u></b></p> |
---|
| 66 | * <p>It is important to note that although the Fx methods and many non-Fx Element methods support "method chaining" in that |
---|
| 67 | * they return the Element object itself as the method return value, it is not always possible to mix the two in a single |
---|
| 68 | * method chain. The Fx methods use an internal effects queue so that each effect can be properly timed and sequenced. |
---|
| 69 | * Non-Fx methods, on the other hand, have no such internal queueing and will always execute immediately. For this reason, |
---|
| 70 | * while it may be possible to mix certain Fx and non-Fx method calls in a single chain, it may not always provide the |
---|
| 71 | * expected results and should be done with care. Also see <tt>{@link #callback}</tt>.</p><br/> |
---|
| 72 | * |
---|
| 73 | * <p><b><u>Anchor Options for Motion Effects</u></b></p> |
---|
| 74 | * <p>Motion effects support 8-way anchoring, meaning that you can choose one of 8 different anchor points on the Element |
---|
| 75 | * that will serve as either the start or end point of the animation. Following are all of the supported anchor positions:</p> |
---|
| 76 | <pre> |
---|
| 77 | Value Description |
---|
| 78 | ----- ----------------------------- |
---|
| 79 | tl The top left corner |
---|
| 80 | t The center of the top edge |
---|
| 81 | tr The top right corner |
---|
| 82 | l The center of the left edge |
---|
| 83 | r The center of the right edge |
---|
| 84 | bl The bottom left corner |
---|
| 85 | b The center of the bottom edge |
---|
| 86 | br The bottom right corner |
---|
| 87 | </pre> |
---|
| 88 | * <b>Note</b>: some Fx methods accept specific custom config parameters. The options shown in the Config Options |
---|
| 89 | * section below are common options that can be passed to any Fx method unless otherwise noted.</b> |
---|
| 90 | * |
---|
| 91 | * @cfg {Function} callback A function called when the effect is finished. Note that effects are queued internally by the |
---|
| 92 | * Fx class, so a callback is not required to specify another effect -- effects can simply be chained together |
---|
| 93 | * and called in sequence (see note for <b><u>Method Chaining</u></b> above), for example:<pre><code> |
---|
| 94 | * el.slideIn().highlight(); |
---|
| 95 | * </code></pre> |
---|
| 96 | * The callback is intended for any additional code that should run once a particular effect has completed. The Element |
---|
| 97 | * being operated upon is passed as the first parameter. |
---|
| 98 | * |
---|
| 99 | * @cfg {Object} scope The scope (<code>this</code> reference) in which the <tt>{@link #callback}</tt> function is executed. Defaults to the browser window. |
---|
| 100 | * |
---|
| 101 | * @cfg {String} easing A valid Ext.lib.Easing value for the effect:</p><div class="mdetail-params"><ul> |
---|
| 102 | * <li><b><tt>backBoth</tt></b></li> |
---|
| 103 | * <li><b><tt>backIn</tt></b></li> |
---|
| 104 | * <li><b><tt>backOut</tt></b></li> |
---|
| 105 | * <li><b><tt>bounceBoth</tt></b></li> |
---|
| 106 | * <li><b><tt>bounceIn</tt></b></li> |
---|
| 107 | * <li><b><tt>bounceOut</tt></b></li> |
---|
| 108 | * <li><b><tt>easeBoth</tt></b></li> |
---|
| 109 | * <li><b><tt>easeBothStrong</tt></b></li> |
---|
| 110 | * <li><b><tt>easeIn</tt></b></li> |
---|
| 111 | * <li><b><tt>easeInStrong</tt></b></li> |
---|
| 112 | * <li><b><tt>easeNone</tt></b></li> |
---|
| 113 | * <li><b><tt>easeOut</tt></b></li> |
---|
| 114 | * <li><b><tt>easeOutStrong</tt></b></li> |
---|
| 115 | * <li><b><tt>elasticBoth</tt></b></li> |
---|
| 116 | * <li><b><tt>elasticIn</tt></b></li> |
---|
| 117 | * <li><b><tt>elasticOut</tt></b></li> |
---|
| 118 | * </ul></div> |
---|
| 119 | * |
---|
| 120 | * @cfg {String} afterCls A css class to apply after the effect |
---|
| 121 | * @cfg {Number} duration The length of time (in seconds) that the effect should last |
---|
| 122 | * |
---|
| 123 | * @cfg {Number} endOpacity Only applicable for {@link #fadeIn} or {@link #fadeOut}, a number between |
---|
| 124 | * <tt>0</tt> and <tt>1</tt> inclusive to configure the ending opacity value. |
---|
| 125 | * |
---|
| 126 | * @cfg {Boolean} remove Whether the Element should be removed from the DOM and destroyed after the effect finishes |
---|
| 127 | * @cfg {Boolean} useDisplay Whether to use the <i>display</i> CSS property instead of <i>visibility</i> when hiding Elements (only applies to |
---|
| 128 | * effects that end with the element being visually hidden, ignored otherwise) |
---|
| 129 | * @cfg {String/Object/Function} afterStyle A style specification string, e.g. <tt>"width:100px"</tt>, or an object |
---|
| 130 | * in the form <tt>{width:"100px"}</tt>, or a function which returns such a specification that will be applied to the |
---|
| 131 | * Element after the effect finishes. |
---|
| 132 | * @cfg {Boolean} block Whether the effect should block other effects from queueing while it runs |
---|
| 133 | * @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 |
---|
| 134 | * @cfg {Boolean} stopFx Whether preceding effects should be stopped and removed before running current effect (only applies to non blocking effects) |
---|
| 135 | */ |
---|
| 136 | Ext.Fx = { |
---|
| 137 | |
---|
| 138 | // private - calls the function taking arguments from the argHash based on the key. Returns the return value of the function. |
---|
| 139 | // this is useful for replacing switch statements (for example). |
---|
| 140 | switchStatements : function(key, fn, argHash){ |
---|
| 141 | return fn.apply(this, argHash[key]); |
---|
| 142 | }, |
---|
| 143 | |
---|
| 144 | /** |
---|
| 145 | * Slides the element into view. An anchor point can be optionally passed to set the point of |
---|
| 146 | * origin for the slide effect. This function automatically handles wrapping the element with |
---|
| 147 | * a fixed-size container if needed. See the Fx class overview for valid anchor point options. |
---|
| 148 | * Usage: |
---|
| 149 | *<pre><code> |
---|
| 150 | // default: slide the element in from the top |
---|
| 151 | el.slideIn(); |
---|
| 152 | |
---|
| 153 | // custom: slide the element in from the right with a 2-second duration |
---|
| 154 | el.slideIn('r', { duration: 2 }); |
---|
| 155 | |
---|
| 156 | // common config options shown with default values |
---|
| 157 | el.slideIn('t', { |
---|
| 158 | easing: 'easeOut', |
---|
| 159 | duration: .5 |
---|
| 160 | }); |
---|
| 161 | </code></pre> |
---|
| 162 | * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') |
---|
| 163 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 164 | * @return {Ext.Element} The Element |
---|
| 165 | */ |
---|
| 166 | slideIn : function(anchor, o){ |
---|
| 167 | o = getObject(o); |
---|
| 168 | var me = this, |
---|
| 169 | dom = me.dom, |
---|
| 170 | st = dom.style, |
---|
| 171 | xy, |
---|
| 172 | r, |
---|
| 173 | b, |
---|
| 174 | wrap, |
---|
| 175 | after, |
---|
| 176 | st, |
---|
| 177 | args, |
---|
| 178 | pt, |
---|
| 179 | bw, |
---|
| 180 | bh; |
---|
| 181 | |
---|
| 182 | anchor = anchor || "t"; |
---|
| 183 | |
---|
| 184 | me.queueFx(o, function(){ |
---|
| 185 | xy = fly(dom).getXY(); |
---|
| 186 | // fix display to visibility |
---|
| 187 | fly(dom).fixDisplay(); |
---|
| 188 | |
---|
| 189 | // restore values after effect |
---|
| 190 | r = fly(dom).getFxRestore(); |
---|
| 191 | b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; |
---|
| 192 | b.right = b.x + b.width; |
---|
| 193 | b.bottom = b.y + b.height; |
---|
| 194 | |
---|
| 195 | // fixed size for slide |
---|
| 196 | fly(dom).setWidth(b.width).setHeight(b.height); |
---|
| 197 | |
---|
| 198 | // wrap if needed |
---|
| 199 | wrap = fly(dom).fxWrap(r.pos, o, HIDDEN); |
---|
| 200 | |
---|
| 201 | st.visibility = VISIBLE; |
---|
| 202 | st.position = ABSOLUTE; |
---|
| 203 | |
---|
| 204 | // clear out temp styles after slide and unwrap |
---|
| 205 | function after(){ |
---|
| 206 | fly(dom).fxUnwrap(wrap, r.pos, o); |
---|
| 207 | st.width = r.width; |
---|
| 208 | st.height = r.height; |
---|
| 209 | fly(dom).afterFx(o); |
---|
| 210 | } |
---|
| 211 | |
---|
| 212 | // time to calculate the positions |
---|
| 213 | pt = {to: [b.x, b.y]}; |
---|
| 214 | bw = {to: b.width}; |
---|
| 215 | bh = {to: b.height}; |
---|
| 216 | |
---|
| 217 | function argCalc(wrap, style, ww, wh, sXY, sXYval, s1, s2, w, h, p){ |
---|
| 218 | var ret = {}; |
---|
| 219 | fly(wrap).setWidth(ww).setHeight(wh); |
---|
| 220 | if(fly(wrap)[sXY]){ |
---|
| 221 | fly(wrap)[sXY](sXYval); |
---|
| 222 | } |
---|
| 223 | style[s1] = style[s2] = "0"; |
---|
| 224 | if(w){ |
---|
| 225 | ret.width = w; |
---|
| 226 | } |
---|
| 227 | if(h){ |
---|
| 228 | ret.height = h; |
---|
| 229 | } |
---|
| 230 | if(p){ |
---|
| 231 | ret.points = p; |
---|
| 232 | } |
---|
| 233 | return ret; |
---|
| 234 | }; |
---|
| 235 | |
---|
| 236 | args = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { |
---|
| 237 | t : [wrap, st, b.width, 0, NULL, NULL, LEFT, BOTTOM, NULL, bh, NULL], |
---|
| 238 | l : [wrap, st, 0, b.height, NULL, NULL, RIGHT, TOP, bw, NULL, NULL], |
---|
| 239 | r : [wrap, st, b.width, b.height, SETX, b.right, LEFT, TOP, NULL, NULL, pt], |
---|
| 240 | b : [wrap, st, b.width, b.height, SETY, b.bottom, LEFT, TOP, NULL, bh, pt], |
---|
| 241 | tl : [wrap, st, 0, 0, NULL, NULL, RIGHT, BOTTOM, bw, bh, pt], |
---|
| 242 | bl : [wrap, st, 0, 0, SETY, b.y + b.height, RIGHT, TOP, bw, bh, pt], |
---|
| 243 | br : [wrap, st, 0, 0, SETXY, [b.right, b.bottom], LEFT, TOP, bw, bh, pt], |
---|
| 244 | tr : [wrap, st, 0, 0, SETX, b.x + b.width, LEFT, BOTTOM, bw, bh, pt] |
---|
| 245 | }); |
---|
| 246 | |
---|
| 247 | st.visibility = VISIBLE; |
---|
| 248 | fly(wrap).show(); |
---|
| 249 | |
---|
| 250 | arguments.callee.anim = fly(wrap).fxanim(args, |
---|
| 251 | o, |
---|
| 252 | MOTION, |
---|
| 253 | .5, |
---|
| 254 | EASEOUT, |
---|
| 255 | after); |
---|
| 256 | }); |
---|
| 257 | return me; |
---|
| 258 | }, |
---|
| 259 | |
---|
| 260 | /** |
---|
| 261 | * Slides the element out of view. An anchor point can be optionally passed to set the end point |
---|
| 262 | * for the slide effect. When the effect is completed, the element will be hidden (visibility = |
---|
| 263 | * 'hidden') but block elements will still take up space in the document. The element must be removed |
---|
| 264 | * from the DOM using the 'remove' config option if desired. This function automatically handles |
---|
| 265 | * wrapping the element with a fixed-size container if needed. See the Fx class overview for valid anchor point options. |
---|
| 266 | * Usage: |
---|
| 267 | *<pre><code> |
---|
| 268 | // default: slide the element out to the top |
---|
| 269 | el.slideOut(); |
---|
| 270 | |
---|
| 271 | // custom: slide the element out to the right with a 2-second duration |
---|
| 272 | el.slideOut('r', { duration: 2 }); |
---|
| 273 | |
---|
| 274 | // common config options shown with default values |
---|
| 275 | el.slideOut('t', { |
---|
| 276 | easing: 'easeOut', |
---|
| 277 | duration: .5, |
---|
| 278 | remove: false, |
---|
| 279 | useDisplay: false |
---|
| 280 | }); |
---|
| 281 | </code></pre> |
---|
| 282 | * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to top: 't') |
---|
| 283 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 284 | * @return {Ext.Element} The Element |
---|
| 285 | */ |
---|
| 286 | slideOut : function(anchor, o){ |
---|
| 287 | o = getObject(o); |
---|
| 288 | var me = this, |
---|
| 289 | dom = me.dom, |
---|
| 290 | st = dom.style, |
---|
| 291 | xy = me.getXY(), |
---|
| 292 | wrap, |
---|
| 293 | r, |
---|
| 294 | b, |
---|
| 295 | a, |
---|
| 296 | zero = {to: 0}; |
---|
| 297 | |
---|
| 298 | anchor = anchor || "t"; |
---|
| 299 | |
---|
| 300 | me.queueFx(o, function(){ |
---|
| 301 | |
---|
| 302 | // restore values after effect |
---|
| 303 | r = fly(dom).getFxRestore(); |
---|
| 304 | b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}; |
---|
| 305 | b.right = b.x + b.width; |
---|
| 306 | b.bottom = b.y + b.height; |
---|
| 307 | |
---|
| 308 | // fixed size for slide |
---|
| 309 | fly(dom).setWidth(b.width).setHeight(b.height); |
---|
| 310 | |
---|
| 311 | // wrap if needed |
---|
| 312 | wrap = fly(dom).fxWrap(r.pos, o, VISIBLE); |
---|
| 313 | |
---|
| 314 | st.visibility = VISIBLE; |
---|
| 315 | st.position = ABSOLUTE; |
---|
| 316 | fly(wrap).setWidth(b.width).setHeight(b.height); |
---|
| 317 | |
---|
| 318 | function after(){ |
---|
| 319 | o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); |
---|
| 320 | fly(dom).fxUnwrap(wrap, r.pos, o); |
---|
| 321 | st.width = r.width; |
---|
| 322 | st.height = r.height; |
---|
| 323 | fly(dom).afterFx(o); |
---|
| 324 | } |
---|
| 325 | |
---|
| 326 | function argCalc(style, s1, s2, p1, v1, p2, v2, p3, v3){ |
---|
| 327 | var ret = {}; |
---|
| 328 | |
---|
| 329 | style[s1] = style[s2] = "0"; |
---|
| 330 | ret[p1] = v1; |
---|
| 331 | if(p2){ |
---|
| 332 | ret[p2] = v2; |
---|
| 333 | } |
---|
| 334 | if(p3){ |
---|
| 335 | ret[p3] = v3; |
---|
| 336 | } |
---|
| 337 | |
---|
| 338 | return ret; |
---|
| 339 | }; |
---|
| 340 | |
---|
| 341 | a = fly(dom).switchStatements(anchor.toLowerCase(), argCalc, { |
---|
| 342 | t : [st, LEFT, BOTTOM, HEIGHT, zero], |
---|
| 343 | l : [st, RIGHT, TOP, WIDTH, zero], |
---|
| 344 | r : [st, LEFT, TOP, WIDTH, zero, POINTS, {to : [b.right, b.y]}], |
---|
| 345 | b : [st, LEFT, TOP, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], |
---|
| 346 | tl : [st, RIGHT, BOTTOM, WIDTH, zero, HEIGHT, zero], |
---|
| 347 | bl : [st, RIGHT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x, b.bottom]}], |
---|
| 348 | br : [st, LEFT, TOP, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.x + b.width, b.bottom]}], |
---|
| 349 | tr : [st, LEFT, BOTTOM, WIDTH, zero, HEIGHT, zero, POINTS, {to : [b.right, b.y]}] |
---|
| 350 | }); |
---|
| 351 | |
---|
| 352 | arguments.callee.anim = fly(wrap).fxanim(a, |
---|
| 353 | o, |
---|
| 354 | MOTION, |
---|
| 355 | .5, |
---|
| 356 | EASEOUT, |
---|
| 357 | after); |
---|
| 358 | }); |
---|
| 359 | return me; |
---|
| 360 | }, |
---|
| 361 | |
---|
| 362 | /** |
---|
| 363 | * Fades the element out while slowly expanding it in all directions. When the effect is completed, the |
---|
| 364 | * element will be hidden (visibility = 'hidden') but block elements will still take up space in the document. |
---|
| 365 | * The element must be removed from the DOM using the 'remove' config option if desired. |
---|
| 366 | * Usage: |
---|
| 367 | *<pre><code> |
---|
| 368 | // default |
---|
| 369 | el.puff(); |
---|
| 370 | |
---|
| 371 | // common config options shown with default values |
---|
| 372 | el.puff({ |
---|
| 373 | easing: 'easeOut', |
---|
| 374 | duration: .5, |
---|
| 375 | remove: false, |
---|
| 376 | useDisplay: false |
---|
| 377 | }); |
---|
| 378 | </code></pre> |
---|
| 379 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 380 | * @return {Ext.Element} The Element |
---|
| 381 | */ |
---|
| 382 | puff : function(o){ |
---|
| 383 | o = getObject(o); |
---|
| 384 | var me = this, |
---|
| 385 | dom = me.dom, |
---|
| 386 | st = dom.style, |
---|
| 387 | width, |
---|
| 388 | height, |
---|
| 389 | r; |
---|
| 390 | |
---|
| 391 | me.queueFx(o, function(){ |
---|
| 392 | width = fly(dom).getWidth(); |
---|
| 393 | height = fly(dom).getHeight(); |
---|
| 394 | fly(dom).clearOpacity(); |
---|
| 395 | fly(dom).show(); |
---|
| 396 | |
---|
| 397 | // restore values after effect |
---|
| 398 | r = fly(dom).getFxRestore(); |
---|
| 399 | |
---|
| 400 | function after(){ |
---|
| 401 | o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); |
---|
| 402 | fly(dom).clearOpacity(); |
---|
| 403 | fly(dom).setPositioning(r.pos); |
---|
| 404 | st.width = r.width; |
---|
| 405 | st.height = r.height; |
---|
| 406 | st.fontSize = ''; |
---|
| 407 | fly(dom).afterFx(o); |
---|
| 408 | } |
---|
| 409 | |
---|
| 410 | arguments.callee.anim = fly(dom).fxanim({ |
---|
| 411 | width : {to : fly(dom).adjustWidth(width * 2)}, |
---|
| 412 | height : {to : fly(dom).adjustHeight(height * 2)}, |
---|
| 413 | points : {by : [-width * .5, -height * .5]}, |
---|
| 414 | opacity : {to : 0}, |
---|
| 415 | fontSize: {to : 200, unit: "%"} |
---|
| 416 | }, |
---|
| 417 | o, |
---|
| 418 | MOTION, |
---|
| 419 | .5, |
---|
| 420 | EASEOUT, |
---|
| 421 | after); |
---|
| 422 | }); |
---|
| 423 | return me; |
---|
| 424 | }, |
---|
| 425 | |
---|
| 426 | /** |
---|
| 427 | * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television). |
---|
| 428 | * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still |
---|
| 429 | * take up space in the document. The element must be removed from the DOM using the 'remove' config option if desired. |
---|
| 430 | * Usage: |
---|
| 431 | *<pre><code> |
---|
| 432 | // default |
---|
| 433 | el.switchOff(); |
---|
| 434 | |
---|
| 435 | // all config options shown with default values |
---|
| 436 | el.switchOff({ |
---|
| 437 | easing: 'easeIn', |
---|
| 438 | duration: .3, |
---|
| 439 | remove: false, |
---|
| 440 | useDisplay: false |
---|
| 441 | }); |
---|
| 442 | </code></pre> |
---|
| 443 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 444 | * @return {Ext.Element} The Element |
---|
| 445 | */ |
---|
| 446 | switchOff : function(o){ |
---|
| 447 | o = getObject(o); |
---|
| 448 | var me = this, |
---|
| 449 | dom = me.dom, |
---|
| 450 | st = dom.style, |
---|
| 451 | r; |
---|
| 452 | |
---|
| 453 | me.queueFx(o, function(){ |
---|
| 454 | fly(dom).clearOpacity(); |
---|
| 455 | fly(dom).clip(); |
---|
| 456 | |
---|
| 457 | // restore values after effect |
---|
| 458 | r = fly(dom).getFxRestore(); |
---|
| 459 | |
---|
| 460 | function after(){ |
---|
| 461 | o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); |
---|
| 462 | fly(dom).clearOpacity(); |
---|
| 463 | fly(dom).setPositioning(r.pos); |
---|
| 464 | st.width = r.width; |
---|
| 465 | st.height = r.height; |
---|
| 466 | fly(dom).afterFx(o); |
---|
| 467 | }; |
---|
| 468 | |
---|
| 469 | fly(dom).fxanim({opacity : {to : 0.3}}, |
---|
| 470 | NULL, |
---|
| 471 | NULL, |
---|
| 472 | .1, |
---|
| 473 | NULL, |
---|
| 474 | function(){ |
---|
| 475 | fly(dom).clearOpacity(); |
---|
| 476 | (function(){ |
---|
| 477 | fly(dom).fxanim({ |
---|
| 478 | height : {to : 1}, |
---|
| 479 | points : {by : [0, fly(dom).getHeight() * .5]} |
---|
| 480 | }, |
---|
| 481 | o, |
---|
| 482 | MOTION, |
---|
| 483 | 0.3, |
---|
| 484 | 'easeIn', |
---|
| 485 | after); |
---|
| 486 | }).defer(100); |
---|
| 487 | }); |
---|
| 488 | }); |
---|
| 489 | return me; |
---|
| 490 | }, |
---|
| 491 | |
---|
| 492 | /** |
---|
| 493 | * Highlights the Element by setting a color (applies to the background-color by default, but can be |
---|
| 494 | * changed using the "attr" config option) and then fading back to the original color. If no original |
---|
| 495 | * color is available, you should provide the "endColor" config option which will be cleared after the animation. |
---|
| 496 | * Usage: |
---|
| 497 | <pre><code> |
---|
| 498 | // default: highlight background to yellow |
---|
| 499 | el.highlight(); |
---|
| 500 | |
---|
| 501 | // custom: highlight foreground text to blue for 2 seconds |
---|
| 502 | el.highlight("0000ff", { attr: 'color', duration: 2 }); |
---|
| 503 | |
---|
| 504 | // common config options shown with default values |
---|
| 505 | el.highlight("ffff9c", { |
---|
| 506 | attr: "background-color", //can be any valid CSS property (attribute) that supports a color value |
---|
| 507 | endColor: (current color) or "ffffff", |
---|
| 508 | easing: 'easeIn', |
---|
| 509 | duration: 1 |
---|
| 510 | }); |
---|
| 511 | </code></pre> |
---|
| 512 | * @param {String} color (optional) The highlight color. Should be a 6 char hex color without the leading # (defaults to yellow: 'ffff9c') |
---|
| 513 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 514 | * @return {Ext.Element} The Element |
---|
| 515 | */ |
---|
| 516 | highlight : function(color, o){ |
---|
| 517 | o = getObject(o); |
---|
| 518 | var me = this, |
---|
| 519 | dom = me.dom, |
---|
| 520 | attr = o.attr || "backgroundColor", |
---|
| 521 | a = {}, |
---|
| 522 | restore; |
---|
| 523 | |
---|
| 524 | me.queueFx(o, function(){ |
---|
| 525 | fly(dom).clearOpacity(); |
---|
| 526 | fly(dom).show(); |
---|
| 527 | |
---|
| 528 | function after(){ |
---|
| 529 | dom.style[attr] = restore; |
---|
| 530 | fly(dom).afterFx(o); |
---|
| 531 | } |
---|
| 532 | restore = dom.style[attr]; |
---|
| 533 | a[attr] = {from: color || "ffff9c", to: o.endColor || fly(dom).getColor(attr) || "ffffff"}; |
---|
| 534 | arguments.callee.anim = fly(dom).fxanim(a, |
---|
| 535 | o, |
---|
| 536 | 'color', |
---|
| 537 | 1, |
---|
| 538 | 'easeIn', |
---|
| 539 | after); |
---|
| 540 | }); |
---|
| 541 | return me; |
---|
| 542 | }, |
---|
| 543 | |
---|
| 544 | /** |
---|
| 545 | * Shows a ripple of exploding, attenuating borders to draw attention to an Element. |
---|
| 546 | * Usage: |
---|
| 547 | <pre><code> |
---|
| 548 | // default: a single light blue ripple |
---|
| 549 | el.frame(); |
---|
| 550 | |
---|
| 551 | // custom: 3 red ripples lasting 3 seconds total |
---|
| 552 | el.frame("ff0000", 3, { duration: 3 }); |
---|
| 553 | |
---|
| 554 | // common config options shown with default values |
---|
| 555 | el.frame("C3DAF9", 1, { |
---|
| 556 | duration: 1 //duration of each individual ripple. |
---|
| 557 | // Note: Easing is not configurable and will be ignored if included |
---|
| 558 | }); |
---|
| 559 | </code></pre> |
---|
| 560 | * @param {String} color (optional) The color of the border. Should be a 6 char hex color without the leading # (defaults to light blue: 'C3DAF9'). |
---|
| 561 | * @param {Number} count (optional) The number of ripples to display (defaults to 1) |
---|
| 562 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 563 | * @return {Ext.Element} The Element |
---|
| 564 | */ |
---|
| 565 | frame : function(color, count, o){ |
---|
| 566 | o = getObject(o); |
---|
| 567 | var me = this, |
---|
| 568 | dom = me.dom, |
---|
| 569 | proxy, |
---|
| 570 | active; |
---|
| 571 | |
---|
| 572 | me.queueFx(o, function(){ |
---|
| 573 | color = color || '#C3DAF9'; |
---|
| 574 | if(color.length == 6){ |
---|
| 575 | color = '#' + color; |
---|
| 576 | } |
---|
| 577 | count = count || 1; |
---|
| 578 | fly(dom).show(); |
---|
| 579 | |
---|
| 580 | var xy = fly(dom).getXY(), |
---|
| 581 | b = {x: xy[0], y: xy[1], 0: xy[0], 1: xy[1], width: dom.offsetWidth, height: dom.offsetHeight}, |
---|
| 582 | queue = function(){ |
---|
| 583 | proxy = fly(document.body || document.documentElement).createChild({ |
---|
| 584 | style:{ |
---|
| 585 | position : ABSOLUTE, |
---|
| 586 | 'z-index': 35000, // yee haw |
---|
| 587 | border : '0px solid ' + color |
---|
| 588 | } |
---|
| 589 | }); |
---|
| 590 | return proxy.queueFx({}, animFn); |
---|
| 591 | }; |
---|
| 592 | |
---|
| 593 | |
---|
| 594 | arguments.callee.anim = { |
---|
| 595 | isAnimated: true, |
---|
| 596 | stop: function() { |
---|
| 597 | count = 0; |
---|
| 598 | proxy.stopFx(); |
---|
| 599 | } |
---|
| 600 | }; |
---|
| 601 | |
---|
| 602 | function animFn(){ |
---|
| 603 | var scale = Ext.isBorderBox ? 2 : 1; |
---|
| 604 | active = proxy.anim({ |
---|
| 605 | top : {from : b.y, to : b.y - 20}, |
---|
| 606 | left : {from : b.x, to : b.x - 20}, |
---|
| 607 | borderWidth : {from : 0, to : 10}, |
---|
| 608 | opacity : {from : 1, to : 0}, |
---|
| 609 | height : {from : b.height, to : b.height + 20 * scale}, |
---|
| 610 | width : {from : b.width, to : b.width + 20 * scale} |
---|
| 611 | },{ |
---|
| 612 | duration: o.duration || 1, |
---|
| 613 | callback: function() { |
---|
| 614 | proxy.remove(); |
---|
| 615 | --count > 0 ? queue() : fly(dom).afterFx(o); |
---|
| 616 | } |
---|
| 617 | }); |
---|
| 618 | arguments.callee.anim = { |
---|
| 619 | isAnimated: true, |
---|
| 620 | stop: function(){ |
---|
| 621 | active.stop(); |
---|
| 622 | } |
---|
| 623 | }; |
---|
| 624 | }; |
---|
| 625 | queue(); |
---|
| 626 | }); |
---|
| 627 | return me; |
---|
| 628 | }, |
---|
| 629 | |
---|
| 630 | /** |
---|
| 631 | * Creates a pause before any subsequent queued effects begin. If there are |
---|
| 632 | * no effects queued after the pause it will have no effect. |
---|
| 633 | * Usage: |
---|
| 634 | <pre><code> |
---|
| 635 | el.pause(1); |
---|
| 636 | </code></pre> |
---|
| 637 | * @param {Number} seconds The length of time to pause (in seconds) |
---|
| 638 | * @return {Ext.Element} The Element |
---|
| 639 | */ |
---|
| 640 | pause : function(seconds){ |
---|
| 641 | var dom = this.dom, |
---|
| 642 | t; |
---|
| 643 | |
---|
| 644 | this.queueFx({}, function(){ |
---|
| 645 | t = setTimeout(function(){ |
---|
| 646 | fly(dom).afterFx({}); |
---|
| 647 | }, seconds * 1000); |
---|
| 648 | arguments.callee.anim = { |
---|
| 649 | isAnimated: true, |
---|
| 650 | stop: function(){ |
---|
| 651 | clearTimeout(t); |
---|
| 652 | fly(dom).afterFx({}); |
---|
| 653 | } |
---|
| 654 | }; |
---|
| 655 | }); |
---|
| 656 | return this; |
---|
| 657 | }, |
---|
| 658 | |
---|
| 659 | /** |
---|
| 660 | * Fade an element in (from transparent to opaque). The ending opacity can be specified |
---|
| 661 | * using the <tt>{@link #endOpacity}</tt> config option. |
---|
| 662 | * Usage: |
---|
| 663 | <pre><code> |
---|
| 664 | // default: fade in from opacity 0 to 100% |
---|
| 665 | el.fadeIn(); |
---|
| 666 | |
---|
| 667 | // custom: fade in from opacity 0 to 75% over 2 seconds |
---|
| 668 | el.fadeIn({ endOpacity: .75, duration: 2}); |
---|
| 669 | |
---|
| 670 | // common config options shown with default values |
---|
| 671 | el.fadeIn({ |
---|
| 672 | endOpacity: 1, //can be any value between 0 and 1 (e.g. .5) |
---|
| 673 | easing: 'easeOut', |
---|
| 674 | duration: .5 |
---|
| 675 | }); |
---|
| 676 | </code></pre> |
---|
| 677 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 678 | * @return {Ext.Element} The Element |
---|
| 679 | */ |
---|
| 680 | fadeIn : function(o){ |
---|
| 681 | o = getObject(o); |
---|
| 682 | var me = this, |
---|
| 683 | dom = me.dom, |
---|
| 684 | to = o.endOpacity || 1; |
---|
| 685 | |
---|
| 686 | me.queueFx(o, function(){ |
---|
| 687 | fly(dom).setOpacity(0); |
---|
| 688 | fly(dom).fixDisplay(); |
---|
| 689 | dom.style.visibility = VISIBLE; |
---|
| 690 | arguments.callee.anim = fly(dom).fxanim({opacity:{to:to}}, |
---|
| 691 | o, NULL, .5, EASEOUT, function(){ |
---|
| 692 | if(to == 1){ |
---|
| 693 | fly(dom).clearOpacity(); |
---|
| 694 | } |
---|
| 695 | fly(dom).afterFx(o); |
---|
| 696 | }); |
---|
| 697 | }); |
---|
| 698 | return me; |
---|
| 699 | }, |
---|
| 700 | |
---|
| 701 | /** |
---|
| 702 | * Fade an element out (from opaque to transparent). The ending opacity can be specified |
---|
| 703 | * using the <tt>{@link #endOpacity}</tt> config option. Note that IE may require |
---|
| 704 | * <tt>{@link #useDisplay}:true</tt> in order to redisplay correctly. |
---|
| 705 | * Usage: |
---|
| 706 | <pre><code> |
---|
| 707 | // default: fade out from the element's current opacity to 0 |
---|
| 708 | el.fadeOut(); |
---|
| 709 | |
---|
| 710 | // custom: fade out from the element's current opacity to 25% over 2 seconds |
---|
| 711 | el.fadeOut({ endOpacity: .25, duration: 2}); |
---|
| 712 | |
---|
| 713 | // common config options shown with default values |
---|
| 714 | el.fadeOut({ |
---|
| 715 | endOpacity: 0, //can be any value between 0 and 1 (e.g. .5) |
---|
| 716 | easing: 'easeOut', |
---|
| 717 | duration: .5, |
---|
| 718 | remove: false, |
---|
| 719 | useDisplay: false |
---|
| 720 | }); |
---|
| 721 | </code></pre> |
---|
| 722 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 723 | * @return {Ext.Element} The Element |
---|
| 724 | */ |
---|
| 725 | fadeOut : function(o){ |
---|
| 726 | o = getObject(o); |
---|
| 727 | var me = this, |
---|
| 728 | dom = me.dom, |
---|
| 729 | style = dom.style, |
---|
| 730 | to = o.endOpacity || 0; |
---|
| 731 | |
---|
| 732 | me.queueFx(o, function(){ |
---|
| 733 | arguments.callee.anim = fly(dom).fxanim({ |
---|
| 734 | opacity : {to : to}}, |
---|
| 735 | o, |
---|
| 736 | NULL, |
---|
| 737 | .5, |
---|
| 738 | EASEOUT, |
---|
| 739 | function(){ |
---|
| 740 | if(to == 0){ |
---|
| 741 | Ext.Element.data(dom, 'visibilityMode') == Ext.Element.DISPLAY || o.useDisplay ? |
---|
| 742 | style.display = "none" : |
---|
| 743 | style.visibility = HIDDEN; |
---|
| 744 | |
---|
| 745 | fly(dom).clearOpacity(); |
---|
| 746 | } |
---|
| 747 | fly(dom).afterFx(o); |
---|
| 748 | }); |
---|
| 749 | }); |
---|
| 750 | return me; |
---|
| 751 | }, |
---|
| 752 | |
---|
| 753 | /** |
---|
| 754 | * Animates the transition of an element's dimensions from a starting height/width |
---|
| 755 | * to an ending height/width. This method is a convenience implementation of {@link shift}. |
---|
| 756 | * Usage: |
---|
| 757 | <pre><code> |
---|
| 758 | // change height and width to 100x100 pixels |
---|
| 759 | el.scale(100, 100); |
---|
| 760 | |
---|
| 761 | // common config options shown with default values. The height and width will default to |
---|
| 762 | // the element's existing values if passed as null. |
---|
| 763 | el.scale( |
---|
| 764 | [element's width], |
---|
| 765 | [element's height], { |
---|
| 766 | easing: 'easeOut', |
---|
| 767 | duration: .35 |
---|
| 768 | } |
---|
| 769 | ); |
---|
| 770 | </code></pre> |
---|
| 771 | * @param {Number} width The new width (pass undefined to keep the original width) |
---|
| 772 | * @param {Number} height The new height (pass undefined to keep the original height) |
---|
| 773 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 774 | * @return {Ext.Element} The Element |
---|
| 775 | */ |
---|
| 776 | scale : function(w, h, o){ |
---|
| 777 | this.shift(Ext.apply({}, o, { |
---|
| 778 | width: w, |
---|
| 779 | height: h |
---|
| 780 | })); |
---|
| 781 | return this; |
---|
| 782 | }, |
---|
| 783 | |
---|
| 784 | /** |
---|
| 785 | * Animates the transition of any combination of an element's dimensions, xy position and/or opacity. |
---|
| 786 | * Any of these properties not specified in the config object will not be changed. This effect |
---|
| 787 | * requires that at least one new dimension, position or opacity setting must be passed in on |
---|
| 788 | * the config object in order for the function to have any effect. |
---|
| 789 | * Usage: |
---|
| 790 | <pre><code> |
---|
| 791 | // slide the element horizontally to x position 200 while changing the height and opacity |
---|
| 792 | el.shift({ x: 200, height: 50, opacity: .8 }); |
---|
| 793 | |
---|
| 794 | // common config options shown with default values. |
---|
| 795 | el.shift({ |
---|
| 796 | width: [element's width], |
---|
| 797 | height: [element's height], |
---|
| 798 | x: [element's x position], |
---|
| 799 | y: [element's y position], |
---|
| 800 | opacity: [element's opacity], |
---|
| 801 | easing: 'easeOut', |
---|
| 802 | duration: .35 |
---|
| 803 | }); |
---|
| 804 | </code></pre> |
---|
| 805 | * @param {Object} options Object literal with any of the Fx config options |
---|
| 806 | * @return {Ext.Element} The Element |
---|
| 807 | */ |
---|
| 808 | shift : function(o){ |
---|
| 809 | o = getObject(o); |
---|
| 810 | var dom = this.dom, |
---|
| 811 | a = {}; |
---|
| 812 | |
---|
| 813 | this.queueFx(o, function(){ |
---|
| 814 | for (var prop in o) { |
---|
| 815 | if (o[prop] != UNDEFINED) { |
---|
| 816 | a[prop] = {to : o[prop]}; |
---|
| 817 | } |
---|
| 818 | } |
---|
| 819 | |
---|
| 820 | a.width ? a.width.to = fly(dom).adjustWidth(o.width) : a; |
---|
| 821 | a.height ? a.height.to = fly(dom).adjustWidth(o.height) : a; |
---|
| 822 | |
---|
| 823 | if (a.x || a.y || a.xy) { |
---|
| 824 | a.points = a.xy || |
---|
| 825 | {to : [ a.x ? a.x.to : fly(dom).getX(), |
---|
| 826 | a.y ? a.y.to : fly(dom).getY()]}; |
---|
| 827 | } |
---|
| 828 | |
---|
| 829 | arguments.callee.anim = fly(dom).fxanim(a, |
---|
| 830 | o, |
---|
| 831 | MOTION, |
---|
| 832 | .35, |
---|
| 833 | EASEOUT, |
---|
| 834 | function(){ |
---|
| 835 | fly(dom).afterFx(o); |
---|
| 836 | }); |
---|
| 837 | }); |
---|
| 838 | return this; |
---|
| 839 | }, |
---|
| 840 | |
---|
| 841 | /** |
---|
| 842 | * Slides the element while fading it out of view. An anchor point can be optionally passed to set the |
---|
| 843 | * ending point of the effect. |
---|
| 844 | * Usage: |
---|
| 845 | *<pre><code> |
---|
| 846 | // default: slide the element downward while fading out |
---|
| 847 | el.ghost(); |
---|
| 848 | |
---|
| 849 | // custom: slide the element out to the right with a 2-second duration |
---|
| 850 | el.ghost('r', { duration: 2 }); |
---|
| 851 | |
---|
| 852 | // common config options shown with default values |
---|
| 853 | el.ghost('b', { |
---|
| 854 | easing: 'easeOut', |
---|
| 855 | duration: .5, |
---|
| 856 | remove: false, |
---|
| 857 | useDisplay: false |
---|
| 858 | }); |
---|
| 859 | </code></pre> |
---|
| 860 | * @param {String} anchor (optional) One of the valid Fx anchor positions (defaults to bottom: 'b') |
---|
| 861 | * @param {Object} options (optional) Object literal with any of the Fx config options |
---|
| 862 | * @return {Ext.Element} The Element |
---|
| 863 | */ |
---|
| 864 | ghost : function(anchor, o){ |
---|
| 865 | o = getObject(o); |
---|
| 866 | var me = this, |
---|
| 867 | dom = me.dom, |
---|
| 868 | st = dom.style, |
---|
| 869 | a = {opacity: {to: 0}, points: {}}, |
---|
| 870 | pt = a.points, |
---|
| 871 | r, |
---|
| 872 | w, |
---|
| 873 | h; |
---|
| 874 | |
---|
| 875 | anchor = anchor || "b"; |
---|
| 876 | |
---|
| 877 | me.queueFx(o, function(){ |
---|
| 878 | // restore values after effect |
---|
| 879 | r = fly(dom).getFxRestore(); |
---|
| 880 | w = fly(dom).getWidth(); |
---|
| 881 | h = fly(dom).getHeight(); |
---|
| 882 | |
---|
| 883 | function after(){ |
---|
| 884 | o.useDisplay ? fly(dom).setDisplayed(FALSE) : fly(dom).hide(); |
---|
| 885 | fly(dom).clearOpacity(); |
---|
| 886 | fly(dom).setPositioning(r.pos); |
---|
| 887 | st.width = r.width; |
---|
| 888 | st.height = r.height; |
---|
| 889 | fly(dom).afterFx(o); |
---|
| 890 | } |
---|
| 891 | |
---|
| 892 | pt.by = fly(dom).switchStatements(anchor.toLowerCase(), function(v1,v2){ return [v1, v2];}, { |
---|
| 893 | t : [0, -h], |
---|
| 894 | l : [-w, 0], |
---|
| 895 | r : [w, 0], |
---|
| 896 | b : [0, h], |
---|
| 897 | tl : [-w, -h], |
---|
| 898 | bl : [-w, h], |
---|
| 899 | br : [w, h], |
---|
| 900 | tr : [w, -h] |
---|
| 901 | }); |
---|
| 902 | |
---|
| 903 | arguments.callee.anim = fly(dom).fxanim(a, |
---|
| 904 | o, |
---|
| 905 | MOTION, |
---|
| 906 | .5, |
---|
| 907 | EASEOUT, after); |
---|
| 908 | }); |
---|
| 909 | return me; |
---|
| 910 | }, |
---|
| 911 | |
---|
| 912 | /** |
---|
| 913 | * Ensures that all effects queued after syncFx is called on the element are |
---|
| 914 | * run concurrently. This is the opposite of {@link #sequenceFx}. |
---|
| 915 | * @return {Ext.Element} The Element |
---|
| 916 | */ |
---|
| 917 | syncFx : function(){ |
---|
| 918 | var me = this; |
---|
| 919 | me.fxDefaults = Ext.apply(me.fxDefaults || {}, { |
---|
| 920 | block : FALSE, |
---|
| 921 | concurrent : TRUE, |
---|
| 922 | stopFx : FALSE |
---|
| 923 | }); |
---|
| 924 | return me; |
---|
| 925 | }, |
---|
| 926 | |
---|
| 927 | /** |
---|
| 928 | * Ensures that all effects queued after sequenceFx is called on the element are |
---|
| 929 | * run in sequence. This is the opposite of {@link #syncFx}. |
---|
| 930 | * @return {Ext.Element} The Element |
---|
| 931 | */ |
---|
| 932 | sequenceFx : function(){ |
---|
| 933 | var me = this; |
---|
| 934 | me.fxDefaults = Ext.apply(me.fxDefaults || {}, { |
---|
| 935 | block : FALSE, |
---|
| 936 | concurrent : FALSE, |
---|
| 937 | stopFx : FALSE |
---|
| 938 | }); |
---|
| 939 | return me; |
---|
| 940 | }, |
---|
| 941 | |
---|
| 942 | /* @private */ |
---|
| 943 | nextFx : function(){ |
---|
| 944 | var ef = getQueue(this.dom.id)[0]; |
---|
| 945 | if(ef){ |
---|
| 946 | ef.call(this); |
---|
| 947 | } |
---|
| 948 | }, |
---|
| 949 | |
---|
| 950 | /** |
---|
| 951 | * Returns true if the element has any effects actively running or queued, else returns false. |
---|
| 952 | * @return {Boolean} True if element has active effects, else false |
---|
| 953 | */ |
---|
| 954 | hasActiveFx : function(){ |
---|
| 955 | return getQueue(this.dom.id)[0]; |
---|
| 956 | }, |
---|
| 957 | |
---|
| 958 | /** |
---|
| 959 | * Stops any running effects and clears the element's internal effects queue if it contains |
---|
| 960 | * any additional effects that haven't started yet. |
---|
| 961 | * @return {Ext.Element} The Element |
---|
| 962 | */ |
---|
| 963 | stopFx : function(finish){ |
---|
| 964 | var me = this, |
---|
| 965 | id = me.dom.id; |
---|
| 966 | if(me.hasActiveFx()){ |
---|
| 967 | var cur = getQueue(id)[0]; |
---|
| 968 | if(cur && cur.anim){ |
---|
| 969 | if(cur.anim.isAnimated){ |
---|
| 970 | setQueue(id, [cur]); //clear |
---|
| 971 | cur.anim.stop(finish !== undefined ? finish : TRUE); |
---|
| 972 | }else{ |
---|
| 973 | setQueue(id, []); |
---|
| 974 | } |
---|
| 975 | } |
---|
| 976 | } |
---|
| 977 | return me; |
---|
| 978 | }, |
---|
| 979 | |
---|
| 980 | /* @private */ |
---|
| 981 | beforeFx : function(o){ |
---|
| 982 | if(this.hasActiveFx() && !o.concurrent){ |
---|
| 983 | if(o.stopFx){ |
---|
| 984 | this.stopFx(); |
---|
| 985 | return TRUE; |
---|
| 986 | } |
---|
| 987 | return FALSE; |
---|
| 988 | } |
---|
| 989 | return TRUE; |
---|
| 990 | }, |
---|
| 991 | |
---|
| 992 | /** |
---|
| 993 | * Returns true if the element is currently blocking so that no other effect can be queued |
---|
| 994 | * until this effect is finished, else returns false if blocking is not set. This is commonly |
---|
| 995 | * used to ensure that an effect initiated by a user action runs to completion prior to the |
---|
| 996 | * same effect being restarted (e.g., firing only one effect even if the user clicks several times). |
---|
| 997 | * @return {Boolean} True if blocking, else false |
---|
| 998 | */ |
---|
| 999 | hasFxBlock : function(){ |
---|
| 1000 | var q = getQueue(this.dom.id); |
---|
| 1001 | return q && q[0] && q[0].block; |
---|
| 1002 | }, |
---|
| 1003 | |
---|
| 1004 | /* @private */ |
---|
| 1005 | queueFx : function(o, fn){ |
---|
| 1006 | var me = fly(this.dom); |
---|
| 1007 | if(!me.hasFxBlock()){ |
---|
| 1008 | Ext.applyIf(o, me.fxDefaults); |
---|
| 1009 | if(!o.concurrent){ |
---|
| 1010 | var run = me.beforeFx(o); |
---|
| 1011 | fn.block = o.block; |
---|
| 1012 | getQueue(me.dom.id).push(fn); |
---|
| 1013 | if(run){ |
---|
| 1014 | me.nextFx(); |
---|
| 1015 | } |
---|
| 1016 | }else{ |
---|
| 1017 | fn.call(me); |
---|
| 1018 | } |
---|
| 1019 | } |
---|
| 1020 | return me; |
---|
| 1021 | }, |
---|
| 1022 | |
---|
| 1023 | /* @private */ |
---|
| 1024 | fxWrap : function(pos, o, vis){ |
---|
| 1025 | var dom = this.dom, |
---|
| 1026 | wrap, |
---|
| 1027 | wrapXY; |
---|
| 1028 | if(!o.wrap || !(wrap = Ext.getDom(o.wrap))){ |
---|
| 1029 | if(o.fixPosition){ |
---|
| 1030 | wrapXY = fly(dom).getXY(); |
---|
| 1031 | } |
---|
| 1032 | var div = document.createElement("div"); |
---|
| 1033 | div.style.visibility = vis; |
---|
| 1034 | wrap = dom.parentNode.insertBefore(div, dom); |
---|
| 1035 | fly(wrap).setPositioning(pos); |
---|
| 1036 | if(fly(wrap).isStyle(POSITION, "static")){ |
---|
| 1037 | fly(wrap).position("relative"); |
---|
| 1038 | } |
---|
| 1039 | fly(dom).clearPositioning('auto'); |
---|
| 1040 | fly(wrap).clip(); |
---|
| 1041 | wrap.appendChild(dom); |
---|
| 1042 | if(wrapXY){ |
---|
| 1043 | fly(wrap).setXY(wrapXY); |
---|
| 1044 | } |
---|
| 1045 | } |
---|
| 1046 | return wrap; |
---|
| 1047 | }, |
---|
| 1048 | |
---|
| 1049 | /* @private */ |
---|
| 1050 | fxUnwrap : function(wrap, pos, o){ |
---|
| 1051 | var dom = this.dom; |
---|
| 1052 | fly(dom).clearPositioning(); |
---|
| 1053 | fly(dom).setPositioning(pos); |
---|
| 1054 | if(!o.wrap){ |
---|
| 1055 | var pn = fly(wrap).dom.parentNode; |
---|
| 1056 | pn.insertBefore(dom, wrap); |
---|
| 1057 | fly(wrap).remove(); |
---|
| 1058 | } |
---|
| 1059 | }, |
---|
| 1060 | |
---|
| 1061 | /* @private */ |
---|
| 1062 | getFxRestore : function(){ |
---|
| 1063 | var st = this.dom.style; |
---|
| 1064 | return {pos: this.getPositioning(), width: st.width, height : st.height}; |
---|
| 1065 | }, |
---|
| 1066 | |
---|
| 1067 | /* @private */ |
---|
| 1068 | afterFx : function(o){ |
---|
| 1069 | var dom = this.dom, |
---|
| 1070 | id = dom.id; |
---|
| 1071 | if(o.afterStyle){ |
---|
| 1072 | fly(dom).setStyle(o.afterStyle); |
---|
| 1073 | } |
---|
| 1074 | if(o.afterCls){ |
---|
| 1075 | fly(dom).addClass(o.afterCls); |
---|
| 1076 | } |
---|
| 1077 | if(o.remove == TRUE){ |
---|
| 1078 | fly(dom).remove(); |
---|
| 1079 | } |
---|
| 1080 | if(o.callback){ |
---|
| 1081 | o.callback.call(o.scope, fly(dom)); |
---|
| 1082 | } |
---|
| 1083 | if(!o.concurrent){ |
---|
| 1084 | getQueue(id).shift(); |
---|
| 1085 | fly(dom).nextFx(); |
---|
| 1086 | } |
---|
| 1087 | }, |
---|
| 1088 | |
---|
| 1089 | /* @private */ |
---|
| 1090 | fxanim : function(args, opt, animType, defaultDur, defaultEase, cb){ |
---|
| 1091 | animType = animType || 'run'; |
---|
| 1092 | opt = opt || {}; |
---|
| 1093 | var anim = Ext.lib.Anim[animType]( |
---|
| 1094 | this.dom, |
---|
| 1095 | args, |
---|
| 1096 | (opt.duration || defaultDur) || .35, |
---|
| 1097 | (opt.easing || defaultEase) || EASEOUT, |
---|
| 1098 | cb, |
---|
| 1099 | this |
---|
| 1100 | ); |
---|
| 1101 | opt.anim = anim; |
---|
| 1102 | return anim; |
---|
| 1103 | } |
---|
| 1104 | }; |
---|
| 1105 | |
---|
| 1106 | // backwards compat |
---|
| 1107 | Ext.Fx.resize = Ext.Fx.scale; |
---|
| 1108 | |
---|
| 1109 | //When included, Ext.Fx is automatically applied to Element so that all basic |
---|
| 1110 | //effects are available directly via the Element API |
---|
| 1111 | Ext.Element.addMethods(Ext.Fx); |
---|
| 1112 | })(); |
---|