/** * @class Ext.Element */ /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element * @static * @type Number */ Ext.Element.VISIBILITY = 1; /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element * @static * @type Number */ Ext.Element.DISPLAY = 2; /** * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen) * to hide element. * @static * @type Number */ Ext.Element.OFFSETS = 3; Ext.Element.ASCLASS = 4; /** * Defaults to 'x-hide-nosize' * @static * @type String */ Ext.Element.visibilityCls = 'x-hide-nosize'; Ext.Element.addMethods(function(){ var El = Ext.Element, OPACITY = "opacity", VISIBILITY = "visibility", DISPLAY = "display", HIDDEN = "hidden", OFFSETS = "offsets", ASCLASS = "asclass", NONE = "none", NOSIZE = 'nosize', ORIGINALDISPLAY = 'originalDisplay', VISMODE = 'visibilityMode', ISVISIBLE = 'isVisible', data = El.data, getDisplay = function(dom){ var d = data(dom, ORIGINALDISPLAY); if(d === undefined){ data(dom, ORIGINALDISPLAY, d = ''); } return d; }, getVisMode = function(dom){ var m = data(dom, VISMODE); if(m === undefined){ data(dom, VISMODE, m = 1); } return m; }; return { /** * The element's default display mode (defaults to "") * @type String */ originalDisplay : "", visibilityMode : 1, /** * Sets the element's visibility mode. When setVisible() is called it * will use this to determine whether to set the visibility or the display property. * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY * @return {Ext.Element} this */ setVisibilityMode : function(visMode){ data(this.dom, VISMODE, visMode); return this; }, /** * Perform custom animation on this element. * <div><ul class="mdetail-params"> * <li><u>Animation Properties</u></li> * * <p>The Animation Control Object enables gradual transitions for any member of an * element's style object that takes a numeric value including but not limited to * these properties:</p><div><ul class="mdetail-params"> * <li><tt>bottom, top, left, right</tt></li> * <li><tt>height, width</tt></li> * <li><tt>margin, padding</tt></li> * <li><tt>borderWidth</tt></li> * <li><tt>opacity</tt></li> * <li><tt>fontSize</tt></li> * <li><tt>lineHeight</tt></li> * </ul></div> * * * <li><u>Animation Property Attributes</u></li> * * <p>Each Animation Property is a config object with optional properties:</p> * <div><ul class="mdetail-params"> * <li><tt>by</tt>* : relative change - start at current value, change by this value</li> * <li><tt>from</tt> : ignore current value, start from this value</li> * <li><tt>to</tt>* : start at current value, go to this value</li> * <li><tt>unit</tt> : any allowable unit specification</li> * <p>* do not specify both <tt>to</tt> and <tt>by</tt> for an animation property</p> * </ul></div> * * <li><u>Animation Types</u></li> * * <p>The supported animation types:</p><div><ul class="mdetail-params"> * <li><tt>'run'</tt> : Default * <pre><code> var el = Ext.get('complexEl'); el.animate( // animation control object { borderWidth: {to: 3, from: 0}, opacity: {to: .3, from: 1}, height: {to: 50, from: el.getHeight()}, width: {to: 300, from: el.getWidth()}, top : {by: - 100, unit: 'px'}, }, 0.35, // animation duration null, // callback 'easeOut', // easing method 'run' // animation type ('run','color','motion','scroll') ); * </code></pre> * </li> * <li><tt>'color'</tt> * <p>Animates transition of background, text, or border colors.</p> * <pre><code> el.animate( // animation control object { color: { to: '#06e' }, backgroundColor: { to: '#e06' } }, 0.35, // animation duration null, // callback 'easeOut', // easing method 'color' // animation type ('run','color','motion','scroll') ); * </code></pre> * </li> * * <li><tt>'motion'</tt> * <p>Animates the motion of an element to/from specific points using optional bezier * way points during transit.</p> * <pre><code> el.animate( // animation control object { borderWidth: {to: 3, from: 0}, opacity: {to: .3, from: 1}, height: {to: 50, from: el.getHeight()}, width: {to: 300, from: el.getWidth()}, top : {by: - 100, unit: 'px'}, points: { to: [50, 100], // go to this point control: [ // optional bezier way points [ 600, 800], [-100, 200] ] } }, 3000, // animation duration (milliseconds!) null, // callback 'easeOut', // easing method 'motion' // animation type ('run','color','motion','scroll') ); * </code></pre> * </li> * <li><tt>'scroll'</tt> * <p>Animate horizontal or vertical scrolling of an overflowing page element.</p> * <pre><code> el.animate( // animation control object { scroll: {to: [400, 300]} }, 0.35, // animation duration null, // callback 'easeOut', // easing method 'scroll' // animation type ('run','color','motion','scroll') ); * </code></pre> * </li> * </ul></div> * * </ul></div> * * @param {Object} args The animation control args * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to <tt>.35</tt>) * @param {Function} onComplete (optional) Function to call when animation completes * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to <tt>'easeOut'</tt>) * @param {String} animType (optional) <tt>'run'</tt> is the default. Can also be <tt>'color'</tt>, * <tt>'motion'</tt>, or <tt>'scroll'</tt> * @return {Ext.Element} this */ animate : function(args, duration, onComplete, easing, animType){ this.anim(args, {duration: duration, callback: onComplete, easing: easing}, animType); return this; }, /* * @private Internal animation call */ anim : function(args, opt, animType, defaultDur, defaultEase, cb){ animType = animType || 'run'; opt = opt || {}; var me = this, anim = Ext.lib.Anim[animType]( me.dom, args, (opt.duration || defaultDur) || .35, (opt.easing || defaultEase) || 'easeOut', function(){ if(cb) cb.call(me); if(opt.callback) opt.callback.call(opt.scope || me, me, opt); }, me ); opt.anim = anim; return anim; }, // private legacy anim prep preanim : function(a, i){ return !a[i] ? false : (typeof a[i] == 'object' ? a[i]: {duration: a[i+1], callback: a[i+2], easing: a[i+3]}); }, /** * Checks whether the element is currently visible using both visibility and display properties. * @return {Boolean} True if the element is currently visible, else false */ isVisible : function() { var me = this, dom = me.dom, visible = data(dom, ISVISIBLE); if(typeof visible == 'boolean'){ //return the cached value if registered return visible; } //Determine the current state based on display states visible = !me.isStyle(VISIBILITY, HIDDEN) && !me.isStyle(DISPLAY, NONE) && !((getVisMode(dom) == El.ASCLASS) && me.hasClass(me.visibilityCls || El.visibilityCls)); data(dom, ISVISIBLE, visible); return visible; }, /** * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property. * @param {Boolean} visible Whether the element is visible * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object * @return {Ext.Element} this */ setVisible : function(visible, animate){ var me = this, isDisplay, isVisibility, isOffsets, isNosize, dom = me.dom, visMode = getVisMode(dom); // hideMode string override if (typeof animate == 'string'){ switch (animate) { case DISPLAY: visMode = El.DISPLAY; break; case VISIBILITY: visMode = El.VISIBILITY; break; case OFFSETS: visMode = El.OFFSETS; break; case NOSIZE: case ASCLASS: visMode = El.ASCLASS; break; } me.setVisibilityMode(visMode); animate = false; } if (!animate || !me.anim) { if(visMode == El.ASCLASS ){ me[visible?'removeClass':'addClass'](me.visibilityCls || El.visibilityCls); } else if (visMode == El.DISPLAY){ return me.setDisplayed(visible); } else if (visMode == El.OFFSETS){ if (!visible){ me.hideModeStyles = { position: me.getStyle('position'), top: me.getStyle('top'), left: me.getStyle('left') }; me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'}); } else { me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''}); delete me.hideModeStyles; } }else{ me.fixDisplay(); dom.style.visibility = visible ? "visible" : HIDDEN; } }else{ // closure for composites if(visible){ me.setOpacity(.01); me.setVisible(true); } me.anim({opacity: { to: (visible?1:0) }}, me.preanim(arguments, 1), null, .35, 'easeIn', function(){ visible || me.setVisible(false).setOpacity(1); }); } data(dom, ISVISIBLE, visible); //set logical visibility state return me; }, /** * @private * Determine if the Element has a relevant height and width available based * upon current logical visibility state */ hasMetrics : function(){ var dom = this.dom; return this.isVisible() || (getVisMode(dom) == El.VISIBILITY); }, /** * Toggles the element's visibility or display, depending on visibility mode. * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object * @return {Ext.Element} this */ toggle : function(animate){ var me = this; me.setVisible(!me.isVisible(), me.preanim(arguments, 0)); return me; }, /** * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true. * @param {Mixed} value Boolean value to display the element using its default display, or a string to set the display directly. * @return {Ext.Element} this */ setDisplayed : function(value) { if(typeof value == "boolean"){ value = value ? getDisplay(this.dom) : NONE; } this.setStyle(DISPLAY, value); return this; }, // private fixDisplay : function(){ var me = this; if(me.isStyle(DISPLAY, NONE)){ me.setStyle(VISIBILITY, HIDDEN); me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default if(me.isStyle(DISPLAY, NONE)){ // if that fails, default to block me.setStyle(DISPLAY, "block"); } } }, /** * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object * @return {Ext.Element} this */ hide : function(animate){ // hideMode override if (typeof animate == 'string'){ this.setVisible(false, animate); return this; } this.setVisible(false, this.preanim(arguments, 0)); return this; }, /** * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}. * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object * @return {Ext.Element} this */ show : function(animate){ // hideMode override if (typeof animate == 'string'){ this.setVisible(true, animate); return this; } this.setVisible(true, this.preanim(arguments, 0)); return this; } }; }());