/** * @class Ext.Layer * @extends Ext.core.Element * An extended {@link Ext.core.Element} object that supports a shadow and shim, constrain to viewport and * automatic maintaining of shadow/shim positions. * @cfg {Boolean} shim False to disable the iframe shim in browsers which need one (defaults to true) * @cfg {String/Boolean} shadow True to automatically create an {@link Ext.Shadow}, or a string indicating the * shadow's display {@link Ext.Shadow#mode}. False to disable the shadow. (defaults to false) * @cfg {Object} dh DomHelper object config to create element with (defaults to {tag: 'div', cls: 'x-layer'}). * @cfg {Boolean} constrain False to disable constrain to viewport (defaults to true) * @cfg {String} cls CSS class to add to the element * @cfg {Number} zindex Starting z-index (defaults to 11000) * @cfg {Number} shadowOffset Number of pixels to offset the shadow (defaults to 4) * @cfg {Boolean} useDisplay * Defaults to use css offsets to hide the Layer. Specify <tt>true</tt> * to use css style <tt>'display:none;'</tt> to hide the Layer. * @cfg {String} visibilityCls The CSS class name to add in order to hide this Layer if this layer * is configured with <code>{@link #hideMode}: 'asclass'</code> * @cfg {String} hideMode * A String which specifies how this Layer will be hidden. * Values may be<div class="mdetail-params"><ul> * <li><code>'display'</code> : The Component will be hidden using the <code>display: none</code> style.</li> * <li><code>'visibility'</code> : The Component will be hidden using the <code>visibility: hidden</code> style.</li> * <li><code>'offsets'</code> : The Component will be hidden by absolutely positioning it out of the visible area of the document. This * is useful when a hidden Component must maintain measurable dimensions. Hiding using <code>display</code> results * in a Component having zero dimensions.</li></ul></div> * @constructor * @param {Object} config An object with config options. * @param {String/HTMLElement} existingEl (optional) Uses an existing DOM element. If the element is not found it creates it. */ Ext.define('Ext.Layer', { uses: ['Ext.Shadow'], // shims are shared among layer to keep from having 100 iframes statics: { shims: [] }, extend: 'Ext.core.Element', constructor: function(config, existingEl) { config = config || {}; var me = this, dh = Ext.core.DomHelper, cp = config.parentEl, pel = cp ? Ext.getDom(cp) : document.body, hm = config.hideMode; if (existingEl) { me.dom = Ext.getDom(existingEl); } if (!me.dom) { me.dom = dh.append(pel, config.dh || { tag: 'div', cls: Ext.baseCSSPrefix + 'layer' }); } else { me.addCls(Ext.baseCSSPrefix + 'layer'); if (!me.dom.parentNode) { pel.appendChild(me.dom); } } if (config.cls) { me.addCls(config.cls); } me.constrain = config.constrain !== false; // Allow Components to pass their hide mode down to the Layer if they are floating. // Otherwise, allow useDisplay to override the default hiding method which is visibility. // TODO: Have ExtJS's Element implement visibilityMode by using classes as in Mobile. if (hm) { me.setVisibilityMode(Ext.core.Element[hm.toUpperCase()]); if (me.visibilityMode == Ext.core.Element.ASCLASS) { me.visibilityCls = config.visibilityCls; } } else if (config.useDisplay) { me.setVisibilityMode(Ext.core.Element.DISPLAY); } else { me.setVisibilityMode(Ext.core.Element.VISIBILITY); } if (config.id) { me.id = me.dom.id = config.id; } else { me.id = Ext.id(me.dom); } me.position('absolute'); if (config.shadow) { me.shadowOffset = config.shadowOffset || 4; me.shadow = Ext.create('Ext.Shadow', { offset: me.shadowOffset, mode: config.shadow }); me.disableShadow(); } else { me.shadowOffset = 0; } me.useShim = config.shim !== false && Ext.useShims; if (config.hidden === true) { me.hide(); } else { this.show(); } }, getZIndex: function() { return parseInt((this.getShim() || this).getStyle('z-index'), 10); }, getShim: function() { var me = this, shim, pn; if (!me.useShim) { return null; } if (!me.shim) { shim = me.self.shims.shift(); if (!shim) { shim = me.createShim(); shim.enableDisplayMode('block'); shim.hide(); } pn = me.dom.parentNode; if (shim.dom.parentNode != pn) { pn.insertBefore(shim.dom, me.dom); } me.shim = shim; } return me.shim; }, hideShim: function() { if (this.shim) { this.shim.setDisplayed(false); this.self.shims.push(this.shim); delete this.shim; } }, disableShadow: function() { if (this.shadow) { this.shadowDisabled = true; this.shadow.hide(); this.lastShadowOffset = this.shadowOffset; this.shadowOffset = 0; } }, enableShadow: function(show) { if (this.shadow) { this.shadowDisabled = false; this.shadowOffset = this.lastShadowOffset; delete this.lastShadowOffset; if (show) { this.sync(true); } } }, /** * @private * <p>Synchronize this Layer's associated elements, the shadow, and possibly the shim.</p> * <p>This code can execute repeatedly in milliseconds, * eg: dragging a Component configured liveDrag: true, or which has no ghost method * so code size was sacrificed for efficiency (e.g. no getBox/setBox, no XY calls)</p> * @param {Boolean} doShow Pass true to ensure that the shadow is shown. */ sync: function(doShow) { var me = this, shadow = me.shadow, shadowPos, shimStyle, shadowSize; if (!this.updating && this.isVisible() && (shadow || this.useShim)) { var shim = this.getShim(), l = this.getLeft(true), t = this.getTop(true), w = this.getWidth(), h = this.getHeight(), shimIndex; if (shadow && !this.shadowDisabled) { if (doShow && !shadow.isVisible()) { shadow.show(this); } else { shadow.realign(l, t, w, h); } if (shim) { // TODO: Determine how the shims zIndex is above the layer zIndex at this point shimIndex = shim.getStyle('z-index'); if (shimIndex > me.zindex) { me.shim.setStyle('z-index', me.zindex - 2); } shim.show(); // fit the shim behind the shadow, so it is shimmed too if (shadow.isVisible()) { shadowPos = shadow.el.getXY(); shimStyle = shim.dom.style; shadowSize = shadow.el.getSize(); shimStyle.left = (shadowPos[0]) + 'px'; shimStyle.top = (shadowPos[1]) + 'px'; shimStyle.width = (shadowSize.width) + 'px'; shimStyle.height = (shadowSize.height) + 'px'; } else { shim.setSize(w, h); shim.setLeftTop(l, t); } } } else if (shim) { // TODO: Determine how the shims zIndex is above the layer zIndex at this point shimIndex = shim.getStyle('z-index'); if (shimIndex > me.zindex) { me.shim.setStyle('z-index', me.zindex - 2); } shim.show(); shim.setSize(w, h); shim.setLeftTop(l, t); } } return this; }, remove: function() { this.hideUnders(); this.callParent(); }, // private beginUpdate: function() { this.updating = true; }, // private endUpdate: function() { this.updating = false; this.sync(true); }, // private hideUnders: function() { if (this.shadow) { this.shadow.hide(); } this.hideShim(); }, // private constrainXY: function() { if (this.constrain) { var vw = Ext.core.Element.getViewWidth(), vh = Ext.core.Element.getViewHeight(), s = Ext.getDoc().getScroll(), xy = this.getXY(), x = xy[0], y = xy[1], so = this.shadowOffset, w = this.dom.offsetWidth + so, h = this.dom.offsetHeight + so, moved = false; // only move it if it needs it // first validate right/bottom if ((x + w) > vw + s.left) { x = vw - w - so; moved = true; } if ((y + h) > vh + s.top) { y = vh - h - so; moved = true; } // then make sure top/left isn't negative if (x < s.left) { x = s.left; moved = true; } if (y < s.top) { y = s.top; moved = true; } if (moved) { Ext.Layer.superclass.setXY.call(this, [x, y]); this.sync(); } } return this; }, getConstrainOffset: function() { return this.shadowOffset; }, // overridden Element method setVisible: function(visible, animate, duration, callback, easing) { var me = this, cb; // post operation processing cb = function() { if (visible) { me.sync(true); } if (callback) { callback(); } }; // Hide shadow and shim if hiding if (!visible) { this.hideUnders(true); } this.callParent([visible, animate, duration, callback, easing]); if (!animate) { cb(); } return this; }, // private beforeFx: function() { this.beforeAction(); return this.callParent(arguments); }, // private afterFx: function() { this.callParent(arguments); this.sync(this.isVisible()); }, // private beforeAction: function() { if (!this.updating && this.shadow) { this.shadow.hide(); } }, // overridden Element method setLeft: function(left) { this.callParent(arguments); return this.sync(); }, setTop: function(top) { this.callParent(arguments); return this.sync(); }, setLeftTop: function(left, top) { this.callParent(arguments); return this.sync(); }, setXY: function(xy, animate, duration, callback, easing) { // Callback will restore shadow state and call the passed callback callback = this.createCB(callback); this.fixDisplay(); this.beforeAction(); this.callParent([xy, animate, duration, callback, easing]); if (!animate) { callback(); } return this; }, // private createCB: function(callback) { var me = this, showShadow = me.shadow && me.shadow.isVisible(); return function() { me.constrainXY(); me.sync(showShadow); if (callback) { callback(); } }; }, // overridden Element method setX: function(x, animate, duration, callback, easing) { this.setXY([x, this.getY()], animate, duration, callback, easing); return this; }, // overridden Element method setY: function(y, animate, duration, callback, easing) { this.setXY([this.getX(), y], animate, duration, callback, easing); return this; }, // overridden Element method setSize: function(w, h, animate, duration, callback, easing) { // Callback will restore shadow state and call the passed callback callback = this.createCB(callback); this.beforeAction(); this.callParent([w, h, animate, duration, callback, easing]); if (!animate) { callback(); } return this; }, // overridden Element method setWidth: function(w, animate, duration, callback, easing) { // Callback will restore shadow state and call the passed callback callback = this.createCB(callback); this.beforeAction(); this.callParent([w, animate, duration, callback, easing]); if (!animate) { callback(); } return this; }, // overridden Element method setHeight: function(h, animate, duration, callback, easing) { // Callback will restore shadow state and call the passed callback callback = this.createCB(callback); this.beforeAction(); this.callParent([h, animate, duration, callback, easing]); if (!animate) { callback(); } return this; }, // overridden Element method setBounds: function(x, y, width, height, animate, duration, callback, easing) { // Callback will restore shadow state and call the passed callback callback = this.createCB(callback); this.beforeAction(); if (!animate) { Ext.Layer.superclass.setXY.call(this, [x, y]); Ext.Layer.superclass.setSize.call(this, width, height); callback(); } else { this.callParent([x, y, width, height, animate, duration, callback, easing]); } return this; }, /** * <p>Sets the z-index of this layer and adjusts any shadow and shim z-indexes. The layer z-index is automatically * incremented depending upon the presence of a shim or a shadow in so that it always shows above those two associated elements.</p> * <p>Any shim, will be assigned the passed z-index. A shadow will be assigned the next highet z-index, and the Layer's * element will receive the highest z-index. * @param {Number} zindex The new z-index to set * @return {this} The Layer */ setZIndex: function(zindex) { this.zindex = zindex; if (this.getShim()) { this.shim.setStyle('z-index', zindex++); } if (this.shadow) { this.shadow.setZIndex(zindex++); } this.setStyle('z-index', zindex); return this; } });