tabset.js

javascript 很酷的类库

},

//> @method tabSet.getTabNumber()
// Get the index of a tab, from the tab or tabID.  If passed a number, just returns it.
// @param	tab   (number | ID | tab)
// @return (number) the index of the tab, or -1 if not found 
// @visibility external
//<
// Note - we don't call this 'getTabIndex', even though it is an index, because of the conflict
// with the 'tabIndex' of the widget as a whole
getTabNumber : function (tab) {
    if (isc.isA.Number(tab)) return tab;
    if (!this.tabs) return null;
    var index = this.tabs.indexOf(tab);
    if (index != -1) return index;
    
    
    if (isc.isA.String(tab)) return this.tabs.findIndex("ID", tab);
    
    // At this point it must be a pointer to the tab button, so fall through to 
    // tabBar.getButtonNumber()
    return this.getTabBar().getButtonNumber(this.getTab(tab));
},

//> @method tabSet.updateTab()
// Set the pane for a tab.
// <P>
// Pass in the index of a tab (or a tab object), and a new pane.
// <P>
// NOTE: the old pane for the tab is not destroy()d
// 
// @param	tab   (number | ID | Tab) tab to update
// @param	pane  (Canvas | ID) new pane for the tab
// @visibility external
//<
updateTab : function (tab, pane) {

    // if we were passed a tab init block, for a new tab, call addTabs instead
    if (isc.isAn.Object(tab) && !isc.isA.Canvas(tab) &&
        this.tabs.indexOf(tab) == -1) 
    {
        if (pane != null) tab.pane = pane;
        return this.addTabs(tab);
    }

    // get the index for the tab (whatever way the "tab" is passed)
    var tabIndex = this.getTabNumber(tab);

    // bad tab specification
    if (tabIndex == -1) {
        this.logWarn("no such tab: " + this.echo(tab));
        return;
    }

    // get rid of the old pane
    var tabObject = this.getTabObject(tabIndex),
        oldPane = tabObject.pane;

    if (tabObject.pane == pane) return; // no-op

    if (oldPane != null) {
        oldPane.hide();
        oldPane.deparent();
    }

    // NOTE: keep tabCanvas.pane and tabObject.pane in sync for EditMode where the Tab needs to
    // be able to respond to getProperty("pane")
    var tabCanvas = this.getTab(tab);

    // if the new pane is null, we're done
    if (pane == null) return tabObject.pane = tabCanvas.pane = null;

    // add the new pane to init block (Using createPane to instantiate as a Canvas if necessary)
    // this makes sure the pane is hidden and not a child of anything except the paneContainer    
    pane = tabObject.pane = this.createPane(pane);

    // tabCanvas won't exist if we're not drawn yet
    if (tabCanvas != null) tabCanvas.pane = pane;

    // if we're drawn and the currently visible tab is being updated, show the new pane
    // (otherwise this happens automatically the next time the tab is selected).
    if (!this.isDrawn()) return;
    if (this.getSelectedTabNumber() == tabIndex) {
        if (!this.paneContainer.hasMember(pane)) this.paneContainer.addMember(pane);
        pane.show();
    }
},

//>	@method	tabSet.fixLayout()	(A)
//			lay out the children of the tabSet. 
//			this method takes into account the position of the tabBar in the tabSet, 
//			and lays out the tabBar and the paneContainer accordingly.
//<
fixLayout : function () {
	// abbreviations
	var tb = this._tabBar,
        // round corners: for layout only, manipulate the edgedCanvas instead of the
        // paneContainer
		pc = this._edgedCanvas || this.paneContainer
	;
	
	// check for nulls, and exit if found.
	// this method requires that both the tabBar and the paneContainer be instantiated before
	// it is called.
	if (tb == null || pc == null) return;

	// make sure paneContainer is below tabBar
    if (pc.getZIndex(true) >= tb.getZIndex(true)) pc.moveBelow(tb);
	
    
    var tbOverlap = this._firstNonNull(this.tabBarOverlap, tb.borderThickness,
                                       tb.baseLineThickness);

	// lay out the tabBar and paneContainer, depending on where the tabBar is.
    var vertical;
    switch (this.tabBarPosition) {
    	case isc.Canvas.TOP :
            vertical = false;
    		pc.setRect(0, 
                       tb.getHeight() - tbOverlap,
                       this.getWidth(),
                       this.getHeight() - tb.getHeight() + tbOverlap
                      );
	        break;
        case isc.Canvas.BOTTOM :
            vertical = false;
            tb.setTop(this.getHeight() - tb.getHeight());
	    	pc.setRect(0,
                       0,
                       this.getWidth(), 
                       this.getHeight() - tb.getHeight() + tbOverlap
                      );
            break;
        case isc.Canvas.LEFT :
            vertical = true;
    		pc.setRect(tb.getWidth() - tbOverlap,
                       0,
                       this.getWidth() - tb.getWidth() + tbOverlap,
                       this.getHeight()
                      );
            break;
        case isc.Canvas.RIGHT :
            vertical = true;
    		tb.setLeft(this.getWidth() - tb.getWidth());
	    	pc.setRect(0,
                       0,
                       this.getWidth() - tb.getWidth() + tbOverlap,
                       this.getHeight()
                      );
            break;
    }

    // showControls will show (or hide) the control layout, and return true if showing.
    var showControls = this.showControls();
    
    // If we're showing the control layout adjust our tab-bar size to take it into account
    if (showControls) {
        // Force clipping so we can scroll the tb as expected
        // Required even if we were already showing the scroller - we may have resized
        if (vertical) tb.setHeight(this.getViewportHeight() - this._controlLayout.getHeight());
        else tb.setWidth(this.getViewportWidth() - this._controlLayout.getWidth());
    } else {
        tb.resizeTo(vertical ? null : "100%", vertical ? "100%" : null);
    }
    // If the tab bar is currently scrolled, but there is enough space to display all its
    // tabs, force a scroll back to zero/zero
    
    var totalTabs = this._getTabSizes();
    if (vertical) {
        if (tb.getScrollTop() > 0 && totalTabs <= tb.getViewportHeight()) tb.scrollTo(null,0);
    } else {
        if (tb.getScrollLeft() > 0 && totalTabs <= tb.getViewportWidth()) tb.scrollTo(0,null);
    }
},

//>@method  tabSet.shouldShowControl()
// Should a specific control as specified in +link{tabSet.tabBarControls} be displayed?
// Default implementation will evaluate the +link{Canvas.showIf()} property for custom controls
// included as canvases. Standard controls for scrolling the tabBar will be included if 
// the relevant +link{tabSet.showTabScroller} or +link{tabSet.showTabPicker} property is not
// false, and there is not enough space in the tab-bar to display all the tabs.
// @parameter (control) control from the +link{tabSet.tabBarControls} array
// @return  (boolean)   true if the control shoudl be displayed
// @group tabBarControls
//<

shouldShowControl : function (control) {
    // The standard controls only show if the tabs are clipped
    if ((control == "tabScroller") || (control == "tabPicker")) {
        if (!this.showTabScroller && control == "tabScroller") return false;
        if (!this.showTabPicker && control == "tabPicker") return false;
        // If the member width exceeds the available space for the tab-bar we need to show
        // scroller buttons 
        var contentSize = this._getTabSizes();
        if (contentSize == 0) return;
        
        
        var otherControlSize=0;
        for (var i = 0; i < this.tabBarControls.length; i++) {
            var otherControl = this.tabBarControls[i];
            if (otherControl == "tabScroller" || otherControl == "tabPicker") continue;
            if (this.shouldShowControl(otherControl)) {
                if (!isc.isA.Canvas(otherControl)) otherControl = this.getControl(otherControl);
                otherControlSize += vertical ? otherControl.getHeight() : otherControl.getWidth();
            }
        }
        
        var vertical = (this._tabBar.orientation == isc.Layout.VERTICAL),
            clipTabs = (contentSize > (vertical ? (this.getViewportHeight() - otherControlSize)
                                                : (this.getViewportWidth() - otherControlSize)));                                       
        return clipTabs;
    }
    
    var control = this.getControl(control);

    if (isc.isA.Canvas(control)) {
        if (control.showIf) return control.fireCallback(control.showIf, [control]);
        else return true;
    }
    
},

_getTabSizes : function () {
    if (!this._tabBar) return 0;
    var contentSize = this._tabBar.getMemberSizes(),
        vertical = this._tabBar.vertical;
    if (contentSize == null || contentSize.length == 0) return 0;
    
    contentSize = contentSize.sum();
        
    
    var sizeAdjustment = (vertical ? (this._tabBar._topMargin || 0) + (this._tabBar._bottomMargin || 0)
                                  : (this._tabBar._leftMargin || 0) + (this._tabBar._rightMargin || 0));
    return contentSize + sizeAdjustment;
},

//>@method  tabSet.getControl()
// Given an entry in the +link{tabSet.tabBarControls} array, this method will return a pointer
// to the actual widget to display in the control layout.<br>
// If passed a canvas, it will be returned intact.<br>
// Will also map the special strings <code>"tabPicker"</code> and <code>"tabScroller"</code> to
// standard tab picker and scroller controls.
// @param control (string or canvas)    Control from +link{tabSet.tabBarControls} array.
// @return (canvas) Control widget to include in the control layout for this tabset
// @group tabBarControls
//<

getControl : function (control) {
    if (isc.isA.Canvas(control)) return control;
    var vertical = (this._tabBar.orientation == isc.Layout.VERTICAL);
    
    if (control == "tabScroller") {
        if (!this.scroller) {
            
            // Make the scroller a stretchImgButton with 2 "buttons"
            var sbsize = this.scrollerButtonSize;
            
            var scrollerSrc;
            if (this.symmetricScroller) {
                scrollerSrc = vertical ? this.scrollerVSrc : this.scrollerHSrc;
            } else {
                scrollerSrc = this.scrollerSrc;
            }                 
            var backName = this.symmetricScroller ? "back" : this.tabBarPosition + "_back",
                forwardName = this.symmetricScroller ? "forward" : 
                                                         this.tabBarPosition +"_forward";
                                                         
            this.scroller = isc.StretchImgButton.create({
                // set noDoubleClicks - this means if the user clicks repeatedly on the
                // scroller we'll move forward 1 tab for each click rather than appearing
                // to swallow every other click
                noDoubleClicks:true,
                tabSet:this,
                vertical:vertical,
                width:vertical ? (this.tabBarThickness - this._tabBar.baseLineThickness) : (2*sbsize),
                height:vertical ? (2*sbsize) : (this.tabBarThickness - this._tabBar.baseLineThickness),
            
                items:[{name:backName, 
                        width:vertical ? null : sbsize,
                        height:vertical ? sbsize : null}, 
                       {name:forwardName,
                        width:vertical ? null : sbsize, 
                       height:vertical ? sbsize : null}],
                skinImgDir:this.skinImgDir,
                
                src:scrollerSrc,
            
                // Disable normal over/down styling as that would style both buttons at once
                showRollOver:false,
                showDown:false,
                backPartName:backName,
                forwardPartName:forwardName,
                
                mouseDown : function () {
                    this.clickPart = this.inWhichPart();
                    this.setState(isc.StatefulCanvas.STATE_DOWN, this.clickPart);
                },
                mouseUp : function () {
                    this.setState(isc.StatefulCanvas.STATE_UP, this.clickPart);
                },
                click : function () {
                    var back = this.clickPart == this.backPartName;
                    // figure out which part they clicked in and remember it
                    if (back) this.tabSet.scrollBack();
                    else this.tabSet.scrollForward();
            
                    return false;
                }
            });
        }
            
        return this.scroller;
    
    } else if (control == "tabPicker") {
        var tabPickerSize = this.pickerButtonSize;
        if (!this.tabPick