X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6e39d509471fe9b4e2660e0d1631b350d0c66f40..HEAD:/docs/source/Shadow.html?ds=sidebyside diff --git a/docs/source/Shadow.html b/docs/source/Shadow.html index dd2de4b6..b36884e3 100644 --- a/docs/source/Shadow.html +++ b/docs/source/Shadow.html @@ -1,196 +1,246 @@ - -
- -/** - * @class Ext.Shadow + + + + ++ +The source code + + + + + + +/** + * @class Ext.Shadow * 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. - * @constructor - * Create a new Shadow - * @param {Object} config The config object */ -Ext.Shadow = function(config){ - Ext.apply(this, config); - if(typeof this.mode != "string"){ - this.mode = this.defaultMode; - } - var o = this.offset, a = {h: 0}; - var rad = Math.floor(this.offset/2); - switch(this.mode.toLowerCase()){ // all this hideous nonsense calculates the various offsets for shadows - case "drop": - a.w = 0; - a.l = a.t = o; - a.t -= 1; - if(Ext.isIE){ - a.l -= this.offset + rad; - a.t -= this.offset + rad; - a.w -= rad; - a.h -= rad; - a.t += 1; - } - break; - case "sides": - a.w = (o*2); - a.l = -o; - a.t = o-1; - if(Ext.isIE){ - a.l -= (this.offset - rad); - a.t -= this.offset + rad; - a.l += 1; - a.w -= (this.offset - rad)*2; - a.w -= rad + 1; - a.h -= 1; - } - break; - case "frame": - a.w = a.h = (o*2); - a.l = a.t = -o; - a.t += 1; - a.h -= 2; - if(Ext.isIE){ - a.l -= (this.offset - rad); - a.t -= (this.offset - rad); - a.l += 1; - a.w -= (this.offset + rad + 1); - a.h -= (this.offset + rad); - a.h += 1; - } - break; - }; +Ext.define('Ext.Shadow', { + requires: ['Ext.ShadowPool'], - this.adjusts = a; -}; + /** + * Creates new Shadow. + * @param {Object} config (optional) Config object. + */ + constructor: function(config) { + var me = this, + adjusts = { + h: 0 + }, + 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.w = adjusts.h = -offset; + adjusts.l = adjusts.t = offset; + } else { + adjusts.w = 0; + adjusts.l = adjusts.t = offset; + adjusts.t -= 1; + if (Ext.isIE) { + adjusts.l -= offset + rad; + adjusts.t -= offset + rad; + adjusts.w -= rad; + adjusts.h -= rad; + adjusts.t += 1; + } + } + break; + case "sides": + if (Ext.supports.CSS3BoxShadow) { + adjusts.h -= offset; + adjusts.t = offset; + adjusts.l = adjusts.w = 0; + } else { + adjusts.w = (offset * 2); + adjusts.l = -offset; + adjusts.t = offset - 1; + if (Ext.isIE) { + adjusts.l -= (offset - rad); + adjusts.t -= offset + rad; + adjusts.l += 1; + adjusts.w -= (offset - rad) * 2; + adjusts.w -= rad + 1; + adjusts.h -= 1; + } + } + break; + case "frame": + if (Ext.supports.CSS3BoxShadow) { + adjusts.l = adjusts.w = adjusts.t = 0; + } else { + adjusts.w = adjusts.h = (offset * 2); + adjusts.l = adjusts.t = -offset; + adjusts.t += 1; + adjusts.h -= 2; + if (Ext.isIE) { + adjusts.l -= (offset - rad); + adjusts.t -= (offset - rad); + adjusts.l += 1; + adjusts.w -= (offset + rad + 1); + adjusts.h -= (offset + rad); + adjusts.h += 1; + } + break; + } + } + me.adjusts = adjusts; + }, -Ext.Shadow.prototype = { - /** - * @cfg {String} mode - * The shadow display mode. Supports the following options:- - \ No newline at end of file + } +});+ /** + * @cfg {String} mode + * The shadow display mode. Supports the following options:<div class="mdetail-params"><ul> + * <li><b><tt>sides</tt></b> : Shadow displays on both sides and bottom only</li> + * <li><b><tt>frame</tt></b> : Shadow displays equally on all four sides</li> + * <li><b><tt>drop</tt></b> : Traditional bottom-right drop shadow</li> + * </ul></div> */ - /** - * @cfg {String} offset - * The number of pixels to offset the shadow from the element (defaults to 4) + /** + * @cfg {Number} offset + * The number of pixels to offset the shadow from the element */ offset: 4, // private - defaultMode: "drop", + defaultMode: "drop", - /** - * Displays the shadow under the target element - * @param {Mixed} targetEl The id or element under which the shadow should display + /** + * 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){ + show: function(target) { + var me = this, + index; + target = Ext.get(target); - if(!this.el){ - this.el = Ext.Shadow.Pool.pull(); - if(this.el.dom.nextSibling != target.dom){ - this.el.insertBefore(target); + if (!me.el) { + me.el = Ext.ShadowPool.pull(); + if (me.el.dom.nextSibling != target.dom) { + me.el.insertBefore(target); } } - this.el.setStyle("z-index", this.zIndex || parseInt(target.getStyle("z-index"), 10)-1); - if(Ext.isIE){ - this.el.dom.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity=50) progid:DXImageTransform.Microsoft.Blur(pixelradius="+(this.offset)+")"; + 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) + ")"; } - this.realign( + me.realign( target.getLeft(true), target.getTop(true), - target.getWidth(), - target.getHeight() + target.dom.offsetWidth, + target.dom.offsetHeight ); - this.el.dom.style.display = "block"; + me.el.dom.style.display = "block"; }, - /** - * Returns true if the shadow is visible, else false + /** + * Returns true if the shadow is visible, else false */ - isVisible : function(){ - return this.el ? true : false; + isVisible: function() { + return this.el ? true: false; }, - /** - * Direct alignment when values are already available. Show must be called at least once before + /** + * 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, w, h){ - if(!this.el){ + realign: function(l, t, targetWidth, targetHeight) { + if (!this.el) { return; } - var a = this.adjusts, d = this.el.dom, s = d.style; - var iea = 0; - s.left = (l+a.l)+"px"; - s.top = (t+a.t)+"px"; - var sw = (w+a.w), sh = (h+a.h), sws = sw +"px", shs = sh + "px"; - if(s.width != sws || s.height != shs){ - s.width = sws; - s.height = shs; - if(!Ext.isIE){ - var cn = d.childNodes; - var sww = Math.max(0, (sw-12))+"px"; - cn[0].childNodes[1].style.width = sww; - cn[1].childNodes[1].style.width = sww; - cn[2].childNodes[1].style.width = sww; - cn[1].style.height = Math.max(0, (sh-12))+"px"; + var adjusts = this.adjusts, + d = this.el.dom, + targetStyle = d.style, + shadowWidth, + shadowHeight, + cn, + sww, + 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.boxShadow = '0 0 ' + this.offset + 'px 0 #888'; + } else { + + // Adjust the 9 point framed element to poke out on the required sides + if (!Ext.isIE) { + cn = d.childNodes; + sww = Math.max(0, (shadowWidth - 12)) + "px"; + cn[0].childNodes[1].style.width = sww; + cn[1].childNodes[1].style.width = sww; + cn[2].childNodes[1].style.width = sww; + cn[1].style.height = Math.max(0, (shadowHeight - 12)) + "px"; + } } } }, - /** - * Hides this shadow + /** + * Hides this shadow */ - hide : function(){ - if(this.el){ - this.el.dom.style.display = "none"; - Ext.Shadow.Pool.push(this.el); - delete this.el; + hide: function() { + var me = this; + + if (me.el) { + me.el.dom.style.display = "none"; + Ext.ShadowPool.push(me.el); + delete me.el; } }, - /** - * Adjust the z-index of this shadow + /** + * Adjust the z-index of this shadow * @param {Number} zindex The new z-index */ - setZIndex : function(z){ + setZIndex: function(z) { this.zIndex = z; - if(this.el){ - this.el.setStyle("z-index", z); + if (this.el) { + this.el.setStyle("z-index", z); } - } -}; - -// Private utility class that manages the internal Shadow cache -Ext.Shadow.Pool = function(){ - var p = []; - var markup = Ext.isIE ? - '' : - '- *
- sides : Shadow displays on both sides and bottom only
- *- frame : Shadow displays equally on all four sides
- *- drop : Traditional bottom-right drop shadow
- *'; - return { - pull : function(){ - var sh = p.shift(); - if(!sh){ - sh = Ext.get(Ext.DomHelper.insertHtml("beforeBegin", document.body.firstChild, markup)); - sh.autoBoxAdjust = false; + }, + + /** + * 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; } - return sh; - }, - - push : function(sh){ - p.push(sh); + this.opacity = opacity; + this.el.setOpacity(opacity); } - }; -}();