edgedcanvas.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 






//>	@class	EdgedCanvas
// EdgedCanvas acts as a decorative, image-based frame around another single Canvas.
//
// @treeLocation Client Reference/Foundation
// @group imageEdges
// @visibility roundCorners
//<
isc.defineClass("EdgedCanvas", "Canvas").addProperties({

    // we don't want to redraw for any automatic reasons
    redrawOnResize:false,
    _redrawWithParent:false,
    _redrawWithMaster:false,

    // we do our own sizing, based on the master's margins
    _resizeWithMaster:false,

    // we don't need the extra structure, and it causes problems in Safari
    useClipDiv:false,

    
    overflow:isc.Browser.isMoz ? isc.Canvas.VISIBLE : isc.Canvas.HIDDEN,
    _useMozScrollbarsNone:false,

    // calculated margins based on visible corners and settings
    _leftMargin : 0,
    _topMargin : 0,
    _rightMargin : 0,
    _bottomMargin : 0,
    // all edges in cell order
    _allEdges : ["TL", "T", "TR", "L", "center", "R", "BL", "B", "BR"],

    // Edge Media
    // ---------------------------------------------------------------------------------------

    //> @attr edgedCanvas.skinImgDir   (URL : "images/edges/" : IR)
    // Standard skin directory for edge images (sides and corners).
    //
    // @group imageEdges
    // @visibility roundCorners
    //<
    skinImgDir:"images/edges/",

    //> @attr edgedCanvas.edgeImage   (SCImgURL : "[SKIN]/rounded/frame/FFFFFF/6.png" : IR)
    // Base name of images for edges.  Extensions for each corner or edge piece will be added
    // to this image URL, before the extension.  For example, with the default base name of
    // "edge.gif", the top-left corner image will be "edge_TL.gif".
    // <P>
    // The full list of extensions is: "_TL", "_TR", "_BL", "_BR", "_T", "_L", "_B", "_R",
    // "_center".
    //
    // @group imageEdges
    // @visibility roundCorners
    //<
    edgeImage:"[SKIN]/rounded/frame/FFFFFF/6.png",

    //> @attr edgedCanvas.edgeColor (cssColor : null : IR)
    // CSS color (WITHOUT "#") for the edges.  If specified, will be used as part of image
    // names.  Example: "edge_88FF88_TL.gif".
    // @group imageEdges
    // @visibility roundCorners
    //<

    // Shown Edges
    // ---------------------------------------------------------------------------------------
    //> @attr edgedCanvas.customEdges (Array of String : null : IR)
    // Array of side names ("T", "B", "L", "R") specifying which sides of the decorated
    // component should show edges.  For example: <pre>
    //      customEdges : ["T", "B"]
    // </pre>
    // .. would show edges only on the top and bottom of a component.
    // <P>
    // The default of <code>null</code> means edges will be shown on all sides.
    //
    // @group imageEdges
    // @visibility roundCorners
    //<

    //> @attr edgedCanvas.showCenter (boolean : false : IR)
    // Whether to show media in the center section, that is, behind the decorated Canvas.
    //
    // @group imageEdges
    // @visibility roundCorners
    //<

    //> @attr edgedCanvas.shownEdges   (Object : [all edges] : IR)
    // The corners and edges which should appear outside the contained Canvas.
    // <P>
    // Any combination is permitted so long as every visible edge piece has two visible
    // adjacent corners.
    // <P>
    // Some examples:<ul>
    // <li>cap on top: TL, T, TR
    // <li>cap on top and bottom: TL, T, TR, BL, B, BR
    // <li>3 rounded corners: TR, R, BR, B, BL
    // <li>4 rounded corners, contained Canvas flush with bottom: TL, T, TR, L, R, BL, BR
    // </ul>
    //<
    // NOTE: not documented for now in favor of simpler customEdges interface

    
    shownEdges : {
            TL:true,
            T:true,
            TR:true,
            L:true,
            R:true,
            BL:true,
            B:true,
            BR:true
    },

    // Edge Sizing
    // ---------------------------------------------------------------------------------------

    //> @attr edgedCanvas.edgeSize (integer : 6 : IR)
    // Size in pixels for corners and edges
    // @group imageEdges
    // @visibility roundCorners
    //<
    edgeSize:6

    //> @attr edgedCanvas.edgeLeft     (integer : null : IR)
    // Height in pixels for left corners and edges.  Defaults to edgeSize when unset.
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeRight    (integer : null : IR)
    // Height in pixels for right corners and edges.  Defaults to edgeSize when unset.
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeTop      (integer : null : IR)
    // Height in pixels for top corners and edges.  Defaults to edgeSize when unset.
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeBottom   (integer : null : IR)
    // Height in pixels for bottom corners and edges.  Defaults to edgeSize when unset.
    // @group imageEdges
    // @visibility roundCorners
    //<

    // Overlapping the Edges
    // ---------------------------------------------------------------------------------------

    //> @attr edgedCanvas.edgeOffset       (integer : null : [IRA])
    // Amount the contained Canvas should be offset.  Defaults to edgeSize; set to less than
    // edgeSize to allow the contained Canvas to overlap the edge and corner media. 
    // @group imageEdges
    // @visibility roundCorners
    // @example edges
    //<

    //> @attr edgedCanvas.edgeOffsetTop    (integer : null : [IRA])
    // Amount the contained Canvas should be offset from the top.  Defaults to the size for 
    // the top edge.  Set smaller to allow the contained Canvas to overlap the edge and 
    // corner media. 
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeOffsetBottom (integer : null : [IRA])
    // Amount the contained Canvas should be offset from the bottom.  Defaults to the size for
    // the bottom edge.  Set smaller to allow the contained Canvas to overlap the edge and
    // corner media. 
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeOffsetLeft   (integer : null : [IRA])
    // Amount the contained Canvas should be offset from the left.  Defaults to the size for
    // the left edge.  Set smaller to allow the contained Canvas to overlap the edge and
    // corner media. 
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    //> @attr edgedCanvas.edgeOffsetRight  (integer : null : [IRA])
    // Amount the contained Canvas should be offset from the right.  Defaults to the size for
    // the right edge.  Set smaller to allow the contained Canvas to overlap the edge and
    // corner media. 
    // @group imageEdges
    // @visibility roundCorners
    //<
    
    // ---------------------------------------------------------------------------------------

    //> @attr edgedCanvas.centerBackgroundColor (cssColor : null : IR)
    // Background color for the center section only.  Can be used as a surrogate background
    // color for the decorated Canvas, if the Canvas is set to partially overlap the edges and
    // hence can't show a background color itself without occluding media.
    // @group imageEdges
    // @visibility roundCorners
    //<

    
});

isc.EdgedCanvas.addMethods({



initWidget : function () {
    this.invokeSuper(isc.EdgedCanvas, this._$initWidget);

    // NOTE: for simplicity, we always generate the same DOM structure.  The "shownEdges"
    // structure indicates which cells will have media, hence where margins have to be in order
    // to reveal the structure.

	// HACK 040913: friendlier public interface
	//	specify an array of sides to get the edge treatment
	//	reasons: shorter code, consistent with clippedCorners, avoids naming problem (ie that
	//	'edges' implies sides, not sides and corners), and enforces the current limitation that
	//	corners MUST be displayed for each side
    var customEdges = this.customEdges;
	if (customEdges) {
		var edges = this.shownEdges = {};
		if (customEdges.contains("T")) {
			edges.T = edges.TL = edges.TR = true;
		}
		if (customEdges.contains("B")) {
			edges.B = edges.BL = edges.BR = true;
		}
		if (customEdges.contains("L")) {
			edges.L = edges.TL = edges.BL = true;
		}
		if (customEdges.contains("R")) {
			edges.R = edges.TR = edges.BR = true;
		}
	}

    this.updateEdgeSizes();
},

updateEdgeSizes : function () {

    var edgeSize = this.edgeSize;
    this._leftEdge = this._firstNonNull(this.edgeLeft, edgeSize);
    this._rightEdge = this._firstNonNull(this.edgeRight, edgeSize);
    this._topEdge = this._firstNonNull(this.edgeTop, edgeSize);
    this._bottomEdge = this._firstNonNull(this.edgeBottom, edgeSize);

    // whether to show margin on side: rail with media on side always indicates a margin -
    // otherwise that rail could not possibly be shown.  Corner on side does not
    // necessarily indicate a margin, eg, in endcap case (tl t tr only), no right or left
    // margin.
    // Margins can be set independantly of edges to allow the Canvas to overlap the edges.
    // NOTE: these margin settings are automatically picked up by the Canvas that owns us, and
    // added to its own margin settings to produce the native margin settings.
    var edges = this.shownEdges,
        marginSize = this.edgeOffset;
    if (edges.L) this._leftMargin = 
        this._firstNonNull(this.edgeOffsetLeft, marginSize, this._leftEdge);
    if (edges.R) this._rightMargin =
        this._firstNonNull(this.edgeOffsetRight, marginSize, this._rightEdge);
    if (edges.T) this._topMargin = 
        this._firstNonNull(this.edgeOffsetTop, marginSize, this._topEdge);
    if (edges.B) this._bottomMargin = 
        this._firstNonNull(this.edgeOffsetBottom, marginSize, this._bottomEdge);

    this.markForRedraw(); // in case we're drawn
},

getInnerWidth : function (a,b,c) {
    var width = this.invokeSuper(isc.EdgedCanvas, "getInnerWidth", a,b,c);
    return width - this._leftMargin - this._rightMargin;
},

getInnerHeight : function (a,b,c) {
    var height = this.invokeSuper(isc.EdgedCanvas, "getInnerHeight", a,b,c);
    return height - this._topMargin - this._bottomMargin;
},

_emptyCell : "<TD></TD>",
getInnerHTML : function () {
    // For minimum performance impact, we want to write HTML for the corners that
    // automatically reflows on resize.
    //
    // Most published methods of doing this rely on embedding content inside a containing
    // element with the borders arrayed around the edges, where the containing element
    // vertically stretches to accomodate content.  We can't feasibly use that approach
    // because abs pos content doesn't stretch the containing element, so we'd have to
    // force all Canvas children to be relatively positioned, so layout code would have to
    // take into account that each Canvas starts out offset by all previous Canvii - a
    // mess.  
    //
    // So we need to write reflowable HTML that will simply fill its container.  This is
    // easy with a table; with CSS the only difficult aspect is writing the center pieces
    // so that they stretch.  Approaches:
    // - classic CSS 3 column layout: float or abs pos left and right pieces, put margins
    //   on center piece.
    //   - relies on the fact that a block-level element expands to fill horizontal space
    //     minus margins.  There is no analogous vertical technique; 100% height produces a
    //     DIV that's as tall as the container including margins
    // - use both a right and left coordinate, or top and bottom coordinate, to imply size
    //   - works in Moz.  IE6 respects right coordinate but not right with left (likewise
    //     bottom and top)
    //
    // A TABLE is the only way we know of to do this in IE6, with various workarounds the table
    // can be made to work on all platforms, and the HTML is much shorter.
    var output = isc.SB.create(),
        // image names
        baseURL = this.edgeImage,
        period = baseURL.lastIndexOf(isc.dot),
        name = baseURL.substring(0, period),
        extension = baseURL.substring(period),
        urlStart = this.getImgURL(name),
        cellStart = "<TD HEIGHT=",
        nonHeightStart = "<TD",
        mediaStart,
        cellEnd;

    // setup cell HTML
    if (!(isc.Browser.isStrict && isc.Browser.isIE && isc.Browser.version >= 8)) {
        
    //if (isc.Browser.isSafari || 
    //    (isc.Canvas._fixPNG() && extension.toLowerCase() == ".png") || isc.Browser.isMoz) {
        // NOTE: on IE5.5+, calling imgHTML kicks in the PNG alpha loading workaround

        var imgProps = isc.EdgedCanvas._imgProps;
        if (!imgProps) {
            imgProps = isc.EdgedCanvas._imgProps = {
                width:"100%", 
                height:"100%"
            };
            // Safari requires align != "texttop", otherwise each cell sizes to a minimum of a
            // text line height
            if (isc.Browser.isSafari) imgProps.align = "middle";
            // In Strict mode write images out as explicit display:block
            // This avoids a well documented issue where images inside table cells leave gaps
            // under them in strict mode 
            if (isc.Browser.isStrict && !isc.Browser.isTransitional) 
                imgProps.extraStuff = "style='display:block;'";
        }
        imgProps.src = baseURL;
        var imgHTML = this.imgHTML(imgProps),
            dotIndex = imgHTML.lastIndexOf(isc.dot);