button.js

javascript 很酷的类库

            template[slot+7] = this.getStateName();
            // Includes STYLE=... tag (and leaves an open single quote)
            template[slot+8] = this._$tableNoStyleDoubling;
        }
        if (iconAtEdge) template[slot+8] += "' align='" + this.align;        
        template[slot+9] = (this.wrap ? this._$closeInnerTag : this._$closeInnerTagNoWrap)
        template[slot+10] = title;
    
    } else {
        
        // title cell:
        template[slot+1] = this._$classEquals;
        if (this.titleStyle) {
            template[slot+2] = this.titleStyle;
            template[slot+3] = (this.isDisabled() ? isc.StatefulCanvas.STATE_DISABLED : isc.emptyString);
        } else {
            template[slot+2] = this.getStateName();
            template[slot+3] = this._$tableNoStyleDoubling;
        }

        if (iconAtEdge) template[slot+3] += "' align='" + this.align;
        template[slot+4] = (this.wrap ? this._$closeInnerTag : this._$closeInnerTagNoWrap)
        template[slot+5] = title;
        
        // icon cell
        template[slot+6] = this._$newInnerCell;
        template[slot+7] = !rtl ? this._$rightIconCellStyleStart :
                                  this._$leftIconCellStyleStart;
        template[slot+8] = this.iconSpacing;
        if (iconAtEdge) template[slot+8] += "px;width:" + iconCellSpace;
        template[slot+9] = this._$pxClose;
        template[slot+10] = iconImg;

    }
    template[slot+11] = this._$innerTableEnd; 
    
    this._endTemplate(template, slot+12)
},





_imgParams : {
    align : "absmiddle", // just prevents default "texttop" from kicking in
    extraStuff : " style='vertical-align:middle' eventpart='icon'"
},
_$iconImgName:[null, "_icon"],
_generateIconImgHTML : function () {
    // NOTE: we reuse a single global imgParams structure, so we must set every field we ever
    // use every time.
    var imgParams = this._imgParams;

    if (this._imgName == null) {
        this._$iconImgName[0] = this.getID();
        this._imgName = this._$iconImgName.join(isc.emptyString);
    }

    imgParams.name = this._imgName;
    imgParams.width = this.iconWidth || this.iconSize;
    imgParams.height = this.iconHeight || this.iconSize;
    imgParams.src = this._getIconURL();

	return this.imgHTML(imgParams);
},
_getIconURL : function () {
    var state = this.state,
        selected = this.selected,
        customState = this.getCustomState(),
        sc = isc.StatefulCanvas;

    // ignore states we don't care about
    if (state == sc.STATE_DISABLED && !this.showDisabledIcon) state = null;
    else if (state == sc.STATE_DOWN && !this.showDownIcon) state = null;
    else if (state == sc.STATE_OVER && !this.showRollOverIcon) state = null;
    
    if (!this.showIconState) {
        state = null;
        customState = null;
    }

    if (selected && !this.showSelectedIcon) selected = false;
    // Note that getFocusedState() will return false if showFocusedAsOver is true, which is
    // appropriate
    var focused = this.showFocusedIcon ? this.getFocusedState() : null; 
    
    return isc.Img.urlForState(this.icon, selected, focused, state, null, customState);
},

getTitleHTML : function (a,b,c,d) {
    // This will call getTitle() so return contents if appropriate, and will hilite accessKeys
    var title = this.invokeSuper(isc.Button, "getTitleHTML", a,b,c,d);

    // FIXME: title padding should be accomplished with CSS
    if (!this.padTitle || this.align == isc.Canvas.CENTER) return title;

    if (this.align == isc.Canvas.RIGHT) return title + isc.nbsp;
    else if (this.align == isc.Canvas.LEFT) return isc.nbsp + title;
},


//> @method Button.setWrap()
// Set whether the title of this button should be allowed to wrap if too long for the button's
// specified width.
//
// @param newWrap (boolean) whether to wrap the title
// @visibility external
//<
setWrap : function (newWrap) {
    if (this.wrap != newWrap) {
        // NOTE: wrap can almost certainly be changed on the fly w/o redraw, at least on modern
        // browsers
        this.wrap = newWrap;
        this.markForRedraw("wrapChanged");
    }
},

// get the cell holding the title text.  DOM only.
getTitleCell : function () {
    if (!this.getHandle()) return null;
    var cell = this.getHandle().firstChild.rows[0].cells[0];
    return cell;
},

// get the minimum height of this button which would not clip the title text as it is currently
// wrapped.  DOM only.  Only available after drawing.  For Moz, must set "reliableMinHeight" for
// this to be reliable.
getMinHeight : function () {
    

    var titleCell = this.getTitleCell();
    // In IE, and probably other DOM browsers, the cell's scrollHeight is reliable
    if (!isc.Browser.isMoz) {
        return titleCell.scrollHeight + isc.Element._getVBorderSize(this.getStateName());
    }

    
    return titleCell.firstChild.offsetHeight + 
        isc.Element._getVBorderSize(this.getStateName());
},

// get the width this button would need to be in order to show all text without wrapping
// XXX move deeper, to Canvas?
getPreferredWidth : function () {

    

    var oldWrap = this.wrap,
        oldOverflow = this.overflow,
        oldWidth = this.width;

    // set overflow visible with no minimum width in order to get the minimum width that won't
    // wrap or clip the title text
    // XXX because wrapping is controlled by a <NOBR> tag in the generated HTML, we can't detect
    // preferred width without a redraw, even if we could resize without a redraw
    this.setWrap(false);
    this.overflow = isc.Canvas.VISIBLE;
    this.setWidth(1);
    this.redrawIfDirty("getPreferredWidth");

    var width = this.getScrollWidth();

    // reset text wrapping and overflow setting
    this.setWrap(oldWrap);
    this.overflow = oldOverflow;
    // NOTE: if this button needs to redraw on resize, this will queue up a redraw, but if you
    // are trying to set the button to it's preferred size you will avoid a redraw if you set
    // the new size right away.
    this.setWidth(oldWidth); 

    return width;
},

autoSize : function () {
    this.setWidth(this.getPreferredWidth());
},

getTitle : function () {
    if (this.useContents) return this.getContents();
    return this.title;
},


setTitle : function (newTitle) {
	this.title = newTitle;
	this.markForRedraw("setTitle");
},

//>	@method	button.stateChanged()	(A)
//		@group	appearance
//			overrides the StatefulCanvas implememntation to update the contents TD className
//<
stateChanged : function () {

    

    if (this.redrawOnStateChange || !this.isDrawn()) {
        return this.Super("stateChanged");
    } else {
        var stateName = this.getStateName();
        
        if (!this.suppressClassName) this.setClassName(stateName);
        else this.setTableClassName(stateName);
        
        if (this.icon) {
            // NOTE: the icon may or may not actually change to reflect states or selectedness,
            // but either state or selectedness or both may have just changed, and we may be
            // transitioning from a state we do show to a state we don't, so no-oping is
            // tricky; we don't both for now.
            this.setImage(this._imgName, this._getIconURL());
        }
    }        
},

// Set the css className of the table cell
setTableClassName : function (newClass){
    
    var TD = this.getTitleCell();
    if (!TD) return;
    if (TD.className != newClass) TD.className = newClass;

    if (this.icon && !this.noIconSubtable && !this.titleStyle) { 
        // if we're using a subtable, update the style on the title cell too (it won't
        // cascade).
        
        var titleCell = TD.firstChild.rows[0].cells[(this.iconOrientation == this._$right ? 0 : 1)];
        if (titleCell && titleCell.className != newClass) titleCell.className = newClass;
    }

    
    if (this.overflow == isc.Canvas.VISIBLE) this.adjustOverflow();
},

setTitleStyle : function (newStyle) {
    this.titleStyle = newStyle;
    if (!this.isDrawn() || !this.icon || this.noIconSubtable) return
    var TD = this.getTitleCell();
    if (!TD) return;
    var titleCell = TD.firstChild.rows[0].cells[1];
    if (titleCell && titleCell.className != newStyle) titleCell.className = newStyle;
},

setIcon : function (icon) {
    var hadIcon = this.icon != null;
    this.icon = icon;
    if (hadIcon) this.setImage(this._imgName, this._getIconURL());
    else this.redraw();
},

_cellFocus : function () {
    isc.EH._setThread("cFCS");
    this.focus();
    isc.EH._clearThread();
},

// override _updateCanFocus() to redraw the button.  If the focusability of the button is changed
// and we're making use of native HTML focus / tabIndex behavior, we'll need to regenerate the 
// inner HTML.
_updateCanFocus : function () {
    this.Super("_updateCanFocus", arguments);
    if (this._useNativeTabIndex) this.markForRedraw();
}


//>	@method	button.setAlign()
// Sets the (horizontal) alignment of this buttons content.
//  @group positioning
//  @visibility external
//<
// defined in StatefulCanvas

//>	@method	button.setVAlign()
// Sets the vertical alignment of this buttons content.
//  @group positioning
//  @visibility external
//<
// defined in StatefulCanvas

});	// END	isc.Button.addMethods()

isc.Button.registerStringMethods({
    getTitle:null
});


// AutoFitButton
// --------------------------------------------------------------------------------------------
// Button that automatically sizes to the title text.

//> @class AutoFitButton
//
// A button that automatically sizes to the length of its title.  Implemented via the 
// +link{StatefulCanvas.autoFit} property.
//
// @deprecated As of Isomorphic SmartClient version 5.5, autoFit behavior can be achieved using
// the Button class instead by setting the property +link{Button.autoFit} to true.
//
// @see Button
// @treeLocation Client Reference/Control/Button
// @visibility external
//<

isc.ClassFactory.defineClass("AutoFitButton", "Button");

isc.AutoFitButton.addProperties({
    autoFit:true
});




isc.Button.registerStringMethods({
    //>@method Button.iconClick()
    // If this button is showing an +link{Button.icon, icon}, a separate click handler for the
    // icon may be defined as <code>this.iconClick</code>.
    // Returning false will suppress the standard button click handling code.
    // @group buttonIcon    
    // @visibility external
    //<
    // don't expose the parameters - they're not really useful to the developer
    iconClick:"element,ID,event"
});


// Make "IButton" a synonym of Button by default.

//>	@class	IButton
//
// The IButton widget class is a class that implements the same APIs as the 
// +link{class:Button} class.  Depending on the current skin, <code>IButton</code>s may be
// on the +link{StretchImgButton} component, which renders via images, or may be based on the
// +link{Button} component, which renders via CSS styles.
//
// @treeLocation Client Reference/Control
// @visibility external
//<

isc.addGlobal("IButton", isc.Button);