/**
* @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;
}
});