src/widgets/Shadow.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   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  */
  16 Ext.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
  68 Ext.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
 173 Ext.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 }();