Shadow.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273
  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> * Simple class that can provide a shadow effect for any element. Note that the element
  20. * MUST be absolutely positioned, and the shadow does not provide any shimming. This
  21. * should be used only in simple cases - for more advanced functionality that can also
  22. * provide the same shadow effect, see the {@link Ext.Layer} class.
  23. */
  24. Ext.define('Ext.Shadow', {
  25. requires: ['Ext.ShadowPool'],
  26. <span id='Ext-Shadow-method-constructor'> /**
  27. </span> * Creates new Shadow.
  28. * @param {Object} config (optional) Config object.
  29. */
  30. constructor: function(config) {
  31. var me = this,
  32. adjusts,
  33. offset,
  34. rad;
  35. Ext.apply(me, config);
  36. if (!Ext.isString(me.mode)) {
  37. me.mode = me.defaultMode;
  38. }
  39. offset = me.offset;
  40. rad = Math.floor(offset / 2);
  41. me.opacity = 50;
  42. switch (me.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 = {
  47. t: offset,
  48. l: offset,
  49. h: -offset,
  50. w: -offset
  51. };
  52. }
  53. else {
  54. adjusts = {
  55. t: -rad,
  56. l: -rad,
  57. h: -rad,
  58. w: -rad
  59. };
  60. }
  61. break;
  62. case &quot;sides&quot;:
  63. if (Ext.supports.CSS3BoxShadow) {
  64. adjusts = {
  65. t: offset,
  66. l: 0,
  67. h: -offset,
  68. w: 0
  69. };
  70. }
  71. else {
  72. adjusts = {
  73. t: - (1 + rad),
  74. l: 1 + rad - 2 * offset,
  75. h: -1,
  76. w: rad - 1
  77. };
  78. }
  79. break;
  80. case &quot;frame&quot;:
  81. if (Ext.supports.CSS3BoxShadow) {
  82. adjusts = {
  83. t: 0,
  84. l: 0,
  85. h: 0,
  86. w: 0
  87. };
  88. }
  89. else {
  90. adjusts = {
  91. t: 1 + rad - 2 * offset,
  92. l: 1 + rad - 2 * offset,
  93. h: offset - rad - 1,
  94. w: offset - rad - 1
  95. };
  96. }
  97. break;
  98. }
  99. me.adjusts = adjusts;
  100. },
  101. <span id='Ext-Shadow-method-getShadowSize'> /**
  102. </span> * @private
  103. * Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;
  104. * @return {Number[]} Top, right, bottom and left shadow size.
  105. */
  106. getShadowSize: function() {
  107. var me = this,
  108. offset = me.el ? me.offset : 0,
  109. result = [offset, offset, offset, offset],
  110. mode = me.mode.toLowerCase();
  111. // There are only offsets if the shadow element is present.
  112. if (me.el &amp;&amp; mode !== 'frame') {
  113. result[0] = 0;
  114. if (mode == 'drop') {
  115. result[3] = 0;
  116. }
  117. }
  118. return result;
  119. },
  120. <span id='Ext-Shadow-cfg-mode'> /**
  121. </span> * @cfg {String} mode
  122. * The shadow display mode. Supports the following options:
  123. *
  124. * - sides : Shadow displays on both sides and bottom only&lt;/li&gt;
  125. * - frame : Shadow displays equally on all four sides&lt;/li&gt;
  126. * - drop : Traditional bottom-right drop shadow&lt;/li&gt;
  127. */
  128. <span id='Ext-Shadow-cfg-offset'> /**
  129. </span> * @cfg {Number} offset
  130. * The number of pixels to offset the shadow from the element
  131. */
  132. offset: 4,
  133. // private
  134. defaultMode: &quot;drop&quot;,
  135. // private - CSS property to use to set the box shadow
  136. boxShadowProperty: (function() {
  137. var property = 'boxShadow',
  138. style = document.documentElement.style;
  139. if (!('boxShadow' in style)) {
  140. if ('WebkitBoxShadow' in style) {
  141. // Safari prior to version 5.1 and Chrome prior to version 10
  142. property = 'WebkitBoxShadow';
  143. }
  144. else if ('MozBoxShadow' in style) {
  145. // FF 3.5 &amp; 3.6
  146. property = 'MozBoxShadow';
  147. }
  148. }
  149. return property;
  150. }()),
  151. <span id='Ext-Shadow-method-show'> /**
  152. </span> * Displays the shadow under the target element
  153. * @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
  154. */
  155. show: function(target) {
  156. var me = this,
  157. index;
  158. target = Ext.get(target);
  159. if (!me.el) {
  160. me.el = Ext.ShadowPool.pull();
  161. if (me.el.dom.nextSibling != target.dom) {
  162. me.el.insertBefore(target);
  163. }
  164. }
  165. index = (parseInt(target.getStyle(&quot;z-index&quot;), 10) - 1) || 0;
  166. me.el.setStyle(&quot;z-index&quot;, me.zIndex || index);
  167. if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
  168. 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;;
  169. }
  170. me.realign(
  171. target.getLocalX(),
  172. target.getLocalY(),
  173. target.dom.offsetWidth,
  174. target.dom.offsetHeight
  175. );
  176. me.el.dom.style.display = &quot;block&quot;;
  177. },
  178. <span id='Ext-Shadow-method-isVisible'> /**
  179. </span> * Returns true if the shadow is visible, else false
  180. */
  181. isVisible: function() {
  182. return this.el ? true: false;
  183. },
  184. <span id='Ext-Shadow-method-realign'> /**
  185. </span> * Direct alignment when values are already available. Show must be called at least once before
  186. * calling this method to ensure it is initialized.
  187. * @param {Number} left The target element left position
  188. * @param {Number} top The target element top position
  189. * @param {Number} width The target element width
  190. * @param {Number} height The target element height
  191. */
  192. realign: function(l, t, targetWidth, targetHeight) {
  193. if (!this.el) {
  194. return;
  195. }
  196. var adjusts = this.adjusts,
  197. d = this.el.dom,
  198. targetStyle = d.style,
  199. shadowWidth,
  200. shadowHeight,
  201. sws,
  202. shs;
  203. targetStyle.left = (l + adjusts.l) + &quot;px&quot;;
  204. targetStyle.top = (t + adjusts.t) + &quot;px&quot;;
  205. shadowWidth = Math.max(targetWidth + adjusts.w, 0);
  206. shadowHeight = Math.max(targetHeight + adjusts.h, 0);
  207. sws = shadowWidth + &quot;px&quot;;
  208. shs = shadowHeight + &quot;px&quot;;
  209. if (targetStyle.width != sws || targetStyle.height != shs) {
  210. targetStyle.width = sws;
  211. targetStyle.height = shs;
  212. if (Ext.supports.CSS3BoxShadow) {
  213. targetStyle[this.boxShadowProperty] = '0 0 ' + this.offset + 'px #888';
  214. }
  215. }
  216. },
  217. <span id='Ext-Shadow-method-hide'> /**
  218. </span> * Hides this shadow
  219. */
  220. hide: function() {
  221. var me = this;
  222. if (me.el) {
  223. me.el.dom.style.display = &quot;none&quot;;
  224. Ext.ShadowPool.push(me.el);
  225. delete me.el;
  226. }
  227. },
  228. <span id='Ext-Shadow-method-setZIndex'> /**
  229. </span> * Adjust the z-index of this shadow
  230. * @param {Number} zindex The new z-index
  231. */
  232. setZIndex: function(z) {
  233. this.zIndex = z;
  234. if (this.el) {
  235. this.el.setStyle(&quot;z-index&quot;, z);
  236. }
  237. },
  238. <span id='Ext-Shadow-method-setOpacity'> /**
  239. </span> * Sets the opacity of the shadow
  240. * @param {Number} opacity The opacity
  241. */
  242. setOpacity: function(opacity){
  243. if (this.el) {
  244. if (Ext.isIE &amp;&amp; !Ext.supports.CSS3BoxShadow) {
  245. opacity = Math.floor(opacity * 100 / 2) / 100;
  246. }
  247. this.opacity = opacity;
  248. this.el.setOpacity(opacity);
  249. }
  250. }
  251. });</pre>
  252. </body>
  253. </html>