Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / docs / source / Shadow.html
1 <html>\r
2 <head>\r
3   <title>The source code</title>\r
4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
6 </head>\r
7 <body  onload="prettyPrint();">\r
8     <pre class="prettyprint lang-js"><div id="cls-Ext.Shadow"></div>/**
9  * @class Ext.Shadow
10  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
11  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
12  * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
13  * @constructor
14  * Create a new Shadow
15  * @param {Object} config The config object
16  */
17 Ext.Shadow = function(config){
18     Ext.apply(this, config);
19     if(typeof this.mode != "string"){
20         this.mode = this.defaultMode;
21     }
22     var o = this.offset, a = {h: 0};
23     var rad = Math.floor(this.offset/2);
24     switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows
25         case "drop":
26             a.w = 0;
27             a.l = a.t = o;
28             a.t -= 1;
29             if(Ext.isIE){
30                 a.l -= this.offset + rad;
31                 a.t -= this.offset + rad;
32                 a.w -= rad;
33                 a.h -= rad;
34                 a.t += 1;
35             }
36         break;
37         case "sides":
38             a.w = (o*2);
39             a.l = -o;
40             a.t = o-1;
41             if(Ext.isIE){
42                 a.l -= (this.offset - rad);
43                 a.t -= this.offset + rad;
44                 a.l += 1;
45                 a.w -= (this.offset - rad)*2;
46                 a.w -= rad + 1;
47                 a.h -= 1;
48             }
49         break;
50         case "frame":
51             a.w = a.h = (o*2);
52             a.l = a.t = -o;
53             a.t += 1;
54             a.h -= 2;
55             if(Ext.isIE){
56                 a.l -= (this.offset - rad);
57                 a.t -= (this.offset - rad);
58                 a.l += 1;
59                 a.w -= (this.offset + rad + 1);
60                 a.h -= (this.offset + rad);
61                 a.h += 1;
62             }
63         break;
64     };
65
66     this.adjusts = a;
67 };
68
69 Ext.Shadow.prototype = {
70     <div id="cfg-Ext.Shadow-mode"></div>/**
71      * @cfg {String} mode
72      * The shadow display mode.  Supports the following options:<div class="mdetail-params"><ul>
73      * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li>
74      * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li>
75      * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li>
76      * </ul></div>
77      */
78     <div id="cfg-Ext.Shadow-offset"></div>/**
79      * @cfg {String} offset
80      * The number of pixels to offset the shadow from the element (defaults to <tt>4</tt>)
81      */
82     offset: 4,
83
84     // private
85     defaultMode: "drop",
86
87     <div id="method-Ext.Shadow-show"></div>/**
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     <div id="method-Ext.Shadow-isVisible"></div>/**
113      * Returns true if the shadow is visible, else false
114      */
115     isVisible : function(){
116         return this.el ? true : false;  
117     },
118
119     <div id="method-Ext.Shadow-realign"></div>/**
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     <div id="method-Ext.Shadow-hide"></div>/**
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     <div id="method-Ext.Shadow-setZIndex"></div>/**
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 }();</pre>    \r
194 </body>\r
195 </html>