/javascripts/lib/src/widgets/Shadow.js

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