X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/c930e9176a5a85509c5b0230e2bff5c22a591432..HEAD:/docs/source/Shadow.html?ds=sidebyside diff --git a/docs/source/Shadow.html b/docs/source/Shadow.html index edfb79fd..b36884e3 100644 --- a/docs/source/Shadow.html +++ b/docs/source/Shadow.html @@ -1,195 +1,246 @@ - - - The source code - - - - -
/** - * @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:
    - *
  • sides : Shadow displays on both sides and bottom only
  • - *
  • frame : Shadow displays equally on all four sides
  • - *
  • drop : Traditional bottom-right drop shadow
  • - *
+ /** + * @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 ? - '
' : - '
'; - 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); } - }; -}();
- - \ No newline at end of file + } +});
+ +