docs/source/Shadow.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-Shadow'>/**
  19 </span> * @class Ext.Shadow
  20  * Simple class that can provide a shadow effect for any element.  Note that the element MUST be absolutely positioned,
  21  * and the shadow does not provide any shimming.  This should be used only in simple cases -- for more advanced
  22  * functionality that can also provide the same shadow effect, see the {@link Ext.Layer} class.
  23  */
  24 Ext.define('Ext.Shadow', {
  25     requires: ['Ext.ShadowPool'],
  26
  27 <span id='Ext-Shadow-method-constructor'>    /**
  28 </span>     * Creates new Shadow.
  29      * @param {Object} config (optional) Config object.
  30      */
  31     constructor: function(config) {
  32         var me = this,
  33             adjusts = {
  34                 h: 0
  35             },
  36             offset,
  37             rad;
  38
  39         Ext.apply(me, config);
  40         if (!Ext.isString(me.mode)) {
  41             me.mode = me.defaultMode;
  42         }
  43         offset = me.offset;
  44         rad = Math.floor(offset / 2);
  45         me.opacity = 50;
  46         switch (me.mode.toLowerCase()) {
  47             // all this hideous nonsense calculates the various offsets for shadows
  48             case &quot;drop&quot;:
  49                 if (Ext.supports.CSS3BoxShadow) {
  50                     adjusts.w = adjusts.h = -offset;
  51                     adjusts.l = adjusts.t = offset;
  52                 } else {
  53                     adjusts.w = 0;
  54                     adjusts.l = adjusts.t = offset;
  55                     adjusts.t -= 1;
  56                     if (Ext.isIE) {
  57                         adjusts.l -= offset + rad;
  58                         adjusts.t -= offset + rad;
  59                         adjusts.w -= rad;
  60                         adjusts.h -= rad;
  61                         adjusts.t += 1;
  62                     }
  63                 }
  64                 break;
  65             case &quot;sides&quot;:
  66                 if (Ext.supports.CSS3BoxShadow) {
  67                     adjusts.h -= offset;
  68                     adjusts.t = offset;
  69                     adjusts.l = adjusts.w = 0;
  70                 } else {
  71                     adjusts.w = (offset * 2);
  72                     adjusts.l = -offset;
  73                     adjusts.t = offset - 1;
  74                     if (Ext.isIE) {
  75                         adjusts.l -= (offset - rad);
  76                         adjusts.t -= offset + rad;
  77                         adjusts.l += 1;
  78                         adjusts.w -= (offset - rad) * 2;
  79                         adjusts.w -= rad + 1;
  80                         adjusts.h -= 1;
  81                     }
  82                 }
  83                 break;
  84             case &quot;frame&quot;:
  85                 if (Ext.supports.CSS3BoxShadow) {
  86                     adjusts.l = adjusts.w = adjusts.t = 0;
  87                 } else {
  88                     adjusts.w = adjusts.h = (offset * 2);
  89                     adjusts.l = adjusts.t = -offset;
  90                     adjusts.t += 1;
  91                     adjusts.h -= 2;
  92                     if (Ext.isIE) {
  93                         adjusts.l -= (offset - rad);
  94                         adjusts.t -= (offset - rad);
  95                         adjusts.l += 1;
  96                         adjusts.w -= (offset + rad + 1);
  97                         adjusts.h -= (offset + rad);
  98                         adjusts.h += 1;
  99                     }
 100                     break;
 101                 }
 102         }
 103         me.adjusts = adjusts;
 104     },
 105
 106 <span id='Ext-Shadow-cfg-mode'>    /**
 107 </span>     * @cfg {String} mode
 108      * The shadow display mode.  Supports the following options:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 109      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;sides&lt;/tt&gt;&lt;/b&gt; : Shadow displays on both sides and bottom only&lt;/li&gt;
 110      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;frame&lt;/tt&gt;&lt;/b&gt; : Shadow displays equally on all four sides&lt;/li&gt;
 111      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;drop&lt;/tt&gt;&lt;/b&gt; : Traditional bottom-right drop shadow&lt;/li&gt;
 112      * &lt;/ul&gt;&lt;/div&gt;
 113      */
 114 <span id='Ext-Shadow-cfg-offset'>    /**
 115 </span>     * @cfg {Number} offset
 116      * The number of pixels to offset the shadow from the element
 117      */
 118     offset: 4,
 119
 120     // private
 121     defaultMode: &quot;drop&quot;,
 122
 123 <span id='Ext-Shadow-method-show'>    /**
 124 </span>     * Displays the shadow under the target element
 125      * @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
 126      */
 127     show: function(target) {
 128         var me = this,
 129             index;
 130
 131         target = Ext.get(target);
 132         if (!me.el) {
 133             me.el = Ext.ShadowPool.pull();
 134             if (me.el.dom.nextSibling != target.dom) {
 135                 me.el.insertBefore(target);
 136             }
 137         }
 138         index = (parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1) || 0;
 139         me.el.setStyle(&quot;z-index&quot;, me.zIndex || index);
 140         if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
 141             me.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=&quot; + me.opacity + &quot;) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (me.offset) + &quot;)&quot;;
 142         }
 143         me.realign(
 144             target.getLeft(true),
 145             target.getTop(true),
 146             target.dom.offsetWidth,
 147             target.dom.offsetHeight
 148         );
 149         me.el.dom.style.display = &quot;block&quot;;
 150     },
 151
 152 <span id='Ext-Shadow-method-isVisible'>    /**
 153 </span>     * Returns true if the shadow is visible, else false
 154      */
 155     isVisible: function() {
 156         return this.el ? true: false;
 157     },
 158
 159 <span id='Ext-Shadow-method-realign'>    /**
 160 </span>     * Direct alignment when values are already available. Show must be called at least once before
 161      * calling this method to ensure it is initialized.
 162      * @param {Number} left The target element left position
 163      * @param {Number} top The target element top position
 164      * @param {Number} width The target element width
 165      * @param {Number} height The target element height
 166      */
 167     realign: function(l, t, targetWidth, targetHeight) {
 168         if (!this.el) {
 169             return;
 170         }
 171         var adjusts = this.adjusts,
 172             d = this.el.dom,
 173             targetStyle = d.style,
 174             shadowWidth,
 175             shadowHeight,
 176             cn,
 177             sww,
 178             sws,
 179             shs;
 180
 181         targetStyle.left = (l + adjusts.l) + &quot;px&quot;;
 182         targetStyle.top = (t + adjusts.t) + &quot;px&quot;;
 183         shadowWidth = Math.max(targetWidth + adjusts.w, 0);
 184         shadowHeight = Math.max(targetHeight + adjusts.h, 0);
 185         sws = shadowWidth + &quot;px&quot;;
 186         shs = shadowHeight + &quot;px&quot;;
 187         if (targetStyle.width != sws || targetStyle.height != shs) {
 188             targetStyle.width = sws;
 189             targetStyle.height = shs;
 190             if (Ext.supports.CSS3BoxShadow) {
 191                 targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
 192             } else {
 193
 194                 // Adjust the 9 point framed element to poke out on the required sides
 195                 if (!Ext.isIE) {
 196                     cn = d.childNodes;
 197                     sww = Math.max(0, (shadowWidth - 12)) + &quot;px&quot;;
 198                     cn[0].childNodes[1].style.width = sww;
 199                     cn[1].childNodes[1].style.width = sww;
 200                     cn[2].childNodes[1].style.width = sww;
 201                     cn[1].style.height = Math.max(0, (shadowHeight - 12)) + &quot;px&quot;;
 202                 }
 203             }
 204         }
 205     },
 206
 207 <span id='Ext-Shadow-method-hide'>    /**
 208 </span>     * Hides this shadow
 209      */
 210     hide: function() {
 211         var me = this;
 212
 213         if (me.el) {
 214             me.el.dom.style.display = &quot;none&quot;;
 215             Ext.ShadowPool.push(me.el);
 216             delete me.el;
 217         }
 218     },
 219
 220 <span id='Ext-Shadow-method-setZIndex'>    /**
 221 </span>     * Adjust the z-index of this shadow
 222      * @param {Number} zindex The new z-index
 223      */
 224     setZIndex: function(z) {
 225         this.zIndex = z;
 226         if (this.el) {
 227             this.el.setStyle(&quot;z-index&quot;, z);
 228         }
 229     },
 230
 231 <span id='Ext-Shadow-method-setOpacity'>    /**
 232 </span>     * Sets the opacity of the shadow
 233      * @param {Number} opacity The opacity
 234      */
 235     setOpacity: function(opacity){
 236         if (this.el) {
 237             if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
 238                 opacity = Math.floor(opacity * 100 / 2) / 100;
 239             }
 240             this.opacity = opacity;
 241             this.el.setOpacity(opacity);
 242         }
 243     }
 244 });</pre>
 245 </body>
 246 </html>