button.js

javascript 很酷的类库

});

// add instance methods
isc.Button.addMethods({

//>	@method	button.initWidget()	(A)
//			Extended initWidget() to allow initialization of the enabled property
//
//		@param	[all arguments]	(object)	objects with properties to override from default
//<
initWidget : function () {
    
    

    if (this.border != null) {
        this._buttonBorder = this.border;
        this.border = null;
    }
    if (this.padding != null) {
        this._buttonPadding = this.padding;
        this.padding = null;
    }
    if (this.backgroundColor != null) {
        this._buttonBGColor = this.backgroundColor;
        this.backgroundColor = null;
    }

    // Call super implementation directly rather than using Super() to avoid a string 
    // allocation.
    return isc.StatefulCanvas._instancePrototype.initWidget.call(this);
},

//>	@method	button.getInnerHTML()	(A)
// Return the HTML for this button
//		@group	drawing
//
//		@return	(string)	HTML output for the button
//<
getInnerHTML : function () {
        

        var button = isc.Button;
        if (!button._buttonHTML) {
            
            button._100Size = " width='100%' height='100%";
            button._widthEquals = "width='";
            button._heightEquals = "' height='";            
            button._hiddenOverflow = "' style='table-layout:fixed;overflow:hidden;";
            button._cellStartWrap = "'><tbody><tr><td class='";
            button._cellStartNoWrap = "'><tbody><tr><td nowrap='true' class='";
            var buttonHTML = button._buttonHTML = [];
            // NOTE: for DOM platforms, padding should be achieved by CSS padding and spacing
            // by CSS margins
            buttonHTML[0] = "<table cellspacing='0' cellpadding='0' ";
            // [1] 100% width and height, or width=
            // [2] null or this.getWidth()
            // [3] null or height=
            // [4] null or this.getHeight();
            
            // [5] overflow setting
            // [6] cell start (wrap/nowrap variants)
            // [7] CSS class

            // [8] optional cssText

            buttonHTML[9] = "' align='";
            // [10] align
            // [11] valign
            button._valignCenter = "' valign='center";
            button._valignTop = "' valign='top";
            button._valignBottom = "' valign='bottom";
            
            // [12-14] tabIndex and focus
            
            button._tabIndexStart = "' tabindex='-1' onfocus='";
            button._callFocus = "._cellFocus()'>";
            button._closeQuoteRightAngle = "'>";

            // IE 
            // [15] title

            // Moz
            // [15] Moz start DIV
            // [16] title
            // [17] Moz end DIV

            // end table (see _endTemplate)
        }
        
        var buttonHTML = button._buttonHTML;

        if (this.redrawOnResize == false) {
            // if we're not going to redraw on resize, write HTML that reflows automatically.  Not
            // yet possible in every browser.
            buttonHTML[1] = button._100Size;
            buttonHTML[2] = null; buttonHTML[3] = null; buttonHTML[4] = null;
        } else {
            buttonHTML[1] = button._widthEquals;
            buttonHTML[2] = this.getInnerWidth(); 
            buttonHTML[3] = button._heightEquals;
            buttonHTML[4] = this.getInnerHeight();
        }
        
        if (this.overflow == isc.Canvas.VISIBLE) {
            buttonHTML[5] = null;
        } else {
            buttonHTML[5] = button._hiddenOverflow;
        }
        
        // Inside the cell:
        buttonHTML[6] = (this.wrap ? button._cellStartWrap : button._cellStartNoWrap);

        buttonHTML[7] = this.getStateName();
        
        
        var writeStyle = (this.cssText || this._buttonBorder ||
                          this._buttonPadding || this._buttonBGColor || this.margin ||
                          this._writeZeroVPadding());
                            
        if (writeStyle) buttonHTML[8] = this._getCellStyleHTML();
        else buttonHTML[8] = null;
        
        // If the iconOrientation and iconAlign are set such that the icon is pinned to the
        // edge of the table rather than showing up next to the title, ensure we center the
        // inner table - alignment of the title will be written directly into its cell.
        buttonHTML[10] = (this._iconAtEdge() ? isc.Canvas.CENTER : this.align);
        buttonHTML[11] = (this.valign == isc.Canvas.TOP ? button._valignTop : 
                            (this.valign == isc.Canvas.BOTTOM ? button._valignBottom
                                                              : button._valignCenter) );

        
        if (this._canFocus() && this._useNativeTabIndex) {
            buttonHTML[12] = button._tabIndexStart;
            buttonHTML[13] = this.getID();
            buttonHTML[14] = button._callFocus;
        } else {
            buttonHTML[12] = button._closeQuoteRightAngle;
            buttonHTML[13] = buttonHTML[14] = null;
        }
        this.fillInCell(buttonHTML, 15)
        return buttonHTML.join(isc.emptyString);
},

_$pxSemi:"px;", _$semi:";",
_$borderColon:"border:",
_$zeroVPad:"padding-top:0px;padding-bottom:0px;",
_$paddingColon:"padding:",
_$bgColorColon:"background-color:",
_$zeroMargin:"margin:0px;",
_$cellStyleTemplate:[
    "' style='", // [0]
    ,           // [1] explicit css text applied to the button

    ,           // [2] null or "border:" (button border)
    ,           // [3] null or this._buttonBorder (button border)
    ,           // [4] null or ";" (button border)

    ,           // [5] null or "padding:" (button padding)
    ,           // [6] null or this._buttonPadding (button padding)
    ,           // [7] null or ";"  (button padding)

    ,           // [8] null or backgroundColor (button bg color)
    ,           // [9] null or this._buttonBGColor (button bg color)
    ,           // [10] null or ";" (button bg color)

    ,           // [11] null or "margin:0px" (avoid margin doubling)
    "'"
],


_getCellStyleHTML : function () {
    var template = this._$cellStyleTemplate;

    template[1] = (this.cssText ? this.cssText : null);
    
    if (this._buttonBorder != null) {
        template[2] = this._$borderColon;
        template[3] = this._buttonBorder;
        template[4] = this._$semi;
    } else {
        template[2] = null;
        template[3] = null;
        template[4] = null;
    }
    
    var padding = this._buttonPadding;
    if (padding != null) {
        template[5] = this._$paddingColon;
        template[6] = padding;
        template[7] = this._$semi;
    } else {
        template[5] = null;
        template[6] = null;
        template[7] = null;
    }
    if (this._writeZeroVPadding()) {
        template[7] = (template[7] || isc.emptyString) + this._$zeroVPad;
    }
    
    if (this._buttonBGColor != null) {
        template[8] = this._$bgColorColon;
        template[9] = this._buttonBGColor;
        template[10] = this._$semi;
    } else {
        template[8] = null;
        template[9] = null;
        template[10] = null;
    }
    
    if (this.margin != null) template[11] = this._$zeroMargin;
    else template[11] = null;
    
    return template.join(isc.emptyString);
},       


_writeZeroVPadding : function () {
    return this.overflow == isc.Canvas.HIDDEN && 
           // don't remove padding during animations or text may reflow
           !this.isAnimating() && 
            (isc.Browser.isMoz || isc.Browser.isSafari || isc.Browser.isIE);
},     

 
setBorder : function (border) {
    this._buttonBorder = border;
    this.markForRedraw();
},
setPadding : function (padding) {
    this._buttonPadding = padding;
    this.markForRedraw();
},
setBackgroundColor : function (color) {
    this._buttonBGColor = color;
    this.markForRedraw();
},

_$endTable :"</td></tr></tbody></table>",
_endTemplate : function (template, slot) {
    template[slot] = this._$endTable;
    template.length = slot+1;
    return template;
},

_$innerTableStart : "<table cellspacing='0' cellpadding='0'><tbody><tr><td ",
_$fillInnerTableStart : "<table width='100%' cellspacing='0' cellpadding='0'><tbody><tr><td ",


_$leftIconCellStyleStart : "style='font-size:1px;padding-right:",
_$rightIconCellStyleStart : "style='font-size:1px;padding-left:",

_$pxClose : "px'>",
_$newInnerCell : "</td><td ", 

_$classEquals : "class='",



_$tableNoStyleDoubling : "' style='" + isc.Canvas._$noStyleDoublingCSS,

// for IE opacity bug (see Canvas.setOpacity()), prevents text burnthrough in both isc.Buttons
// with gradients and SIB Labels.  Does not help with border burn-through visible in
// isc.Buttons with gradients
//_$tableNoStyleDoubling : "' style='" + isc.Canvas._$noStyleDoublingCSS + 
//    ";filter:Alpha(opacity=100);",

_$closeInnerTag : "'>",
_$closeInnerTagNoWrap : "' nowrap='true'>",    
 
_$innerTableEnd : "</td></tr></tbody></table>",

// used to check alignment for the icon
_$right:"right",

// Helper - is the icon pinned to the left / right edge, rather than floated next to the title?
_iconAtEdge : function () {
    return this.icon != null && this.iconAlign != null && 
                (this.iconAlign == this.iconOrientation) && 
                (this.iconAlign != this.align);
},

fillInCell : function (template, slot) {

    var rtl = this.isRTL();

    var title = this.getTitleHTML();

    if (!this.icon) {
        if (isc.Browser.isMoz) {
            var minHeight = this.reliableMinHeight;
            template[slot] = (minHeight ? "<div>" : null);
            template[slot+1] = title;
            template[slot+2] = (minHeight ? "</div>" : null);
            this._endTemplate(template, slot+3)
        } else {
            template[slot] = title;
            this._endTemplate(template, slot+1)
        }
        return;
    }

    var iconLeft = this.iconOrientation != this._$right,
        iconImg = this._generateIconImgHTML();


    // draw icon and text with spacing w/o a table.
    if (this.noIconSubtable) {
        var spacer = isc.Canvas.spacerHTML(this.iconSpacing,1);
        template[slot] = (iconLeft ? isc.SB.concat(iconImg, spacer, title)
                                   : isc.SB.concat(title, spacer, iconImg));
        this._endTemplate(template, slot+1)
        return;
    } 
    
    // Should we have the icon show up at the edge of the button, rather than being
    // adjacent to the title text?
    
    
    var iconAtEdge = this._iconAtEdge(),
        iconCellSpace;
    if (iconAtEdge) iconCellSpace = (this.iconWidth ? this.iconWidth : this.iconSize) 
                                    + this.iconSpacing;
    
    // if the icon is showing at one edge (and the text is separated from it), draw the
    // table 100% wide
    template[slot] = (iconAtEdge ? this._$fillInnerTableStart : this._$innerTableStart);
    
    if (iconLeft) {
        // icon cell
        template[slot+1] = !rtl ? this._$leftIconCellStyleStart :
                                  this._$rightIconCellStyleStart;
        template[slot+2] = this.iconSpacing;
        if (iconAtEdge) template[slot+2] += "px;width:" + iconCellSpace;
        template[slot+3] = this._$pxClose;
        template[slot+4] = iconImg;
        // title cell
        template[slot+5] = this._$newInnerCell;
        template[slot+6] = this._$classEquals;
        if (this.titleStyle) {
            template[slot+7] = this.titleStyle;
            template[slot+8] = (this.isDisabled() ? isc.StatefulCanvas.STATE_DISABLED : isc.emptyString);
        } else {