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.
17 * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
18 * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
19 * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
21 Ext.define('Ext.Shadow', {
22 requires: ['Ext.ShadowPool'],
26 * @param {Object} config (optional) Config object.
28 constructor: function(config) {
36 Ext.apply(me, config);
37 if (!Ext.isString(me.mode)) {
38 me.mode = me.defaultMode;
41 rad = Math.floor(offset / 2);
43 switch (me.mode.toLowerCase()) {
44 // all this hideous nonsense calculates the various offsets for shadows
46 if (Ext.supports.CSS3BoxShadow) {
47 adjusts.w = adjusts.h = -offset;
48 adjusts.l = adjusts.t = offset;
51 adjusts.l = adjusts.t = offset;
54 adjusts.l -= offset + rad;
55 adjusts.t -= offset + rad;
63 if (Ext.supports.CSS3BoxShadow) {
66 adjusts.l = adjusts.w = 0;
68 adjusts.w = (offset * 2);
70 adjusts.t = offset - 1;
72 adjusts.l -= (offset - rad);
73 adjusts.t -= offset + rad;
75 adjusts.w -= (offset - rad) * 2;
82 if (Ext.supports.CSS3BoxShadow) {
83 adjusts.l = adjusts.w = adjusts.t = 0;
85 adjusts.w = adjusts.h = (offset * 2);
86 adjusts.l = adjusts.t = -offset;
90 adjusts.l -= (offset - rad);
91 adjusts.t -= (offset - rad);
93 adjusts.w -= (offset + rad + 1);
94 adjusts.h -= (offset + rad);
100 me.adjusts = adjusts;
105 * The shadow display mode. Supports the following options:<div class="mdetail-params"><ul>
106 * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
107 * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
108 * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
112 * @cfg {Number} offset
113 * The number of pixels to offset the shadow from the element
121 * Displays the shadow under the target element
122 * @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
124 show: function(target) {
128 target = Ext.get(target);
130 me.el = Ext.ShadowPool.pull();
131 if (me.el.dom.nextSibling != target.dom) {
132 me.el.insertBefore(target);
135 index = (parseInt(target.getStyle("z-index"), 10) - 1) || 0;
136 me.el.setStyle("z-index", me.zIndex || index);
137 if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
138 me.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
141 target.getLeft(true),
143 target.dom.offsetWidth,
144 target.dom.offsetHeight
146 me.el.dom.style.display = "block";
150 * Returns true if the shadow is visible, else false
152 isVisible: function() {
153 return this.el ? true: false;
157 * Direct alignment when values are already available. Show must be called at least once before
158 * calling this method to ensure it is initialized.
159 * @param {Number} left The target element left position
160 * @param {Number} top The target element top position
161 * @param {Number} width The target element width
162 * @param {Number} height The target element height
164 realign: function(l, t, targetWidth, targetHeight) {
168 var adjusts = this.adjusts,
170 targetStyle = d.style,
178 targetStyle.left = (l + adjusts.l) + "px";
179 targetStyle.top = (t + adjusts.t) + "px";
180 shadowWidth = Math.max(targetWidth + adjusts.w, 0);
181 shadowHeight = Math.max(targetHeight + adjusts.h, 0);
182 sws = shadowWidth + "px";
183 shs = shadowHeight + "px";
184 if (targetStyle.width != sws || targetStyle.height != shs) {
185 targetStyle.width = sws;
186 targetStyle.height = shs;
187 if (Ext.supports.CSS3BoxShadow) {
188 targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
191 // Adjust the 9 point framed element to poke out on the required sides
194 sww = Math.max(0, (shadowWidth - 12)) + "px";
195 cn[0].childNodes[1].style.width = sww;
196 cn[1].childNodes[1].style.width = sww;
197 cn[2].childNodes[1].style.width = sww;
198 cn[1].style.height = Math.max(0, (shadowHeight - 12)) + "px";
211 me.el.dom.style.display = "none";
212 Ext.ShadowPool.push(me.el);
218 * Adjust the z-index of this shadow
219 * @param {Number} zindex The new z-index
221 setZIndex: function(z) {
224 this.el.setStyle("z-index", z);
229 * Sets the opacity of the shadow
230 * @param {Number} opacity The opacity
232 setOpacity: function(opacity){
234 if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
235 opacity = Math.floor(opacity * 100 / 2) / 100;
237 this.opacity = opacity;
238 this.el.setOpacity(opacity);