/*
This file is part of Ext JS 4.2
Copyright (c) 2011-2013 Sencha Inc
Contact: http://www.sencha.com/contact
GNU General Public License Usage
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.
If you are unsure which license is appropriate for your use, please contact the sales department
at http://www.sencha.com/contact.
Build date: 2013-05-16 14:36:50 (f9be68accb407158ba2b1be2c226a6ce1f649314)
*/
/**
* Simple class that can provide a shadow effect for any element. Note that the element
* MUST be absolutely positioned, and the shadow does not provide any shimming. This
* should be used only in simple cases - for more advanced functionality that can also
* provide the same shadow effect, see the {@link Ext.Layer} class.
*/
Ext.define('Ext.Shadow', {
requires: ['Ext.ShadowPool'],
localXYNames: {
get: 'getLocalXY',
set: 'setLocalXY'
},
/**
* Creates new Shadow.
* @param {Object} config (optional) Config object.
*/
constructor: function(config) {
var me = this,
adjusts,
offset,
rad;
Ext.apply(me, config);
if (!Ext.isString(me.mode)) {
me.mode = me.defaultMode;
}
offset = me.offset;
rad = Math.floor(offset / 2);
me.opacity = 50;
switch (me.mode.toLowerCase()) {
// all this hideous nonsense calculates the various offsets for shadows
case "drop":
if (Ext.supports.CSS3BoxShadow) {
adjusts = {
t: offset,
l: offset,
h: -offset,
w: -offset
};
}
else {
adjusts = {
t: -rad,
l: -rad,
h: -rad,
w: -rad
};
}
break;
case "sides":
if (Ext.supports.CSS3BoxShadow) {
adjusts = {
t: offset,
l: 0,
h: -offset,
w: 0
};
}
else {
adjusts = {
t: - (1 + rad),
l: 1 + rad - 2 * offset,
h: -1,
w: rad - 1
};
}
break;
case "frame":
if (Ext.supports.CSS3BoxShadow) {
adjusts = {
t: 0,
l: 0,
h: 0,
w: 0
};
}
else {
adjusts = {
t: 1 + rad - 2 * offset,
l: 1 + rad - 2 * offset,
h: offset - rad - 1,
w: offset - rad - 1
};
}
break;
case "bottom":
if (Ext.supports.CSS3BoxShadow) {
adjusts = {
t: offset,
l: 0,
h: -offset,
w: 0
};
}
else {
adjusts = {
t: offset,
l: 0,
h: 0,
w: 0
};
}
break;
}
me.adjusts = adjusts;
},
/**
* @private
* Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;
* @return {Number[]} Top, right, bottom and left shadow size.
*/
getShadowSize: function() {
var me = this,
offset = me.el ? me.offset : 0,
result = [offset, offset, offset, offset],
mode = me.mode.toLowerCase();
// There are only offsets if the shadow element is present.
if (me.el && mode !== 'frame') {
result[0] = 0;
if (mode == 'drop') {
result[3] = 0;
}
}
return result;
},
/**
* @cfg {String} mode
* The shadow display mode. Supports the following options:
*
* - sides : Shadow displays on both sides and bottom only
* - frame : Shadow displays equally on all four sides
* - drop : Traditional bottom-right drop shadow
*/
/**
* @cfg {Number} offset
* The number of pixels to offset the shadow from the element
*/
offset: 4,
// private
defaultMode: "drop",
// private - CSS property to use to set the box shadow
boxShadowProperty: (function() {
var property = 'boxShadow',
style = document.documentElement.style;
if (!('boxShadow' in style)) {
if ('WebkitBoxShadow' in style) {
// Safari prior to version 5.1 and Chrome prior to version 10
property = 'WebkitBoxShadow';
}
else if ('MozBoxShadow' in style) {
// FF 3.5 & 3.6
property = 'MozBoxShadow';
}
}
return property;
}()),
/**
* Displays the shadow under the target element
* @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
*/
show: function(target) {
var me = this,
index, xy;
target = Ext.get(target);
// DOM reads first...
index = (parseInt(target.getStyle("z-index"), 10) - 1) || 0;
xy = target[me.localXYNames.get]();
// DOM writes...
if (!me.el) {
me.el = Ext.ShadowPool.pull();
// Shadow elements are shared, so fix position to match current owner
if (me.fixed) {
me.el.dom.style.position = 'fixed';
} else {
me.el.dom.style.position = '';
}
if (me.el.dom.nextSibling != target.dom) {
me.el.insertBefore(target);
}
}
me.el.setStyle("z-index", me.zIndex || index);
if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
me.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
}
me.realign(
xy[0],
xy[1],
target.dom.offsetWidth,
target.dom.offsetHeight
);
me.el.dom.style.display = "block";
},
/**
* Returns true if the shadow is visible, else false
*/
isVisible: function() {
return this.el ? true: false;
},
/**
* Direct alignment when values are already available. Show must be called at least once before
* calling this method to ensure it is initialized.
* @param {Number} left The target element left position
* @param {Number} top The target element top position
* @param {Number} width The target element width
* @param {Number} height The target element height
*/
realign: function(l, t, targetWidth, targetHeight) {
if (!this.el) {
return;
}
var adjusts = this.adjusts,
el = this.el,
targetStyle = el.dom.style,
shadowWidth,
shadowHeight,
sws,
shs;
el[this.localXYNames.set](l + adjusts.l, t + adjusts.t);
shadowWidth = Math.max(targetWidth + adjusts.w, 0);
shadowHeight = Math.max(targetHeight + adjusts.h, 0);
sws = shadowWidth + "px";
shs = shadowHeight + "px";
if (targetStyle.width != sws || targetStyle.height != shs) {
targetStyle.width = sws;
targetStyle.height = shs;
if (Ext.supports.CSS3BoxShadow) {
targetStyle[this.boxShadowProperty] = '0 0 ' + (this.offset + 2) + 'px #888';
}
}
},
/**
* Hides this shadow
*/
hide: function() {
var me = this;
if (me.el) {
me.el.dom.style.display = "none";
Ext.ShadowPool.push(me.el);
delete me.el;
}
},
/**
* Adjust the z-index of this shadow
* @param {Number} zindex The new z-index
*/
setZIndex: function(z) {
this.zIndex = z;
if (this.el) {
this.el.setStyle("z-index", z);
}
},
/**
* Sets the opacity of the shadow
* @param {Number} opacity The opacity
*/
setOpacity: function(opacity){
if (this.el) {
if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
opacity = Math.floor(opacity * 100 / 2) / 100;
}
this.opacity = opacity;
this.el.setOpacity(opacity);
}
}
});
|
Download
