edgedcanvas.js

javascript 很酷的类库

        mediaStart = this._$rightAngle + imgHTML.substring(0, dotIndex);
        cellEnd = imgHTML.substring(dotIndex) + "</TD>";

        // NOTE: IE native drawing problems using PNG alpha filter directly on table cell: 
        // HTML is correct, reported and visible sizes for cells are correct, but some cells,
        // at random, stretch PNG only partway across cell.  Meaningless native changes, like
        // setting a cell border to "" when it is already "", will correct some cells but not
        // others.
        //cellStart = "<TD STYLE='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\""
        //    + urlStart + "_";
        //cellEnd = extension + "\",sizingMethod=\"scale\");'></TD>";
    } else {
        // NOTE: Moz can't handle nested 100% height image tags immediately within
        // table cells (see test file mentioned below), however, there is a table-based
        // rendering that works and does stretch the image
        mediaStart = " STYLE='background:url(" + urlStart;
        cellEnd = extension + ")'></TD>";
    }
    // incorporate edgeColor into image name if specified
    if (this.edgeColor) mediaStart += isc._underscore + this.edgeColor;

    var edges = this.shownEdges;

    
    output.append(this._$edgeTableStart,
                  this._leftEdge, this._$edgeColMid, this._rightEdge, this._$rightAngle,
                  "<TR HEIGHT=", this._topEdge, this._$rightAngle);

    this._writeEdgeCells(cellStart, this._topEdge, mediaStart, cellEnd, 0, 2, edges, output);

    if (isc.Browser.isIE && isc.Browser.isStrict) {
        // write explicit size for IE strict, which will be updated on resize
        output.append("</TR><TR HEIGHT=", 
                      this.getHeight() - this._topEdge - this._bottomEdge,
                      ">");
    } else {
        output.append("</TR><TR>");
    }

    if (isc.Browser.isMoz) {
        // Moz needs explicit 100% on the central cells or the side rails revert to
        // 1px whenever the Canvas is moved.  Natively reproducible.
        this._writeEdgeCells(cellStart, "100%", mediaStart, cellEnd, 3, 5, edges, output);
    } else {
        this._writeEdgeCells(nonHeightStart, null, mediaStart, cellEnd, 3, 5, edges, output);
    }

    output.append("</TR><TR HEIGHT=", this._bottomEdge, ">");

    this._writeEdgeCells(cellStart, this._bottomEdge, mediaStart, cellEnd, 6, 8, edges, output);

    output.append("</TR></TABLE>");

    //this.logWarn("output: " + output.toString());

    return output.toString();
},

_$edgeTableStart : "<TABLE CELLPADDING=0 CELLSPACING=0 "
                        + "STYLE='height:100%;width:100%;table-layout:fixed'>"
                        + "<COL WIDTH=",
_$edgeColMid : "><COL><COL WIDTH=", 

// params:
// cellStart/cellEnd: HTML for non-empty cells; edgeName will be inserted between
// start/end: range of edge names to output, inclusive
// edges: map of edges that will actually be output (otherwise, empty cell used)
// output: StringBuffer to append to
_writeEdgeCells : function (cellStart, height, mediaStart, cellEnd, start, end, edges, output) {
    for (var i = start; i <= end; i++) {
        var edgeName = this._allEdges[i];
        if (edges[edgeName] || (this.showCenter && edgeName == isc.Canvas.CENTER)) {
            output.append(cellStart, height, mediaStart, this.getEdgePrefix(edgeName), 
                          isc._underscore, edgeName, cellEnd);
        } else {
            if (this.centerBackgroundColor && edgeName == isc.Canvas.CENTER) {
                output.append("<TD BGCOLOR=", this.centerBackgroundColor, "></TD>");
            } else {
                output.append(this._emptyCell);
            }
        }
    }
},

// this is essentially here to allow "depth" to be inserted by dropShadows, so not documented
// for now
getEdgePrefix : function (edgeName) { },

_handleResized : function () {
        
    if (!this.isDrawn() || this._suppressReactToResize) return;

    // HACK: very odd - without this, the bottom edge gets chopped off in Opera.  Using the IE
    // strict path below fixes initial rendering of overflowing edged canvases, but if the
    // canvas is subsequently resized, the bottom edge gets chopped off.
    if (isc.Browser.isOpera) {
        this.masterElement.bringToFront();
        return;
    }

    // update middle row for IE strict
    
    if (isc.Browser.isIE && isc.Browser.isStrict) {
        var middleRow = this.getHandle().firstChild.rows[1];
        this._assignSize(middleRow.style, this._$height, 
                         this.getHeight() - this._topEdge - this._bottomEdge);
        return;
    }

    if (!isc.Browser.isMoz) return;

    // NOTE: Moz issues: even after being coddled with the unnecessary overflow:visible setting it
    // likes, and some redundant size specifications that avoid it borking itself on move, Moz
    // still needs one final smack to the head to get the size right: if there's media in the
    // central cell, Moz won't allow the table to get shorter than it is wide (wider than it is
    // tall is OK).  Setting a height on the central cell fixes this.  This needs to be done
    // after draw, redraw or resize.
    var middleCell = this.getHandle().firstChild.rows[1].cells[1],
        height = this.getHeight() - this._topEdge - this._bottomEdge;
    // don't assign to negative size - moz just ignores this        
    if (height < 0) height = 0;
    //this.logWarn("assigning: " + height +
    //             " to " + this.echoLeaf(middleCell));
    this._assignSize(middleCell.style, this._$height, height);
},

layoutChildren : function (a,b,c) {
    var children = this.children;
    if (!children) return;

    
    isc.Canvas._instancePrototype.layoutChildren.call(this, a,b,c);    
    //this.Super("layoutChildren", arguments);

    if (children.length == 0) return;

    var child = children[0];
    child.setRect(this._leftMargin, this._topMargin,
                  this.getInnerWidth(),
                  this.getInnerHeight());
},

addChild : function (a,b,c) {
    
    isc.Canvas._instancePrototype.addChild.call(this, a,b,c);    
    //this.Super("addChild", arguments);
    this.layoutChildren("addChild");
},

draw : function (a,b,c,d) {

    if (!this.readyToDraw()) return this;
    // if we're acting as a peer, size now, since our master has drawn and sizes are available
    if (this.masterElement) {
        // if we, or one of our ancestors is relatively positioned, and the page
        // is not loaded, we likely have a native DOM ancestor that is not yet complete
        // (EG an open table cell tag).
        // This makes our reported sizing be incorrect. Catch this case and explicitly 
        // call fitToMaster() on page load
        var me = this.masterElement,
            hasRelativeParent = false;
        while (me) {
            if (me.position == this._$relative) {
                hasRelativeParent = true;
                break;
            }
            me = me.parentElement;
        }
        if (!hasRelativeParent || isc.Page.isLoaded()) this.fitToMaster();
        else isc.Page.setEvent("load", this, isc.Page.FIRE_ONCE, "fitToMaster");
    }
    
    this.invokeSuper(isc.EdgedCanvas, "draw", a,b,c,d);
    this._handleResized(); // for Moz
    return this;
},


fitToMaster : function () {

    if (this.destroyed) return;
    
    var master = this.masterElement;

    // We want to ensure the master element's size is fully up to date.
    // If we're pending the initial adjustOverflow because the handle isn't fully rendered,
    // wait for it to complete and re-run this method.
    if (master._delayedAdjustOverflow) {
        isc.Timer.setTimeout({target:this, methodName:"fitToMaster"}, 200);
        return;
    // Otherwise if markForAdjustOverflow() was called, just adjustOverflow now.        
    } else if (master._overflowQueued) {
        master.adjustOverflow();
    }
    
    var margins = master._getSpecifiedMargins();
            
    this.setRect( master.getOffsetLeft() + margins.left,
                  master.getOffsetTop() + margins.top,
                  Math.max(1, (master.getVisibleWidth() - margins.left - margins.right)),
                  Math.max(1, (master.getVisibleHeight() - margins.top - margins.bottom))
    );

},

redraw : function () {
    this.Super("redraw", arguments);
    this._handleResized(); // for Moz
    return this;
},

// when the master resizes, resize the edgedCanvas to fit the interior of this widgets *specified*
// margins
masterResized : function () {
    var master = this.masterElement;

    //>Animation If the master is animated show-ing / hide-ing, bail. We handle this case 
    // specially in animated show/hide.
    if (this.masterElement.isAnimating([this._$show, this._$hide])) return;
    //<Animation
    
    var margins = master._getSpecifiedMargins();

    this.resizeTo(Math.max(1, master.getVisibleWidth() - margins.left - margins.right),
                  Math.max(1, master.getVisibleHeight() - margins.top - margins.bottom));
},

// ---------------------------------------------------------------------------------------
setEdgeImage : function (edgeImage) {
    if (this.edgeImage == edgeImage) return;
    this.edgeImage = edgeImage;
    this.markForRedraw("setEdgeImage");
}

});

isc.defineClass("DropShadow", "EdgedCanvas").addProperties({
    skinImgDir:"images/shared/shadows/",
    edgeImage:"[SKIN]ds.png",

    // never occlude anything in terms of events
    isMouseTransparent:true,

    // this is a bit redundant, but we can't simply flip on edges.center without affecting the
    // superclass structure
    shownEdges : {
            center:true,
            TL:true,
            T:true,
            TR:true,
            L:true,
            R:true,
            BL:true,
            B:true,
            BR:true
    },

    depth:4,

    initWidget : function () {
        this.setDepth(this.depth);
        this.Super(this._$initWidget);
    },
    
    setDepth : function (depth) {
        if (depth != null) this.depth = depth;
    
        var newSoftness = (this.softness || this.depth),
            softnessChange = this._softness != newSoftness;

        // auto-derive softness and offset from depth if not specified.  Use separate
        // properties so depth can be changed later and we won't think the properties were
        // developer-set
        this._softness = newSoftness;
        this.edgeSize = 2*this._softness;

        var defaultOffset = this._firstNonNull(this.offset, Math.round(this.depth/2));
        this._offsetX = this._firstNonNull(this.offsetX, defaultOffset);
        this._offsetY = this._firstNonNull(this.offsetY, defaultOffset);

        // XXX we need to call this to take into account new margin settings, but currently
        // this *always* marks for redraw
        this.updateEdgeSizes();

        // depth change implies a move, resize, and redraw
        if (this.isDrawn()) {
            this.masterMoved();
            // softness change means new media, so redraw
            
            if (softnessChange || this.isDirty()) this.redraw();
            this.masterResized();
        }
    },

    // add a center segment, which doesn't use the "depth" as a prefix
    getEdgePrefix : function (edgeName) {   
        if (edgeName != isc.Canvas.CENTER) return this._softness;
    },

    // NOTE: fires on draw, and whenever the master moves
    masterMoved : function () {
        var hidden = this.visibility == isc.Canvas.HIDDEN,
            master = this.masterElement,
            left = master.getOffsetLeft(),
            top = master.getOffsetTop();
        if (!hidden) {
            left += this._offsetX - this._softness;
            top += this._offsetY - this._softness;
        }
        this.moveTo(left, top);
    },

    // NOTE: fires on draw, and whenever the master resizes
    masterResized : function () {
        
        // when we're hidden, we're always rendered at size 1x1 so we don't take up any space
        if (this.visibility == isc.Canvas.HIDDEN) return;
        
        var master = this.masterElement;
        //this.logWarn("masterResized called, master size: " + 
        //             [master.getVisibleWidth(), master.getVisibleHeight()]
                     // + this.getStackTrace()
        //             );
        this.resizeTo(master.getVisibleWidth() + 2*this._softness,
                      master.getVisibleHeight() + 2*this._softness);        
    },
    
    // Make 'fitToMaster' fall through to masterMoved(); masterResized()
    
    fitToMaster : function () {
        this.masterMoved();
        this.masterResized();
    },
    
    // Ensure that when hidden the shadow doesn't take up any space
    // Use setVisibility rather than show()/hide() as this method may be called directly
    setVisibility : function (vis, a,b,c,d) {
        var changed = (vis != this.visibility);
        this.invokeSuper(isc.DropShadow, "setVisibility", vis,a,b,c,d);
        
        if (changed) {
            if (vis == isc.Canvas.HIDDEN) {
                this.resizeTo(1,1);
                var master = this.masterElement;
                this.moveTo(master.getOffsetLeft(), master.getOffsetTop());
            } else {
                this.fitToMaster();
            }
        }
    },
    
    // Avoid recursive shadows 
    showShadow:false

});