Bug Tracker

Ticket #1923: fx.shadow.js.2.diff

File fx.shadow.js.2.diff, 7.2 KB (added by brandon, 12 years ago)
  • fx/current/fx.shadow.js

     
    33        //Make nodes selectable by expression
    44        $.extend($.expr[':'], { shadowed: "(' '+a.className+' ').indexOf(' fx-shadowed ')" });
    55       
    6         $.fn.shadowEnable = function() { if($(this[0]).next().is(".fx-shadow")) $(this[0]).next().show(); }
    7         $.fn.shadowDisable = function() { if($(this[0]).next().is(".fx-shadow")) $(this[0]).next().hide(); }
     6        $.fn.shadowEnable  = function() { return $(this).next(".fx-shadow").show().end();   };
     7        $.fn.shadowDisable = function() { return $(this).next(".fx-shadow").hide().end();   };
     8        $.fn.shadowDestroy = function() { return $(this).next(".fx-shadow").remove().end(); };
    89       
    910        $.fn.shadow = function(options) {
     11                options = $.extend({
     12                        offset:  1,
     13                        opacity: 0.2,
     14                        color:   "#000",
     15                        monitor: false
     16                }, options || {});
     17                options.offset -= 1;
    1018               
    11                 options = options || {};
    12                 options.offset = options.offset ? options.offset : 0;
    13                 options.opacity = options.opacity ? options.opacity : 0.2;
    14                 options.color = options.color || "#000";
    15                
    1619                return this.each(function() {
    1720                       
    18                         var cur = $(this);
     21                        // Remove an existing shadow if it exists
     22                        var $element = $(this).shadowDestroy(),
    1923                       
    20                         //Create a shadow element
    21                         var shadow = $("<div class='fx-shadow' style='position: relative;'></div>"); cur.after(shadow);
     24                        // Create a shadow element
     25                        $shadow = $("<div class='fx-shadow' style='position: relative;'></div>").insertAfter($element);
    2226                       
    23                         //Figure the base height and width
    24                         var baseWidth = cur.outerWidth();
    25                         var baseHeight = cur.outerHeight();
     27                        // Figure the base height and width
     28                        baseWidth  = $element.outerWidth(),
     29                        baseHeight = $element.outerHeight(),
    2630                       
    27                         //get the offset
    28                         var position = cur.position();
     31                        // Get the offset
     32                        position = $element.position(),
    2933                       
    30                         //Append smooth corners
    31                         $('<div class="fx-shadow-color fx-shadow-layer-1"></div>').css({ position: 'absolute', opacity: options.opacity-0.05, left: 5+options.offset, top: 5+options.offset, width: baseWidth+1, height: baseHeight+1 }).appendTo(shadow);
    32                         $('<div class="fx-shadow-color fx-shadow-layer-2"></div>').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth, height: baseHeight-3 }).appendTo(shadow);
    33                         $('<div class="fx-shadow-color fx-shadow-layer-3"></div>').css({ position: 'absolute', opacity: options.opacity-0.1, left: 7+options.offset, top: 7+options.offset, width: baseWidth-3, height: baseHeight }).appendTo(shadow);
    34                         $('<div class="fx-shadow-color fx-shadow-layer-4"></div>').css({ position: 'absolute', opacity: options.opacity, left: 6+options.offset, top: 6+options.offset, width: baseWidth-1, height: baseHeight-1 }).appendTo(shadow);
     34                        // Get z-index
     35                        zIndex = parseInt($element.css("zIndex")) || 0;
    3536                       
    36                         //Add color
    37                         $("div.fx-shadow-color", shadow).css("background-color", options.color);
     37                        // Append smooth corners
     38                        $('<div class="fx-shadow-color fx-shadow-layer-1"></div>').css({ position: 'absolute', opacity: options.opacity - 0.05,  left: options.offset,     top: options.offset,     width: baseWidth + 1, height: baseHeight + 1 }).appendTo($shadow);
     39                        $('<div class="fx-shadow-color fx-shadow-layer-2"></div>').css({ position: 'absolute', opacity: options.opacity - 0.10,  left: options.offset + 2, top: options.offset + 2, width: baseWidth,     height: baseHeight - 3 }).appendTo($shadow);
     40                        $('<div class="fx-shadow-color fx-shadow-layer-3"></div>').css({ position: 'absolute', opacity: options.opacity - 0.10,  left: options.offset + 2, top: options.offset + 2, width: baseWidth - 3, height: baseHeight     }).appendTo($shadow);
     41                        $('<div class="fx-shadow-color fx-shadow-layer-4"></div>').css({ position: 'absolute', opacity: options.opacity,         left: options.offset + 1, top: options.offset + 1, width: baseWidth - 1, height: baseHeight - 1 }).appendTo($shadow);
    3842                       
    39                         //Determine the stack order (attention: the zIndex will get one higher!)
    40                         if(!cur.css("zIndex") || cur.css("zIndex") == "auto") {
    41                                 var stack = 0;
    42                                 cur.css("position", (cur.css("position") == "static" ? "relative" : cur.css("position"))).css("z-index", "1");
    43                         } else {
    44                                 var stack = parseInt(cur.css("zIndex"));
    45                                 cur.css("zIndex", stack+1);
    46                         }
     43                        // Add color
     44                        $("div.fx-shadow-color", $shadow).css("background-color", options.color);
    4745                       
    48                         //Copy the original z-index and position to the clone
    49                         //alert(shadow); If you insert this alert, opera will time correctly!!
    50                         shadow.css({
    51                                 position: "absolute",
    52                                 zIndex: stack,
    53                                 left: position.left,
    54                                 top: position.top,
    55                                 width: baseWidth,
    56                                 height: baseHeight,
    57                                 marginLeft: cur.css("marginLeft"),
    58                                 marginRight: cur.css("marginRight"),
    59                                 marginBottom: cur.css("marginBottom"),
    60                                 marginTop: cur.css("marginTop")
     46                        // Set zIndex +1 and make sure position is at least relative
     47                        // Attention: the zIndex will get one higher!
     48                        $element
     49                                .css({
     50                                        zIndex: zIndex + 1,
     51                                        position: ($element.css("position") == "static" ? "relative" : "")
     52                                });
     53                       
     54                        // Copy the original z-index and position to the clone
     55                        // alert(shadow); If you insert this alert, opera will time correctly!!
     56                        $shadow.css({
     57                                position:     "absolute",
     58                                zIndex:       zIndex,
     59                                top:          position.top+"px",
     60                                left:         position.left+"px",
     61                                width:        baseWidth,
     62                                height:       baseHeight,
     63                                marginLeft:   $element.css("marginLeft"),
     64                                marginRight:  $element.css("marginRight"),
     65                                marginBottom: $element.css("marginBottom"),
     66                                marginTop:    $element.css("marginTop")
    6167                        });
    6268                       
    6369                       
    64                         function rearrangeShadow(el,sh) {
    65                                 var $el = $(el);
    66                                 $(sh).css($el.position());
    67                                 $(sh).children().css({ height: $el.outerHeight()+"px", width: $el.outerWidth()+"px" });
    68                         }
     70                        if ( options.monitor ) {
     71                                function rearrangeShadow() {
     72                                        var $element = $(this), $shadow = $element.next();
     73                                        // $shadow.css( $element.position() );
     74                                        $shadow.css({
     75                                                top:  parseInt($element.css("top"))  +"px",
     76                                                left: parseInt($element.css("left")) +"px"
     77                                        })
     78                                        $(">*", $shadow).css({ height: this.offsetHeight+"px", width: this.offsetWidth+"px" });
     79                                }
    6980                       
    70                         if($.browser.msie) {
    71                                 //Add dynamic css expressions
    72                                 shadow[0].style.setExpression("left","parseInt(jQuery(this.previousSibling).css('left'))+'px' || jQuery(this.previousSibling).position().left");
    73                                 shadow[0].style.setExpression("top","parseInt(jQuery(this.previousSibling).css('top'))+'px' || jQuery(this.previousSibling).position().top");
    74                         } else {
    75                                 //Bind events for good browsers
    76                                 this.addEventListener("DOMAttrModified",function() { rearrangeShadow(this,shadow); },false);
     81                                // Attempt to use DOMAttrModified event
     82                                $element.bind("DOMAttrModified", rearrangeShadow);
     83                       
     84                                // Use expressions if they exist (IE)
     85                                if( $shadow[0].style.setExpression ) {
     86                                        $shadow[0].style.setExpression("top" , "parseInt(this.previousSibling.currentStyle.top ) + 'px'");
     87                                        $shadow[0].style.setExpression("left", "parseInt(this.previousSibling.currentStyle.left) + 'px'");
     88                                }
    7789                        }
    7890
    79                                
    8091                });
    8192        };
    8293