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.
19 * Visibility mode constant for use with {@link #setVisibilityMode}. Use visibility to hide element
23 Ext.Element.VISIBILITY = 1;
25 * Visibility mode constant for use with {@link #setVisibilityMode}. Use display to hide element
29 Ext.Element.DISPLAY = 2;
32 * Visibility mode constant for use with {@link #setVisibilityMode}. Use offsets (x and y positioning offscreen)
37 Ext.Element.OFFSETS = 3;
40 Ext.Element.ASCLASS = 4;
43 * Defaults to 'x-hide-nosize'
47 Ext.Element.visibilityCls = Ext.baseCSSPrefix + 'hide-nosize';
49 Ext.Element.addMethods(function(){
52 VISIBILITY = "visibility",
59 ORIGINALDISPLAY = 'originalDisplay',
60 VISMODE = 'visibilityMode',
61 ISVISIBLE = 'isVisible',
63 getDisplay = function(dom){
64 var d = data(dom, ORIGINALDISPLAY);
66 data(dom, ORIGINALDISPLAY, d = '');
70 getVisMode = function(dom){
71 var m = data(dom, VISMODE);
73 data(dom, VISMODE, m = 1);
80 * @property {String} originalDisplay
81 * The element's default display mode
87 * Sets the element's visibility mode. When setVisible() is called it
88 * will use this to determine whether to set the visibility or the display property.
89 * @param {Number} visMode Ext.Element.VISIBILITY or Ext.Element.DISPLAY
90 * @return {Ext.Element} this
92 setVisibilityMode : function(visMode){
93 data(this.dom, VISMODE, visMode);
98 * Checks whether the element is currently visible using both visibility and display properties.
99 * @return {Boolean} True if the element is currently visible, else false
101 isVisible : function() {
104 visible = data(dom, ISVISIBLE);
106 if(typeof visible == 'boolean'){ //return the cached value if registered
109 //Determine the current state based on display states
110 visible = !me.isStyle(VISIBILITY, HIDDEN) &&
111 !me.isStyle(DISPLAY, NONE) &&
112 !((getVisMode(dom) == El.ASCLASS) && me.hasCls(me.visibilityCls || El.visibilityCls));
114 data(dom, ISVISIBLE, visible);
119 * Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
120 * the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
121 * @param {Boolean} visible Whether the element is visible
122 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
123 * @return {Ext.Element} this
125 setVisible : function(visible, animate){
126 var me = this, isDisplay, isVisibility, isOffsets, isNosize,
128 visMode = getVisMode(dom);
131 // hideMode string override
132 if (typeof animate == 'string'){
135 visMode = El.DISPLAY;
138 visMode = El.VISIBILITY;
141 visMode = El.OFFSETS;
145 visMode = El.ASCLASS;
148 me.setVisibilityMode(visMode);
152 if (!animate || !me.anim) {
153 if(visMode == El.ASCLASS ){
155 me[visible?'removeCls':'addCls'](me.visibilityCls || El.visibilityCls);
157 } else if (visMode == El.DISPLAY){
159 return me.setDisplayed(visible);
161 } else if (visMode == El.OFFSETS){
164 // Remember position for restoring, if we are not already hidden by offsets.
165 if (!me.hideModeStyles) {
166 me.hideModeStyles = {
167 position: me.getStyle('position'),
168 top: me.getStyle('top'),
169 left: me.getStyle('left')
172 me.applyStyles({position: 'absolute', top: '-10000px', left: '-10000px'});
175 // Only "restore" as position if we have actually been hidden using offsets.
176 // Calling setVisible(true) on a positioned element should not reposition it.
177 else if (me.hideModeStyles) {
178 me.applyStyles(me.hideModeStyles || {position: '', top: '', left: ''});
179 delete me.hideModeStyles;
184 // Show by clearing visibility style. Explicitly setting to "visible" overrides parent visibility setting.
185 dom.style.visibility = visible ? '' : HIDDEN;
188 // closure for composites
193 if (!Ext.isObject(animate)) {
199 me.animate(Ext.applyIf({
200 callback: function() {
201 visible || me.setVisible(false).setOpacity(1);
204 opacity: (visible) ? 1 : 0
208 data(dom, ISVISIBLE, visible); //set logical visibility state
215 * Determine if the Element has a relevant height and width available based
216 * upon current logical visibility state
218 hasMetrics : function(){
220 return this.isVisible() || (getVisMode(dom) == El.OFFSETS) || (getVisMode(dom) == El.VISIBILITY);
224 * Toggles the element's visibility or display, depending on visibility mode.
225 * @param {Boolean/Object} animate (optional) True for the default animation, or a standard Element animation config object
226 * @return {Ext.Element} this
228 toggle : function(animate){
230 me.setVisible(!me.isVisible(), me.anim(animate));
235 * Sets the CSS display property. Uses originalDisplay if the specified value is a boolean true.
236 * @param {Boolean/String} value Boolean value to display the element using its default display, or a string to set the display directly.
237 * @return {Ext.Element} this
239 setDisplayed : function(value) {
240 if(typeof value == "boolean"){
241 value = value ? getDisplay(this.dom) : NONE;
243 this.setStyle(DISPLAY, value);
248 fixDisplay : function(){
250 if (me.isStyle(DISPLAY, NONE)) {
251 me.setStyle(VISIBILITY, HIDDEN);
252 me.setStyle(DISPLAY, getDisplay(this.dom)); // first try reverting to default
253 if (me.isStyle(DISPLAY, NONE)) { // if that fails, default to block
254 me.setStyle(DISPLAY, "block");
260 * Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
261 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
262 * @return {Ext.Element} this
264 hide : function(animate){
266 if (typeof animate == 'string'){
267 this.setVisible(false, animate);
270 this.setVisible(false, this.anim(animate));
275 * Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
276 * @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
277 * @return {Ext.Element} this
279 show : function(animate){
281 if (typeof animate == 'string'){
282 this.setVisible(true, animate);
285 this.setVisible(true, this.anim(animate));