123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-Shadow'>/**
- </span> * Simple class that can provide a shadow effect for any element. Note that the element
- * MUST be absolutely positioned, and the shadow does not provide any shimming. This
- * should be used only in simple cases - for more advanced functionality that can also
- * provide the same shadow effect, see the {@link Ext.Layer} class.
- */
- Ext.define('Ext.Shadow', {
- requires: ['Ext.ShadowPool'],
- <span id='Ext-Shadow-method-constructor'> /**
- </span> * Creates new Shadow.
- * @param {Object} config (optional) Config object.
- */
- constructor: function(config) {
- var me = this,
- adjusts,
- offset,
- rad;
-
- Ext.apply(me, config);
- if (!Ext.isString(me.mode)) {
- me.mode = me.defaultMode;
- }
- offset = me.offset;
- rad = Math.floor(offset / 2);
- me.opacity = 50;
- switch (me.mode.toLowerCase()) {
- // all this hideous nonsense calculates the various offsets for shadows
- case "drop":
- if (Ext.supports.CSS3BoxShadow) {
- adjusts = {
- t: offset,
- l: offset,
- h: -offset,
- w: -offset
- };
- }
- else {
- adjusts = {
- t: -rad,
- l: -rad,
- h: -rad,
- w: -rad
- };
- }
- break;
- case "sides":
- if (Ext.supports.CSS3BoxShadow) {
- adjusts = {
- t: offset,
- l: 0,
- h: -offset,
- w: 0
- };
- }
- else {
- adjusts = {
- t: - (1 + rad),
- l: 1 + rad - 2 * offset,
- h: -1,
- w: rad - 1
- };
- }
- break;
- case "frame":
- if (Ext.supports.CSS3BoxShadow) {
- adjusts = {
- t: 0,
- l: 0,
- h: 0,
- w: 0
- };
- }
- else {
- adjusts = {
- t: 1 + rad - 2 * offset,
- l: 1 + rad - 2 * offset,
- h: offset - rad - 1,
- w: offset - rad - 1
- };
- }
- break;
- }
- me.adjusts = adjusts;
- },
- <span id='Ext-Shadow-method-getShadowSize'> /**
- </span> * @private
- * Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;
- * @return {Number[]} Top, right, bottom and left shadow size.
- */
- getShadowSize: function() {
- var me = this,
- offset = me.el ? me.offset : 0,
- result = [offset, offset, offset, offset],
- mode = me.mode.toLowerCase();
- // There are only offsets if the shadow element is present.
- if (me.el && mode !== 'frame') {
- result[0] = 0;
- if (mode == 'drop') {
- result[3] = 0;
- }
- }
- return result;
- },
- <span id='Ext-Shadow-cfg-mode'> /**
- </span> * @cfg {String} mode
- * The shadow display mode. Supports the following options:
- *
- * - sides : Shadow displays on both sides and bottom only</li>
- * - frame : Shadow displays equally on all four sides</li>
- * - drop : Traditional bottom-right drop shadow</li>
- */
- <span id='Ext-Shadow-cfg-offset'> /**
- </span> * @cfg {Number} offset
- * The number of pixels to offset the shadow from the element
- */
- offset: 4,
- // private
- defaultMode: "drop",
- // private - CSS property to use to set the box shadow
- boxShadowProperty: (function() {
- var property = 'boxShadow',
- style = document.documentElement.style;
- if (!('boxShadow' in style)) {
- if ('WebkitBoxShadow' in style) {
- // Safari prior to version 5.1 and Chrome prior to version 10
- property = 'WebkitBoxShadow';
- }
- else if ('MozBoxShadow' in style) {
- // FF 3.5 & 3.6
- property = 'MozBoxShadow';
- }
- }
- return property;
- }()),
- <span id='Ext-Shadow-method-show'> /**
- </span> * Displays the shadow under the target element
- * @param {String/HTMLElement/Ext.Element} targetEl The id or element under which the shadow should display
- */
- show: function(target) {
- var me = this,
- index;
-
- target = Ext.get(target);
- if (!me.el) {
- me.el = Ext.ShadowPool.pull();
- if (me.el.dom.nextSibling != target.dom) {
- me.el.insertBefore(target);
- }
- }
- index = (parseInt(target.getStyle("z-index"), 10) - 1) || 0;
- me.el.setStyle("z-index", me.zIndex || index);
- if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
- me.el.dom.style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";
- }
- me.realign(
- target.getLocalX(),
- target.getLocalY(),
- target.dom.offsetWidth,
- target.dom.offsetHeight
- );
- me.el.dom.style.display = "block";
- },
- <span id='Ext-Shadow-method-isVisible'> /**
- </span> * Returns true if the shadow is visible, else false
- */
- isVisible: function() {
- return this.el ? true: false;
- },
- <span id='Ext-Shadow-method-realign'> /**
- </span> * Direct alignment when values are already available. Show must be called at least once before
- * calling this method to ensure it is initialized.
- * @param {Number} left The target element left position
- * @param {Number} top The target element top position
- * @param {Number} width The target element width
- * @param {Number} height The target element height
- */
- realign: function(l, t, targetWidth, targetHeight) {
- if (!this.el) {
- return;
- }
- var adjusts = this.adjusts,
- d = this.el.dom,
- targetStyle = d.style,
- shadowWidth,
- shadowHeight,
- sws,
- shs;
- targetStyle.left = (l + adjusts.l) + "px";
- targetStyle.top = (t + adjusts.t) + "px";
- shadowWidth = Math.max(targetWidth + adjusts.w, 0);
- shadowHeight = Math.max(targetHeight + adjusts.h, 0);
- sws = shadowWidth + "px";
- shs = shadowHeight + "px";
- if (targetStyle.width != sws || targetStyle.height != shs) {
- targetStyle.width = sws;
- targetStyle.height = shs;
- if (Ext.supports.CSS3BoxShadow) {
- targetStyle[this.boxShadowProperty] = '0 0 ' + this.offset + 'px #888';
- }
- }
- },
- <span id='Ext-Shadow-method-hide'> /**
- </span> * Hides this shadow
- */
- hide: function() {
- var me = this;
-
- if (me.el) {
- me.el.dom.style.display = "none";
- Ext.ShadowPool.push(me.el);
- delete me.el;
- }
- },
- <span id='Ext-Shadow-method-setZIndex'> /**
- </span> * Adjust the z-index of this shadow
- * @param {Number} zindex The new z-index
- */
- setZIndex: function(z) {
- this.zIndex = z;
- if (this.el) {
- this.el.setStyle("z-index", z);
- }
- },
-
- <span id='Ext-Shadow-method-setOpacity'> /**
- </span> * Sets the opacity of the shadow
- * @param {Number} opacity The opacity
- */
- setOpacity: function(opacity){
- if (this.el) {
- if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {
- opacity = Math.floor(opacity * 100 / 2) / 100;
- }
- this.opacity = opacity;
- this.el.setOpacity(opacity);
- }
- }
- });</pre>
- </body>
- </html>
|