[extjs.git] / extjs / packages / core / src / dom / Shadow.js

/**\r
 * Simple class that can provide a shadow effect for any absolutely positioned {@link\r
 * Ext.dom.Element Element}.\r
 * \r
 * Not meant to be used directly. To apply a shadow to an Element use the \r
 * {@link Ext.dom.Element#enableShadow enableShadow} method.\r
 * \r
 * @private\r
 */\r
Ext.define('Ext.dom.Shadow', {\r
    extend: 'Ext.dom.Underlay',\r
    alternateClassName: 'Ext.Shadow',\r
\r
    /**\r
     * @cfg {String} mode\r
     * The shadow display mode.  Supports the following options:\r
     *\r
     * - sides : Shadow displays on both sides and bottom only\r
     * - frame : Shadow displays equally on all four sides\r
     * - drop : Traditional bottom-right drop shadow\r
     */\r
    mode: 'drop',\r
\r
    /**\r
     * @cfg {Number} offset\r
     * The number of pixels to offset the shadow from the element\r
     */\r
    offset: 4,\r
\r
    cls: Ext.baseCSSPrefix + (!Ext.supports.CSS3BoxShadow ? 'ie' : 'css') + '-shadow',\r
\r
    /**\r
     * Creates new Shadow.\r
     * @param {Object} config (optional) Config object.\r
     */\r
    constructor: function(config) {\r
        var me = this,\r
            outerOffsets, offsets, offset, rad;\r
\r
        me.callParent([config]);\r
\r
        me.elementConfig = {\r
            cls: me.cls,\r
            role: 'presentation'\r
        };\r
\r
        offset = me.offset;\r
        rad = Math.floor(offset / 2);\r
        me.opacity = 50;\r
        switch (me.mode.toLowerCase()) {\r
            case "drop":\r
                outerOffsets = {\r
                    x: 0,\r
                    y: 0,\r
                    w: offset,\r
                    h: offset\r
                };\r
                if (Ext.supports.CSS3BoxShadow) {\r
                    offsets = {\r
                        x: offset,\r
                        y: offset,\r
                        h: -offset,\r
                        w: -offset\r
                    };\r
                }\r
                else {\r
                    offsets = {\r
                        x: -rad,\r
                        y: -rad,\r
                        h: -rad,\r
                        w: -rad\r
                    };\r
                }\r
                break;\r
            case "sides":\r
                outerOffsets = {\r
                    x: -offset,\r
                    y: 0,\r
                    w: offset * 2,\r
                    h: offset\r
                };\r
                if (Ext.supports.CSS3BoxShadow) {\r
                    offsets = {\r
                        x: 0,\r
                        y: offset,\r
                        h: -offset,\r
                        w: 0\r
                    };\r
                }\r
                else {\r
                    offsets = {\r
                        x: 1 + rad - 2 * offset,\r
                        y: - (1 + rad),\r
                        h: -1,\r
                        w: rad - 1\r
                    };\r
                }\r
                break;\r
            case "frame":\r
                outerOffsets = {\r
                    x: -offset,\r
                    y: -offset,\r
                    w: offset * 2,\r
                    h: offset * 2\r
                };\r
                if (Ext.supports.CSS3BoxShadow) {\r
                    offsets = {\r
                        x: 0,\r
                        y: 0,\r
                        h: 0,\r
                        w: 0\r
                    };\r
                }\r
                else {\r
                    offsets = {\r
                        x: 1 + rad - 2 * offset,\r
                        y: 1 + rad - 2 * offset,\r
                        h: offset - rad - 1,\r
                        w: offset - rad - 1\r
                    };\r
                }\r
                break;\r
            case "bottom":\r
                outerOffsets = {\r
                    x: -offset,\r
                    y: 0,\r
                    w: offset * 2,\r
                    h: offset\r
                };\r
                if (Ext.supports.CSS3BoxShadow) {\r
                    offsets = {\r
                        x: 0,\r
                        y: offset,\r
                        h: -offset,\r
                        w: 0\r
                    };\r
                }\r
                else {\r
                    offsets = {\r
                        x: 0,\r
                        y: offset,\r
                        h: 0,\r
                        w: 0\r
                    };\r
                }\r
                break;\r
        }\r
\r
        /**\r
         * @property {Object} offsets The offsets used for positioning the shadow element\r
         * relative to its target element\r
         */\r
        me.offsets = offsets;\r
\r
        /**\r
         * @property {Object} outerOffsets Offsets that represent the union of the areas\r
         * of the target element and the shadow combined.  Used by Ext.dom.Element for\r
         * ensuring that the shim (if present) extends under the full area of both elements.\r
         */\r
        me.outerOffsets = outerOffsets;\r
    },\r
\r
    /**\r
     * @private\r
     * Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;\r
     * @return {Number[]} Top, right, bottom and left shadow size.\r
     */\r
    getShadowSize: function() {\r
        var me = this,\r
            offset = me.el ? me.offset : 0,\r
            result = [offset, offset, offset, offset],\r
            mode = me.mode.toLowerCase();\r
\r
        // There are only offsets if the shadow element is present.\r
        if (me.el && mode !== 'frame') {\r
            result[0] = 0;\r
            if (mode == 'drop') {\r
                result[3] = 0;\r
            }\r
        }\r
        return result;\r
    },\r
\r
\r
    /**\r
     * @private\r
     * CSS property used to set the box shadow.\r
     */\r
    boxShadowProperty: (function() {\r
        var property = 'boxShadow',\r
            style = document.documentElement.style;\r
\r
        if (!('boxShadow' in style)) {\r
            if ('WebkitBoxShadow' in style) {\r
                // Safari prior to version 5.1 and Chrome prior to version 10\r
                property = 'WebkitBoxShadow';\r
            }\r
            else if ('MozBoxShadow' in style) {\r
                // FF 3.5 & 3.6\r
                property = 'MozBoxShadow';\r
            }\r
        }\r
\r
        return property;\r
    }()),\r
\r
    beforeShow: function() {\r
        var me = this,\r
            style = me.el.dom.style,\r
            shim = me.shim;\r
\r
        if (Ext.supports.CSS3BoxShadow) {\r
            style[me.boxShadowProperty] = '0 0 ' + (me.offset + 2) + 'px #888';\r
        } else {\r
            style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";\r
        }\r
\r
        // if we are showing a shadow, and we already have a visible shim, we need to\r
        // realign the shim to ensure that it includes the size of target and shadow els\r
        if (shim) {\r
            shim.realign();\r
        }\r
    },\r
\r
    /**\r
     * Sets the opacity of the shadow\r
     * @param {Number} opacity The opacity\r
     */\r
    setOpacity: function(opacity){\r
        var el = this.el;\r
\r
        if (el) {\r
            if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {\r
                opacity = Math.floor(opacity * 100 / 2) / 100;\r
            }\r
            this.opacity = opacity;\r
            el.setOpacity(opacity);\r
        }\r
    }\r
});
Commit	Line	Data
6527f429 DM	1	/**\r
	2	* Simple class that can provide a shadow effect for any absolutely positioned {@link\r
	3	* Ext.dom.Element Element}.\r
	4	* \r
	5	* Not meant to be used directly. To apply a shadow to an Element use the \r
	6	* {@link Ext.dom.Element#enableShadow enableShadow} method.\r
	7	* \r
	8	* @private\r
	9	*/\r
	10	Ext.define('Ext.dom.Shadow', {\r
	11	extend: 'Ext.dom.Underlay',\r
	12	alternateClassName: 'Ext.Shadow',\r
	13	\r
	14	/**\r
	15	* @cfg {String} mode\r
	16	* The shadow display mode. Supports the following options:\r
	17	*\r
	18	* - sides : Shadow displays on both sides and bottom only\r
	19	* - frame : Shadow displays equally on all four sides\r
	20	* - drop : Traditional bottom-right drop shadow\r
	21	*/\r
	22	mode: 'drop',\r
	23	\r
	24	/**\r
	25	* @cfg {Number} offset\r
	26	* The number of pixels to offset the shadow from the element\r
	27	*/\r
	28	offset: 4,\r
	29	\r
	30	cls: Ext.baseCSSPrefix + (!Ext.supports.CSS3BoxShadow ? 'ie' : 'css') + '-shadow',\r
	31	\r
	32	/**\r
	33	* Creates new Shadow.\r
	34	* @param {Object} config (optional) Config object.\r
	35	*/\r
	36	constructor: function(config) {\r
	37	var me = this,\r
	38	outerOffsets, offsets, offset, rad;\r
	39	\r
	40	me.callParent([config]);\r
	41	\r
	42	me.elementConfig = {\r
	43	cls: me.cls,\r
	44	role: 'presentation'\r
	45	};\r
	46	\r
	47	offset = me.offset;\r
	48	rad = Math.floor(offset / 2);\r
	49	me.opacity = 50;\r
	50	switch (me.mode.toLowerCase()) {\r
	51	case "drop":\r
	52	outerOffsets = {\r
	53	x: 0,\r
	54	y: 0,\r
	55	w: offset,\r
	56	h: offset\r
	57	};\r
	58	if (Ext.supports.CSS3BoxShadow) {\r
	59	offsets = {\r
	60	x: offset,\r
	61	y: offset,\r
	62	h: -offset,\r
	63	w: -offset\r
	64	};\r
65	}\r
66	else {\r
67	offsets = {\r
68	x: -rad,\r
69	y: -rad,\r
70	h: -rad,\r
71	w: -rad\r
72	};\r
73	}\r
74	break;\r
75	case "sides":\r
76	outerOffsets = {\r
77	x: -offset,\r
78	y: 0,\r
79	w: offset * 2,\r
80	h: offset\r
81	};\r
82	if (Ext.supports.CSS3BoxShadow) {\r
83	offsets = {\r
84	x: 0,\r
85	y: offset,\r
86	h: -offset,\r
87	w: 0\r
88	};\r
89	}\r
90	else {\r
91	offsets = {\r
92	x: 1 + rad - 2 * offset,\r
93	y: - (1 + rad),\r
94	h: -1,\r
95	w: rad - 1\r
96	};\r
97	}\r
98	break;\r
99	case "frame":\r
100	outerOffsets = {\r
101	x: -offset,\r
102	y: -offset,\r
103	w: offset * 2,\r
104	h: offset * 2\r
105	};\r
106	if (Ext.supports.CSS3BoxShadow) {\r
107	offsets = {\r
108	x: 0,\r
109	y: 0,\r
110	h: 0,\r
111	w: 0\r
112	};\r
113	}\r
114	else {\r
115	offsets = {\r
116	x: 1 + rad - 2 * offset,\r
117	y: 1 + rad - 2 * offset,\r
118	h: offset - rad - 1,\r
119	w: offset - rad - 1\r
120	};\r
121	}\r
122	break;\r
123	case "bottom":\r
124	outerOffsets = {\r
125	x: -offset,\r
126	y: 0,\r
127	w: offset * 2,\r
128	h: offset\r
129	};\r
130	if (Ext.supports.CSS3BoxShadow) {\r
131	offsets = {\r
132	x: 0,\r
133	y: offset,\r
134	h: -offset,\r
135	w: 0\r
136	};\r
137	}\r
138	else {\r
139	offsets = {\r
140	x: 0,\r
141	y: offset,\r
142	h: 0,\r
143	w: 0\r
144	};\r
145	}\r
146	break;\r
147	}\r
148	\r
149	/**\r
150	* @property {Object} offsets The offsets used for positioning the shadow element\r
151	* relative to its target element\r
152	*/\r
153	me.offsets = offsets;\r
154	\r
155	/**\r
156	* @property {Object} outerOffsets Offsets that represent the union of the areas\r
157	* of the target element and the shadow combined. Used by Ext.dom.Element for\r
158	* ensuring that the shim (if present) extends under the full area of both elements.\r
159	*/\r
160	me.outerOffsets = outerOffsets;\r
161	},\r
162	\r
163	/**\r
164	* @private\r
165	* Returns the shadow size on each side of the element in standard CSS order: top, right, bottom, left;\r
166	* @return {Number[]} Top, right, bottom and left shadow size.\r
167	*/\r
168	getShadowSize: function() {\r
169	var me = this,\r
170	offset = me.el ? me.offset : 0,\r
171	result = [offset, offset, offset, offset],\r
172	mode = me.mode.toLowerCase();\r
173	\r
174	// There are only offsets if the shadow element is present.\r
175	if (me.el && mode !== 'frame') {\r
176	result[0] = 0;\r
177	if (mode == 'drop') {\r
178	result[3] = 0;\r
179	}\r
180	}\r
181	return result;\r
182	},\r
183	\r
184	\r
185	/**\r
186	* @private\r
187	* CSS property used to set the box shadow.\r
188	*/\r
189	boxShadowProperty: (function() {\r
190	var property = 'boxShadow',\r
191	style = document.documentElement.style;\r
192	\r
193	if (!('boxShadow' in style)) {\r
194	if ('WebkitBoxShadow' in style) {\r
195	// Safari prior to version 5.1 and Chrome prior to version 10\r
196	property = 'WebkitBoxShadow';\r
197	}\r
198	else if ('MozBoxShadow' in style) {\r
199	// FF 3.5 & 3.6\r
200	property = 'MozBoxShadow';\r
201	}\r
202	}\r
203	\r
204	return property;\r
205	}()),\r
206	\r
207	beforeShow: function() {\r
208	var me = this,\r
209	style = me.el.dom.style,\r
210	shim = me.shim;\r
211	\r
212	if (Ext.supports.CSS3BoxShadow) {\r
213	style[me.boxShadowProperty] = '0 0 ' + (me.offset + 2) + 'px #888';\r
214	} else {\r
215	style.filter = "progid:DXImageTransform.Microsoft.alpha(opacity=" + me.opacity + ") progid:DXImageTransform.Microsoft.Blur(pixelradius=" + (me.offset) + ")";\r
216	}\r
217	\r
218	// if we are showing a shadow, and we already have a visible shim, we need to\r
219	// realign the shim to ensure that it includes the size of target and shadow els\r
220	if (shim) {\r
221	shim.realign();\r
222	}\r
223	},\r
224	\r
225	/**\r
226	* Sets the opacity of the shadow\r
227	* @param {Number} opacity The opacity\r
228	*/\r
229	setOpacity: function(opacity){\r
230	var el = this.el;\r
231	\r
232	if (el) {\r
233	if (Ext.isIE && !Ext.supports.CSS3BoxShadow) {\r
234	opacity = Math.floor(opacity * 100 / 2) / 100;\r
235	}\r
236	this.opacity = opacity;\r
237	el.setOpacity(opacity);\r
238	}\r
239	}\r
240	});