4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
15 * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned,
16 * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced
17 * functionality that can also provide the same shadow effect, see the {@link Roo.Layer} class.
20 * @param {Object} config The config object
22 Roo.Shadow = function(config){
23 Roo.apply(this, config);
24 if(typeof this.mode != "string"){
25 this.mode = this.defaultMode;
27 var o = this.offset, a = {h: 0};
28 var rad = Math.floor(this.offset/2);
29 switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
35 a.l -= this.offset + rad;
36 a.t -= this.offset + rad;
47 a.l -= (this.offset - rad);
48 a.t -= this.offset + rad;
50 a.w -= (this.offset - rad)*2;
61 a.l -= (this.offset - rad);
62 a.t -= (this.offset - rad);
64 a.w -= (this.offset + rad + 1);
65 a.h -= (this.offset + rad);
74 Roo.Shadow.prototype = {
77 * The shadow display mode. Supports the following options:<br />
78 * sides: Shadow displays on both sides and bottom only<br />
79 * frame: Shadow displays equally on all four sides<br />
80 * drop: Traditional bottom-right drop shadow (default)
83 * @cfg {String} offset
84 * The number of pixels to offset the shadow from the element (defaults to 4)
92 * Displays the shadow under the target element
93 * @param {String/HTMLElement/Element} targetEl The id or element under which the shadow should display
95 show : function(target){
96 target = Roo.get(target);
98 this.el = Roo.Shadow.Pool.pull();
99 if(this.el.dom.nextSibling != target.dom){
100 this.el.insertBefore(target);
103 this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1);
105 this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")";
108 target.getLeft(true),
113 this.el.dom.style.display = "block";
117 * Returns true if the shadow is visible, else false
119 isVisible : function(){
120 return this.el ? true : false;
124 * Direct alignment when values are already available. Show must be called at least once before
125 * calling this method to ensure it is initialized.
126 * @param {Number} left The target element left position
127 * @param {Number} top The target element top position
128 * @param {Number} width The target element width
129 * @param {Number} height The target element height
131 realign : function(l, t, w, h){
135 var a = this.adjusts, d = this.el.dom, s = d.style;
137 s.left = (l+a.l)+"px";
138 s.top = (t+a.t)+"px";
139 var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px";
141 if(s.width != sws || s.height != shs){
145 var cn = d.childNodes;
146 var sww = Math.max(0, (sw-12))+"px";
147 cn[0].childNodes[1].style.width = sww;
148 cn[1].childNodes[1].style.width = sww;
149 cn[2].childNodes[1].style.width = sww;
150 cn[1].style.height = Math.max(0, (sh-12))+"px";
160 this.el.dom.style.display = "none";
161 Roo.Shadow.Pool.push(this.el);
167 * Adjust the z-index of this shadow
168 * @param {Number} zindex The new z-index
170 setZIndex : function(z){
173 this.el.setStyle("z-index", z);
178 // Private utility class that manages the internal Shadow cache
179 Roo.Shadow.Pool = function(){
181 var markup = Roo.isIE ?
182 '<div class="x-ie-shadow"></div>' :
183 '<div class="x-shadow"><div class="xst"><div class="xstl"></div><div class="xstc"></div><div class="xstr"></div></div><div class="xsc"><div class="xsml"></div><div class="xsmc"></div><div class="xsmr"></div></div><div class="xsb"><div class="xsbl"></div><div class="xsbc"></div><div class="xsbr"></div></div></div>';
188 sh = Roo.get(Roo.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup));
189 sh.autoBoxAdjust = false;