/*!
 * Ext JS Library 3.3.0
 * Copyright(c) 2006-2010 Ext JS, Inc.
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
/**
 * @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. *
* * @param {Object} args The animation control args * @param {Float} duration (optional) How long the animation lasts in seconds (defaults to .35) * @param {Function} onComplete (optional) Function to call when animation completes * @param {String} easing (optional) {@link Ext.Fx#easing} method to use (defaults to 'easeOut') * @param {String} animType (optional) 'run' is the default. Can also be 'color', * 'motion', or 'scroll' * @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; } }; }());