X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..refs/heads/master:/docs/source/Shadow.html diff --git a/docs/source/Shadow.html b/docs/source/Shadow.html index ee1262fb..b36884e3 100644 --- a/docs/source/Shadow.html +++ b/docs/source/Shadow.html @@ -1,202 +1,246 @@ + - + The source code - - + + + + - - 
/*!
- * Ext JS Library 3.2.2
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-
/**
- * @class Ext.Shadow
+
+  
/**
+ * @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 +