tabbar.js

javascript 很酷的类库

//  The baseline exists to create the appearance that one of the tabs is part of the pane whereas
//  the other tabs are behind the pane.
//
//	The baseline is an image that runs along the edge of the TabBar that borders on the pane,
//  occluding the pane's actual border but matching it exactly.  The selected tab is in front
//  of the baseline, and the rest are behind it.
//<

makeBaseLine : function () {
	// create the baseline stretchImg and add as child.
	this._baseLine = this.addAutoChild("baseLine", {
        ID:this.getID() + "_baseLine",
        vertical:(this.tabBarPosition == isc.Canvas.LEFT || 
                  this.tabBarPosition == isc.Canvas.RIGHT),
        _generated:true,
        skinImgDir:this.skinImgDir,
        src:this.baseLineSrc,
		capSize:this.baseLineCapSize,
        imageType:isc.Img.STRETCH,
        addAsChild:true,
        autoDraw:false
    }, isc.StretchImg);
    this.ignoreMemberZIndex(this._baseline);
},

// when scrolling shift the baseLine so it's always inside the viewport.
scrollTo : function (x,y,a,b,c,d) {
    this.invokeSuper(isc.TabBar, "scrollTo", x,y,a,b,c,d);
    if (this._baseLine) this.fixLayout();
},


//>	@method	tabBar.fixLayout()	(A)
//  Places the baseLine on the side of the TabBar adjacent to the tabbedPane, according to which
//  side the tabs are on.
//<
fixLayout : function () {
	var bl = this._baseLine;

    if (bl == null) return;
	
	
	var ts = this.parentElement,
	    //edge = ts ? ts._edgedCanvas : null,
        edgeOffset = 0;
        
    
    
	// Canvas.TOP
	if (this.tabBarPosition == isc.Canvas.TOP) {
		//edgeOffset = edge ? edge._rightMargin : 0; // HACK 040910
		bl.setRect(this.getScrollLeft(), this.getHeight() - this.baseLineThickness, 
    		   this.parentElement.getWidth()-edgeOffset, this.baseLineThickness);
	
	// Canvas.BOTTOM
	} else if (this.tabBarPosition == isc.Canvas.BOTTOM) {
		//edgeOffset = edge ? edge._leftMargin : 0; // HACK 040910
		bl.setRect(this.getScrollLeft(), 0, this.parentElement.getWidth()-edgeOffset, this.baseLineThickness);
	
	// Canvas.LEFT
	} else if (this.tabBarPosition == isc.Canvas.LEFT) {
		//edgeOffset = edge ? edge._bottomMargin : 0; // HACK 040910
		bl.setRect(this.getWidth() - this.baseLineThickness, this.getScrollTop(), 
				   this.baseLineThickness, this.parentElement.getHeight()-edgeOffset);

	// Canvas.RIGHT
	} else if (this.tabBarPosition == isc.Canvas.RIGHT) {
		//edgeOffset = edge ? edge._bottomMargin : 0; // HACK 040910
		bl.setRect(0, this.getScrollTop(), this.baseLineThickness, this.parentElement.getHeight()-edgeOffset);
    }	
}, 

// fix layout on a change of size
layoutChildren : function (a,b,c,d) {
    this.invokeSuper(isc.TabBar, "layoutChildren", a,b,c,d);
    this.fixLayout();
},

//>	@method	tabBar.buttonSelected()	(A)
//		This method overrides the toolBar's buttonSelected method.
//		Differences are as follows:
//		 - assumes tab is of type "radio", as all tabBar tabs are set to be a radiogroup
//		 - handles z-axis reorderings of tabs and baseLine
//		 - overlaps tabs by expanding and contracting them
//		
//		Note: we assume here that buttonSelected is only fired when the button is initially
// 			  set to "selected." Repeated clicks should not fire this method.
//
//		@param	tab		(tab)		tab that has been selected.
//<
buttonSelected : function (tab) {
    this.ignoreMemberZIndex(tab);
    
	// bring tab and label to front.	
	tab.bringToFront();

	// store the currently selected tab as the lastSelectedButton.
	this.lastSelectedButton = tab;
    
    // Make sure we never tab to an unselected button
    // Note that deselection of the other tabs is handled by built in Toolbar / Radiogroup
    // behavior.
    this._updateFocusButton(this.lastSelectedButton);    
},

// Override buttonDeselected() to send the tab to the back (behind the baseLine image)
buttonDeselected : function (tab) {
    tab.sendToBack();
    this.stopIgnoringMemberZIndex(tab);
},

//>	@method	tabBar.getSelectedTab()	(A)
//			get the tab object currently selected.
//		@return
//			tab object
//<
getSelectedTab : function () {
	return this.getButtonNumber(this.getSelectedButton());
},

//>	@method	tabBar.selectTab()	
// Select a tab
// @param  tabNum  (number)    index of tab to select
// @visibility external
//<
selectTab : function (tabNum) {
    this.selectedTab = tabNum;
	this.selectButton(tabNum);
},

// Override setupButtonFocusProperties to ensure that this.selectedTab is the initial
// focusButton (will then be selected by _updateFocusButton())
setupButtonFocusProperties : function () {
    // sync up the focus with the selection
    
    this._updateFocusButton(this.getButton(this.selectedTab));
    return this.Super("setupButtonFocusProperties", arguments);

},

// override the internal _updateFocusButton method to always ensure the focussed tab is selected
_updateFocusButton : function (buttonNum) {
    this.Super("_updateFocusButton", arguments);
    if (this._currentFocusButton != null && !this._currentFocusButton.selected) {
        this.selectTab(this._currentFocusButton);
    }
},

_scrollForward : function (backward, animated) {
  if (this.overflow == isc.Canvas.VISIBLE || !this.members || this.members.length == 0) return;

    var nextTab, nextTabEdge;
    
    // If we're in the process of scrolling to a tab - jump straight to the one after it
    if (this._scrollingToTab != null) {
        nextTab = this.members[this._scrollingToTab + (backward ? -1 : 1)];
        if (nextTab == null) {
            return;
        }
        nextTabEdge = (backward ? (this.vertical ? nextTab.getTop() : nextTab.getLeft())
                                : (this.vertical ? nextTab.getBottom() : nextTab.getRight()));
    } else {
        
        var scrollSize = (this.vertical ? this.getScrollHeight() : this.getScrollWidth());
        if (scrollSize <= (this.vertical ? this.getViewportHeight() : this.getViewportWidth())) 
            return;
    
        var scrollStart = (this.vertical ? this.getScrollTop() : this.getScrollLeft()),
            viewSize = (this.vertical ? this.getViewportHeight() : this.getViewportWidth());
    
        
        var scrollThreshold = 5;        
        for (var i = 0; i < this.members.length; i++) {
            nextTab = (backward ? this.members[this.members.length - (i+1)] : this.members[i]);
            
            nextTabEdge = (backward ? (this.vertical ? nextTab.getTop() : nextTab.getLeft())
                                    : (this.vertical ? nextTab.getBottom() : nextTab.getRight()));
            // Determine which tab is currently clipped
            var clipped = backward ? (nextTabEdge + scrollThreshold < scrollStart) 
                                   : (nextTabEdge - scrollThreshold > (scrollStart + viewSize));
            if (clipped) break;
        }
    }  
    
    if (animated) {
        this._scrollingToTab = this.members.indexOf(nextTab);
        this.scrollTabIntoView(nextTab, backward, true, "this._completeScroll(" + this._scrollingToTab + ")");
    } else this.scrollTabIntoView(nextTab, backward);
},

_completeScroll : function (scrolledToTab) {
    if (this._scrollingToTab == scrolledToTab) delete this._scrollingToTab;
},

//>@method  tabBar.scrollTabIntoView()  
// If a tab is not currently visible for this tab-bar, scroll it into view.
// Can specify where you want the tab to appear.
// edge it was clipped on.
// @param   tab (number or ImgTab)  tab to scroll into view (or index of tab to scroll into view)
// @param   [start] (boolean) Should the tab be scrolled to the start or end of the viewport?
//                          If not specified the tab will be scrolled to whichever end it is
//                          currently clipped by.
// @param [animated] (boolean) If true, do an animated scroll.
// @param [callback] (callback) If specified this will fire when the tab has been scrolled into
//                              view. Will be synchronously fired if this is not an animated
//                              scroll, or if the tab is already in view, so no scrolling occurs.
//<
scrollTabIntoView : function (tab, start, animated, callback) {
    
    var tabNum;
    if (isc.isA.Number(tab)) {
        tabNum = tab;
        tab = this.members[tab];
    } else {
        tabNum = this.members.indexOf(tab);
    }
    if (!tab) return;
    
    var rect = tab.getRect(),
        xPos, yPos;

    // If not pased "start" parameter, we'll scroll the tab to the start of our viewport
    // iff its clipped to the left, otherwise to the end of our viewport.
    var vertical = this.vertical;
    if (start == null) {
        if (tabNum == 0) start = true;
        else if (tabNum == (this.members.getLength() -1)) start = false;
        else {
            if (vertical) {
                if (this.getScrollTop() > rect[1]) start = true;
                else start = false;
            } else {
                if (this.getScrollLeft() > rect[0]) start = true;
                else start = false;
            }
        }
    }
        
    if (vertical) {
        yPos = (start ? "top" : "bottom");
        // don't scroll horizontally - leave at zero
        xPos = "left";
        rect[2] = 0;
    } else {
        xPos = (start ? "left" : "right");
        // Don't scroll vertically
        yPos = "top";
        rect[3] = 0;
    }
    // When scrolling to the first tab, actually scroll to 0,0, rather than the edge of the
    // tab.
    if (tabNum == 0) rect[0] = rect[1] = 0;

    this.scrollIntoView(rect[0], rect[1], rect[2], rect[3], xPos, yPos, animated, callback);
},

scrollForward : function (animated) {
    this._scrollForward(false, animated);
},

scrollBack : function (animated) {
    this._scrollForward(true, animated);
}

});