3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
18 Ext.applyIf(Ext.Element.prototype, {
19 // @private override base Ext.util.Animate mixin for animate for backwards compatibility
20 animate: function(config) {
25 if (Ext.fx.Manager.hasFxBlock(me.id)) {
28 Ext.fx.Manager.queueFx(Ext.create('Ext.fx.Anim', me.anim(config)));
32 // @private override base Ext.util.Animate mixin for animate for backwards compatibility
33 anim: function(config) {
34 if (!Ext.isObject(config)) {
35 return (config) ? {} : false;
39 duration = config.duration || Ext.fx.Anim.prototype.duration,
40 easing = config.easing || 'ease',
43 if (config.stopAnimation) {
47 Ext.applyIf(config, Ext.fx.Manager.getFxDefaults(me.id));
49 // Clear any 'paused' defaults.
50 Ext.fx.Manager.setFxDefaults(me.id, {
56 remove: config.remove,
57 alternate: config.alternate || false,
60 callback: config.callback,
61 listeners: config.listeners,
62 iterations: config.iterations || 1,
65 concurrent: config.concurrent,
66 delay: config.delay || 0,
68 keyframes: config.keyframes,
69 from: config.from || {},
70 to: Ext.apply({}, config)
72 Ext.apply(animConfig.to, config.to);
74 // Anim API properties - backward compat
75 delete animConfig.to.to;
76 delete animConfig.to.from;
77 delete animConfig.to.remove;
78 delete animConfig.to.alternate;
79 delete animConfig.to.keyframes;
80 delete animConfig.to.iterations;
81 delete animConfig.to.listeners;
82 delete animConfig.to.target;
83 delete animConfig.to.paused;
84 delete animConfig.to.callback;
85 delete animConfig.to.scope;
86 delete animConfig.to.duration;
87 delete animConfig.to.easing;
88 delete animConfig.to.concurrent;
89 delete animConfig.to.block;
90 delete animConfig.to.stopAnimation;
91 delete animConfig.to.delay;
96 * Slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide
97 * effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the
98 * Fx class overview for valid anchor point options. Usage:
100 * // default: slide the element in from the top
103 * // custom: slide the element in from the right with a 2-second duration
104 * el.slideIn('r', { duration: 2000 });
106 * // common config options shown with default values
112 * @param {String} [anchor='t'] One of the valid Fx anchor positions
113 * @param {Object} [options] Object literal with any of the Fx config options
114 * @return {Ext.Element} The Element
116 slideIn: function(anchor, obj, slideOut) {
118 elStyle = me.dom.style,
119 beforeAnim, wrapAnim;
121 anchor = anchor || "t";
124 beforeAnim = function() {
125 var animScope = this,
126 listeners = obj.listeners,
127 box, position, restoreSize, wrap, anim;
134 if ((anchor == 't' || anchor == 'b') && box.height === 0) {
135 box.height = me.dom.scrollHeight;
137 else if ((anchor == 'l' || anchor == 'r') && box.width === 0) {
138 box.width = me.dom.scrollWidth;
141 position = me.getPositioning();
142 me.setSize(box.width, box.height);
146 visibility: slideOut ? 'visible' : 'hidden'
149 wrap.setPositioning(position);
150 if (wrap.isStyle('position', 'static')) {
151 wrap.position('relative');
153 me.clearPositioning('auto');
156 // This element is temporarily positioned absolute within its wrapper.
157 // Restore to its default, CSS-inherited visibility setting.
158 // We cannot explicitly poke visibility:visible into its style because that overrides the visibility of the wrap.
164 wrap.setSize(box.width, box.height);
171 width: box.width + 'px',
175 width: box.width + 'px',
176 height: box.height + 'px'
179 elStyle.bottom = '0px';
185 height: box.height + 'px'
188 width: box.width + 'px',
189 height: box.height + 'px'
192 elStyle.right = '0px';
197 x: box.x + box.width,
199 height: box.height + 'px'
203 width: box.width + 'px',
204 height: box.height + 'px'
211 y: box.y + box.height,
212 width: box.width + 'px',
217 width: box.width + 'px',
218 height: box.height + 'px'
231 width: box.width + 'px',
232 height: box.height + 'px'
235 elStyle.bottom = '0px';
236 elStyle.right = '0px';
241 x: box.x + box.width,
247 width: box.width + 'px',
248 height: box.height + 'px'
251 elStyle.right = '0px';
256 x: box.x + box.width,
257 y: box.y + box.height,
264 width: box.width + 'px',
265 height: box.height + 'px'
272 y: box.y + box.height,
278 width: box.width + 'px',
279 height: box.height + 'px'
282 elStyle.bottom = '0px';
287 wrapAnim = Ext.apply({}, obj);
288 delete wrapAnim.listeners;
289 wrapAnim = Ext.create('Ext.fx.Anim', Ext.applyIf(wrapAnim, {
293 from: slideOut ? anim.to : anim.from,
294 to: slideOut ? anim.from : anim.to
297 // In the absence of a callback, this listener MUST be added first
298 wrapAnim.on('afteranimate', function() {
300 me.setPositioning(position);
301 if (obj.useDisplay) {
302 me.setDisplayed(false);
308 me.clearPositioning();
309 me.setPositioning(position);
312 wrap.dom.parentNode.insertBefore(me.dom, wrap.dom);
315 me.setSize(box.width, box.height);
318 // Add configured listeners after
320 wrapAnim.on(listeners);
325 duration: obj.duration ? obj.duration * 2 : 1000,
332 if (wrapAnim && wrapAnim.running) {
344 * Slides the element out of view. An anchor point can be optionally passed to set the end point for the slide
345 * effect. When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will
346 * still take up space in the document. The element must be removed from the DOM using the 'remove' config option if
347 * desired. This function automatically handles wrapping the element with a fixed-size container if needed. See the
348 * Fx class overview for valid anchor point options. Usage:
350 * // default: slide the element out to the top
353 * // custom: slide the element out to the right with a 2-second duration
354 * el.slideOut('r', { duration: 2000 });
356 * // common config options shown with default values
364 * @param {String} [anchor='t'] One of the valid Fx anchor positions
365 * @param {Object} [options] Object literal with any of the Fx config options
366 * @return {Ext.Element} The Element
368 slideOut: function(anchor, o) {
369 return this.slideIn(anchor, o, true);
373 * Fades the element out while slowly expanding it in all directions. When the effect is completed, the element will
374 * be hidden (visibility = 'hidden') but block elements will still take up space in the document. Usage:
379 * // common config options shown with default values
386 * @param {Object} options (optional) Object literal with any of the Fx config options
387 * @return {Ext.Element} The Element
389 puff: function(obj) {
392 obj = Ext.applyIf(obj || {}, {
398 beforeAnim = function() {
402 var box = me.getBox(),
403 fontSize = me.getStyle('fontSize'),
404 position = me.getPositioning();
406 width: box.width * 2,
407 height: box.height * 2,
408 x: box.x - (box.width / 2),
409 y: box.y - (box.height /2),
413 this.on('afteranimate',function() {
415 if (obj.useDisplay) {
416 me.setDisplayed(false);
421 me.setPositioning(position);
422 me.setStyle({fontSize: fontSize});
428 duration: obj.duration,
440 * Blinks the element as if it was clicked and then collapses on its center (similar to switching off a television).
441 * When the effect is completed, the element will be hidden (visibility = 'hidden') but block elements will still
442 * take up space in the document. The element must be removed from the DOM using the 'remove' config option if
448 * // all config options shown with default values
456 * @param {Object} options (optional) Object literal with any of the Fx config options
457 * @return {Ext.Element} The Element
459 switchOff: function(obj) {
463 obj = Ext.applyIf(obj || {}, {
470 beforeAnim = function() {
471 var animScope = this,
477 position = me.getPositioning();
479 keyframe = Ext.create('Ext.fx.Animator', {
481 duration: obj.duration,
489 y: xy[1] + size.height / 2
493 x: xy[0] + size.width / 2
497 keyframe.on('afteranimate', function() {
498 if (obj.useDisplay) {
499 me.setDisplayed(false);
504 me.setPositioning(position);
510 duration: (obj.duration * 2),
521 * Shows a ripple of exploding, attenuating borders to draw attention to an Element. Usage:
523 * // default: a single light blue ripple
526 * // custom: 3 red ripples lasting 3 seconds total
527 * el.frame("#ff0000", 3, { duration: 3 });
529 * // common config options shown with default values
530 * el.frame("#C3DAF9", 1, {
531 * duration: 1 //duration of each individual ripple.
532 * // Note: Easing is not configurable and will be ignored if included
535 * @param {String} [color='C3DAF9'] The color of the border. Should be a 6 char hex color without the leading #
536 * (defaults to light blue).
537 * @param {Number} [count=1] The number of ripples to display
538 * @param {Object} [options] Object literal with any of the Fx config options
539 * @return {Ext.Element} The Element
541 frame : function(color, count, obj){
545 color = color || '#C3DAF9';
549 beforeAnim = function() {
551 var animScope = this,
553 proxy = Ext.getBody().createChild({
555 position : 'absolute',
556 'pointer-events': 'none',
558 border : '0px solid ' + color
562 proxyAnim = Ext.create('Ext.fx.Anim', {
564 duration: obj.duration || 1000,
579 height: box.height + 40,
580 width: box.width + 40
583 proxyAnim.on('afteranimate', function() {
590 duration: (obj.duration * 2) || 2000,
601 * Slides the element while fading it out of view. An anchor point can be optionally passed to set the ending point
602 * of the effect. Usage:
604 * // default: slide the element downward while fading out
607 * // custom: slide the element out to the right with a 2-second duration
608 * el.ghost('r', { duration: 2000 });
610 * // common config options shown with default values
616 * @param {String} [anchor='b'] One of the valid Fx anchor positions
617 * @param {Object} [options] Object literal with any of the Fx config options
618 * @return {Ext.Element} The Element
620 ghost: function(anchor, obj) {
624 anchor = anchor || "b";
625 beforeAnim = function() {
626 var width = me.getWidth(),
627 height = me.getHeight(),
629 position = me.getPositioning(),
635 to.y = xy[1] - height;
638 to.x = xy[0] - width;
641 to.x = xy[0] + width;
644 to.y = xy[1] + height;
647 to.x = xy[0] - width;
648 to.y = xy[1] - height;
651 to.x = xy[0] - width;
652 to.y = xy[1] + height;
655 to.x = xy[0] + width;
656 to.y = xy[1] + height;
659 to.x = xy[0] + width;
660 to.y = xy[1] - height;
664 this.on('afteranimate', function () {
668 me.setPositioning(position);
673 me.animate(Ext.applyIf(obj || {}, {
686 * Highlights the Element by setting a color (applies to the background-color by default, but can be changed using
687 * the "attr" config option) and then fading back to the original color. If no original color is available, you
688 * should provide the "endColor" config option which will be cleared after the animation. Usage:
690 * // default: highlight background to yellow
693 * // custom: highlight foreground text to blue for 2 seconds
694 * el.highlight("0000ff", { attr: 'color', duration: 2000 });
696 * // common config options shown with default values
697 * el.highlight("ffff9c", {
698 * attr: "backgroundColor", //can be any valid CSS property (attribute) that supports a color value
699 * endColor: (current color) or "ffffff",
704 * @param {String} [color='ffff9c'] The highlight color. Should be a 6 char hex color without the leading #
705 * @param {Object} [options] Object literal with any of the Fx config options
706 * @return {Ext.Element} The Element
708 highlight: function(color, o) {
712 restore, to, attr, lns, event, fn;
715 lns = o.listeners || {};
716 attr = o.attr || 'backgroundColor';
717 from[attr] = color || 'ffff9c';
721 to[attr] = o.endColor || me.getColor(attr, 'ffffff', '');
727 // Don't apply directly on lns, since we reference it in our own callbacks below
728 o.listeners = Ext.apply(Ext.apply({}, lns), {
729 beforeanimate: function() {
730 restore = dom.style[attr];
734 event = lns.beforeanimate;
736 fn = event.fn || event;
737 return fn.apply(event.scope || lns.scope || window, arguments);
740 afteranimate: function() {
742 dom.style[attr] = restore;
745 event = lns.afteranimate;
747 fn = event.fn || event;
748 fn.apply(event.scope || lns.scope || window, arguments);
753 me.animate(Ext.apply({}, o, {
764 * Creates a pause before any subsequent queued effects begin. If there are no effects queued after the pause it will
765 * have no effect. Usage:
769 * @param {Number} seconds The length of time to pause (in seconds)
770 * @return {Ext.Element} The Element
772 pause: function(ms) {
774 Ext.fx.Manager.setFxDefaults(me.id, {
781 * Fade an element in (from transparent to opaque). The ending opacity can be specified using the `opacity`
782 * config option. Usage:
784 * // default: fade in from opacity 0 to 100%
787 * // custom: fade in from opacity 0 to 75% over 2 seconds
788 * el.fadeIn({ opacity: .75, duration: 2000});
790 * // common config options shown with default values
792 * opacity: 1, //can be any value between 0 and 1 (e.g. .5)
797 * @param {Object} options (optional) Object literal with any of the Fx config options
798 * @return {Ext.Element} The Element
800 fadeIn: function(o) {
801 this.animate(Ext.apply({}, o, {
808 * Fade an element out (from opaque to transparent). The ending opacity can be specified using the `opacity`
809 * config option. Note that IE may require `useDisplay:true` in order to redisplay correctly.
812 * // default: fade out from the element's current opacity to 0
815 * // custom: fade out from the element's current opacity to 25% over 2 seconds
816 * el.fadeOut({ opacity: .25, duration: 2000});
818 * // common config options shown with default values
820 * opacity: 0, //can be any value between 0 and 1 (e.g. .5)
827 * @param {Object} options (optional) Object literal with any of the Fx config options
828 * @return {Ext.Element} The Element
830 fadeOut: function(o) {
831 this.animate(Ext.apply({}, o, {
839 * Animates the transition of an element's dimensions from a starting height/width to an ending height/width. This
840 * method is a convenience implementation of {@link #shift}. Usage:
842 * // change height and width to 100x100 pixels
843 * el.scale(100, 100);
845 * // common config options shown with default values. The height and width will default to
846 * // the element's existing values if passed as null.
849 * [element's height], {
855 * @param {Number} width The new width (pass undefined to keep the original width)
856 * @param {Number} height The new height (pass undefined to keep the original height)
857 * @param {Object} options (optional) Object literal with any of the Fx config options
858 * @return {Ext.Element} The Element
860 scale: function(w, h, o) {
861 this.animate(Ext.apply({}, o, {
870 * Animates the transition of any combination of an element's dimensions, xy position and/or opacity. Any of these
871 * properties not specified in the config object will not be changed. This effect requires that at least one new
872 * dimension, position or opacity setting must be passed in on the config object in order for the function to have
875 * // slide the element horizontally to x position 200 while changing the height and opacity
876 * el.shift({ x: 200, height: 50, opacity: .8 });
878 * // common config options shown with default values.
880 * width: [element's width],
881 * height: [element's height],
882 * x: [element's x position],
883 * y: [element's y position],
884 * opacity: [element's opacity],
889 * @param {Object} options Object literal with any of the Fx config options
890 * @return {Ext.Element} The Element
892 shift: function(config) {
893 this.animate(config);