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