src/widgets/Shadow.js

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