1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | /** |
---|
10 | * @class Ext.Shadow |
---|
11 | * Simple class that can provide a shadow effect for any element. Note that the element MUST be absolutely positioned, |
---|
12 | * and the shadow does not provide any shimming. This should be used only in simple cases -- for more advanced |
---|
13 | * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class. |
---|
14 | * @constructor |
---|
15 | * Create a new Shadow |
---|
16 | * @param {Object} config The config object |
---|
17 | */ |
---|
18 | Ext.Shadow = function(config){ |
---|
19 | Ext.apply(this, config); |
---|
20 | if(typeof this.mode != "string"){ |
---|
21 | this.mode = this.defaultMode; |
---|
22 | } |
---|
23 | var o = this.offset, a = {h: 0}; |
---|
24 | var rad = Math.floor(this.offset/2); |
---|
25 | switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows |
---|
26 | case "drop": |
---|
27 | a.w = 0; |
---|
28 | a.l = a.t = o; |
---|
29 | a.t -= 1; |
---|
30 | if(Ext.isIE){ |
---|
31 | a.l -= this.offset + rad; |
---|
32 | a.t -= this.offset + rad; |
---|
33 | a.w -= rad; |
---|
34 | a.h -= rad; |
---|
35 | a.t += 1; |
---|
36 | } |
---|
37 | break; |
---|
38 | case "sides": |
---|
39 | a.w = (o*2); |
---|
40 | a.l = -o; |
---|
41 | a.t = o-1; |
---|
42 | if(Ext.isIE){ |
---|
43 | a.l -= (this.offset - rad); |
---|
44 | a.t -= this.offset + rad; |
---|
45 | a.l += 1; |
---|
46 | a.w -= (this.offset - rad)*2; |
---|
47 | a.w -= rad + 1; |
---|
48 | a.h -= 1; |
---|
49 | } |
---|
50 | break; |
---|
51 | case "frame": |
---|
52 | a.w = a.h = (o*2); |
---|
53 | a.l = a.t = -o; |
---|
54 | a.t += 1; |
---|
55 | a.h -= 2; |
---|
56 | if(Ext.isIE){ |
---|
57 | a.l -= (this.offset - rad); |
---|
58 | a.t -= (this.offset - rad); |
---|
59 | a.l += 1; |
---|
60 | a.w -= (this.offset + rad + 1); |
---|
61 | a.h -= (this.offset + rad); |
---|
62 | a.h += 1; |
---|
63 | } |
---|
64 | break; |
---|
65 | }; |
---|
66 | |
---|
67 | this.adjusts = a; |
---|
68 | }; |
---|
69 | |
---|
70 | Ext.Shadow.prototype = { |
---|
71 | /** |
---|
72 | * @cfg {String} mode |
---|
73 | * The shadow display mode. Supports the following options:<br /> |
---|
74 | * sides: Shadow displays on both sides and bottom only<br /> |
---|
75 | * frame: Shadow displays equally on all four sides<br /> |
---|
76 | * drop: Traditional bottom-right drop shadow (default) |
---|
77 | */ |
---|
78 | /** |
---|
79 | * @cfg {String} offset |
---|
80 | * The number of pixels to offset the shadow from the element (defaults to 4) |
---|
81 | */ |
---|
82 | offset: 4, |
---|
83 | |
---|
84 | // private |
---|
85 | defaultMode: "drop", |
---|
86 | |
---|
87 | /** |
---|
88 | * Displays the shadow under the target element |
---|
89 | * @param {Mixed} targetEl The id or element under which the shadow should display |
---|
90 | */ |
---|
91 | show : function(target){ |
---|
92 | target = Ext.get(target); |
---|
93 | if(!this.el){ |
---|
94 | this.el = Ext.Shadow.Pool.pull(); |
---|
95 | if(this.el.dom.nextSibling != target.dom){ |
---|
96 | this.el.insertBefore(target); |
---|
97 | } |
---|
98 | } |
---|
99 | this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1); |
---|
100 | if(Ext.isIE){ |
---|
101 | this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")"; |
---|
102 | } |
---|
103 | this.realign( |
---|
104 | target.getLeft(true), |
---|
105 | target.getTop(true), |
---|
106 | target.getWidth(), |
---|
107 | target.getHeight() |
---|
108 | ); |
---|
109 | this.el.dom.style.display = "block"; |
---|
110 | }, |
---|
111 | |
---|
112 | /** |
---|
113 | * Returns true if the shadow is visible, else false |
---|
114 | */ |
---|
115 | isVisible : function(){ |
---|
116 | return this.el ? true : false; |
---|
117 | }, |
---|
118 | |
---|
119 | /** |
---|
120 | * Direct alignment when values are already available. Show must be called at least once before |
---|
121 | * calling this method to ensure it is initialized. |
---|
122 | * @param {Number} left The target element left position |
---|
123 | * @param {Number} top The target element top position |
---|
124 | * @param {Number} width The target element width |
---|
125 | * @param {Number} height The target element height |
---|
126 | */ |
---|
127 | realign : function(l, t, w, h){ |
---|
128 | if(!this.el){ |
---|
129 | return; |
---|
130 | } |
---|
131 | var a = this.adjusts, d = this.el.dom, s = d.style; |
---|
132 | var iea = 0; |
---|
133 | s.left = (l+a.l)+"px"; |
---|
134 | s.top = (t+a.t)+"px"; |
---|
135 | var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px"; |
---|
136 | if(s.width != sws || s.height != shs){ |
---|
137 | s.width = sws; |
---|
138 | s.height = shs; |
---|
139 | if(!Ext.isIE){ |
---|
140 | var cn = d.childNodes; |
---|
141 | var sww = Math.max(0, (sw-12))+"px"; |
---|
142 | cn[0].childNodes[1].style.width = sww; |
---|
143 | cn[1].childNodes[1].style.width = sww; |
---|
144 | cn[2].childNodes[1].style.width = sww; |
---|
145 | cn[1].style.height = Math.max(0, (sh-12))+"px"; |
---|
146 | } |
---|
147 | } |
---|
148 | }, |
---|
149 | |
---|
150 | /** |
---|
151 | * Hides this shadow |
---|
152 | */ |
---|
153 | hide : function(){ |
---|
154 | if(this.el){ |
---|
155 | this.el.dom.style.display = "none"; |
---|
156 | Ext.Shadow.Pool.push(this.el); |
---|
157 | delete this.el; |
---|
158 | } |
---|
159 | }, |
---|
160 | |
---|
161 | /** |
---|
162 | * Adjust the z-index of this shadow |
---|
163 | * @param {Number} zindex The new z-index |
---|
164 | */ |
---|
165 | setZIndex : function(z){ |
---|
166 | this.zIndex = z; |
---|
167 | if(this.el){ |
---|
168 | this.el.setStyle("z-index", z); |
---|
169 | } |
---|
170 | } |
---|
171 | }; |
---|
172 | |
---|
173 | // Private utility class that manages the internal Shadow cache |
---|
174 | Ext.Shadow.Pool = function(){ |
---|
175 | var p = []; |
---|
176 | var markup = Ext.isIE ? |
---|
177 | '<div class="x-ie-shadow"></div>' : |
---|
178 | '<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>'; |
---|
179 | return { |
---|
180 | pull : function(){ |
---|
181 | var sh = p.shift(); |
---|
182 | if(!sh){ |
---|
183 | sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup)); |
---|
184 | sh.autoBoxAdjust = false; |
---|
185 | } |
---|
186 | return sh; |
---|
187 | }, |
---|
188 | |
---|
189 | push : function(sh){ |
---|
190 | p.push(sh); |
---|
191 | } |
---|
192 | }; |
---|
193 | }(); |
---|