Bug Tracker

Ticket #1923: fx.shadow.js.diff

File fx.shadow.js.diff, 7.0 KB (added by brandon, 14 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() { $(this[0]).next(".fx-shadow").show(); }
     7        $.fn.shadowDisable = function() { $(this[0]).next(".fx-shadow").hide(); }
    88       
    99        $.fn.shadow = function(options) {
     10                options = $.extend({
     11                        offset:  1,
     12                        opacity: 0.2,
     13                        color:   "#000",
     14                        monitor: false
     15                }, options || {});
     16                options.offset -= 1;
    1017               
    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                
    1618                return this.each(function() {
    1719                       
    18                         var cur = $(this);
     20                        // Remove an existing shadow if it exists
     21                        $(this[0]).next(".fx-shadow").remove();
    1922                       
     23                        var $element = $(this),
     24                       
    2025                        //Create a shadow element
    21                         var shadow = $("<div class='fx-shadow' style='position: relative;'></div>"); cur.after(shadow);
     26                        $shadow = $("<div class='fx-shadow' style='position: relative;'></div>").insertAfter($element);
    2227                       
    2328                        //Figure the base height and width
    24                         var baseWidth = cur.outerWidth();
    25                         var baseHeight = cur.outerHeight();
     29                        baseWidth  = $element.outerWidth(),
     30                        baseHeight = $element.outerHeight(),
    2631                       
    2732                        //get the offset
    28                         var position = cur.position();
     33                        position = $element.position(),
    2934                       
     35                        //get z-index
     36                        zIndex = parseInt($element.css("zIndex")) || 0;
     37                       
    3038                        //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);
     39                        $('<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);
     40                        $('<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);
     41                        $('<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);
     42                        $('<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);
    3543                       
    3644                        //Add color
    37                         $("div.fx-shadow-color", shadow).css("background-color", options.color);
     45                        $("div.fx-shadow-color", $shadow).css("background-color", options.color);
    3846                       
    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                         }
     47                        //Set zIndex +1 and make sure position is at least relative
     48                        //Attention: the zIndex will get one higher!
     49                        $element
     50                                .css({
     51                                        zIndex: zIndex + 1,
     52                                        position: ($element.css("position") == "static" ? "relative" : "")
     53                                });
    4754                       
    4855                        //Copy the original z-index and position to the clone
    4956                        //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")
     57                        $shadow.css({
     58                                position:     "absolute",
     59                                zIndex:       zIndex,
     60                                left:         position.left+"px",
     61                                top:          position.top+"px",
     62                                width:        baseWidth,
     63                                height:       baseHeight,
     64                                marginLeft:   $element.css("marginLeft"),
     65                                marginRight:  $element.css("marginRight"),
     66                                marginBottom: $element.css("marginBottom"),
     67                                marginTop:    $element.css("marginTop")
    6168                        });
    6269                       
    6370                       
    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                         }
     71                        if ( options.monitor ) {
     72                                function rearrangeShadow() {
     73                                        var $element = $(this), $shadow = $element.next();
     74                                        // $shadow.css( $element.position() );
     75                                        $shadow.css({
     76                                                top:  parseInt($element.css("top"))  +"px",
     77                                                left: parseInt($element.css("left")) +"px"
     78                                        })
     79                                        $(">*", $shadow).css({ height: this.offsetHeight+"px", width: this.offsetWidth+"px" });
     80                                }
    6981                       
    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);
     82                                //Attempt to use DOMAttrModified event
     83                                $element.bind("DOMAttrModified", rearrangeShadow);
     84                       
     85                                // Use expressions if they exist (IE)
     86                                if( $shadow[0].style.setExpression ) {
     87                                        $shadow[0].style.setExpression("left", "parseInt(jQuery(this.previousSibling).css('left')) + 'px'");
     88                                        $shadow[0].style.setExpression("top" , "parseInt(jQuery(this.previousSibling).css('top') ) + 'px'");
     89                                }
    7790                        }
    7891
    79                                
    8092                });
    8193        };
    8294