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="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../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-method-constructor'><span id='Ext-Shadow'>/**
  19 </span></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  * @constructor
  24  * Create a new Shadow
  25  * @param {Object} config The config object
  26  */
  27 Ext.define('Ext.Shadow', {
  28     requires: ['Ext.ShadowPool'],
  29
  30     constructor: function(config) {
  31         Ext.apply(this, config);
  32         if (typeof this.mode != &quot;string&quot;) {
  33             this.mode = this.defaultMode;
  34         }
  35         var offset = this.offset,
  36             adjusts = {
  37                 h: 0
  38             },
  39             rad = Math.floor(this.offset / 2);
  40
  41         switch (this.mode.toLowerCase()) {
  42             // all this hideous nonsense calculates the various offsets for shadows
  43             case &quot;drop&quot;:
  44                 if (Ext.supports.CSS3BoxShadow) {
  45                     adjusts.w = adjusts.h = -offset;
  46                     adjusts.l = adjusts.t = offset;
  47                 } else {
  48                     adjusts.w = 0;
  49                     adjusts.l = adjusts.t = offset;
  50                     adjusts.t -= 1;
  51                     if (Ext.isIE) {
  52                         adjusts.l -= offset + rad;
  53                         adjusts.t -= offset + rad;
  54                         adjusts.w -= rad;
  55                         adjusts.h -= rad;
  56                         adjusts.t += 1;
  57                     }
  58                 }
  59                 break;
  60             case &quot;sides&quot;:
  61                 if (Ext.supports.CSS3BoxShadow) {
  62                     adjusts.h -= offset;
  63                     adjusts.t = offset;
  64                     adjusts.l = adjusts.w = 0;
  65                 } else {
  66                     adjusts.w = (offset * 2);
  67                     adjusts.l = -offset;
  68                     adjusts.t = offset - 1;
  69                     if (Ext.isIE) {
  70                         adjusts.l -= (offset - rad);
  71                         adjusts.t -= offset + rad;
  72                         adjusts.l += 1;
  73                         adjusts.w -= (offset - rad) * 2;
  74                         adjusts.w -= rad + 1;
  75                         adjusts.h -= 1;
  76                     }
  77                 }
  78                 break;
  79             case &quot;frame&quot;:
  80                 if (Ext.supports.CSS3BoxShadow) {
  81                     adjusts.l = adjusts.w = adjusts.t = 0;
  82                 } else {
  83                     adjusts.w = adjusts.h = (offset * 2);
  84                     adjusts.l = adjusts.t = -offset;
  85                     adjusts.t += 1;
  86                     adjusts.h -= 2;
  87                     if (Ext.isIE) {
  88                         adjusts.l -= (offset - rad);
  89                         adjusts.t -= (offset - rad);
  90                         adjusts.l += 1;
  91                         adjusts.w -= (offset + rad + 1);
  92                         adjusts.h -= (offset + rad);
  93                         adjusts.h += 1;
  94                     }
  95                     break;
  96                 }
  97         }
  98         this.adjusts = adjusts;
  99     },
 100
 101 <span id='Ext-Shadow-cfg-mode'>    /**
 102 </span>     * @cfg {String} mode
 103      * The shadow display mode.  Supports the following options:&lt;div class=&quot;mdetail-params&quot;&gt;&lt;ul&gt;
 104      * &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;
 105      * &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;
 106      * &lt;li&gt;&lt;b&gt;&lt;tt&gt;drop&lt;/tt&gt;&lt;/b&gt; : Traditional bottom-right drop shadow&lt;/li&gt;
 107      * &lt;/ul&gt;&lt;/div&gt;
 108      */
 109 <span id='Ext-Shadow-cfg-offset'>    /**
 110 </span>     * @cfg {String} offset
 111      * The number of pixels to offset the shadow from the element (defaults to &lt;tt&gt;4&lt;/tt&gt;)
 112      */
 113     offset: 4,
 114
 115     // private
 116     defaultMode: &quot;drop&quot;,
 117
 118 <span id='Ext-Shadow-method-show'>    /**
 119 </span>     * Displays the shadow under the target element
 120      * @param {Mixed} targetEl The id or element under which the shadow should display
 121      */
 122     show: function(target) {
 123         target = Ext.get(target);
 124         if (!this.el) {
 125             this.el = Ext.ShadowPool.pull();
 126             if (this.el.dom.nextSibling != target.dom) {
 127                 this.el.insertBefore(target);
 128             }
 129         }
 130         this.el.setStyle(&quot;z-index&quot;, this.zIndex || parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1);
 131         if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
 132             this.el.dom.style.filter = &quot;progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius=&quot; + (this.offset) + &quot;)&quot;;
 133         }
 134         this.realign(
 135             target.getLeft(true),
 136             target.getTop(true),
 137             target.getWidth(),
 138             target.getHeight()
 139         );
 140         this.el.dom.style.display = &quot;block&quot;;
 141     },
 142
 143 <span id='Ext-Shadow-method-isVisible'>    /**
 144 </span>     * Returns true if the shadow is visible, else false
 145      */
 146     isVisible: function() {
 147         return this.el ? true: false;
 148     },
 149
 150 <span id='Ext-Shadow-method-realign'>    /**
 151 </span>     * Direct alignment when values are already available. Show must be called at least once before
 152      * calling this method to ensure it is initialized.
 153      * @param {Number} left The target element left position
 154      * @param {Number} top The target element top position
 155      * @param {Number} width The target element width
 156      * @param {Number} height The target element height
 157      */
 158     realign: function(l, t, targetWidth, targetHeight) {
 159         if (!this.el) {
 160             return;
 161         }
 162         var adjusts = this.adjusts,
 163             d = this.el.dom,
 164             targetStyle = d.style,
 165             shadowWidth,
 166             shadowHeight,
 167             cn,
 168             sww,
 169             sws,
 170             shs;
 171
 172         targetStyle.left = (l + adjusts.l) + &quot;px&quot;;
 173         targetStyle.top = (t + adjusts.t) + &quot;px&quot;;
 174         shadowWidth = Math.max(targetWidth + adjusts.w, 0);
 175         shadowHeight = Math.max(targetHeight + adjusts.h, 0);
 176         sws = shadowWidth + &quot;px&quot;;
 177         shs = shadowHeight + &quot;px&quot;;
 178         if (targetStyle.width != sws || targetStyle.height != shs) {
 179             targetStyle.width = sws;
 180             targetStyle.height = shs;
 181             if (Ext.supports.CSS3BoxShadow) {
 182                 targetStyle.boxShadow = '0 0 ' + this.offset + 'px 0 #888';
 183             } else {
 184
 185                 // Adjust the 9 point framed element to poke out on the required sides
 186                 if (!Ext.isIE) {
 187                     cn = d.childNodes;
 188                     sww = Math.max(0, (shadowWidth - 12)) + &quot;px&quot;;
 189                     cn[0].childNodes[1].style.width = sww;
 190                     cn[1].childNodes[1].style.width = sww;
 191                     cn[2].childNodes[1].style.width = sww;
 192                     cn[1].style.height = Math.max(0, (shadowHeight - 12)) + &quot;px&quot;;
 193                 }
 194             }
 195         }
 196     },
 197
 198 <span id='Ext-Shadow-method-hide'>    /**
 199 </span>     * Hides this shadow
 200      */
 201     hide: function() {
 202         if (this.el) {
 203             this.el.dom.style.display = &quot;none&quot;;
 204             Ext.ShadowPool.push(this.el);
 205             delete this.el;
 206         }
 207     },
 208
 209 <span id='Ext-Shadow-method-setZIndex'>    /**
 210 </span>     * Adjust the z-index of this shadow
 211      * @param {Number} zindex The new z-index
 212      */
 213     setZIndex: function(z) {
 214         this.zIndex = z;
 215         if (this.el) {
 216             this.el.setStyle(&quot;z-index&quot;, z);
 217         }
 218     }
 219 });</pre>
 220 </body>
 221 </html>