tabset.js

javascript 很酷的类库

    // @visibility external
    //<
    
    //> @attr tabSet.bottomEdgeOffsets (EdgeSizes : null : IR)
    // @include tabSet.leftEdgeOffsets
    // @visibility external
    //<
    
    //>	@attr	tabSet.showPaneContainerEdges (boolean : null : IRWA)
    // Should the paneContainer for this tabset show +link{Canvas.showEdges,edges}.
    //
    // @visibility external
    //<
    // set to null not false by default so we pick up the value from paneContainerDefaults
    // for backCompat (pre 6.1) 
    
    //>	@attr	tabSet.paneMargin	(number : 0 : IRW)
	//  Space to leave around the panes in our paneContainer
	//<
    //paneMargin:0
});

isc.TabSet.addMethods({
//>	@method	tabSet.initWidget()	(A)
// Initialize the TabSet object 
//<
initWidget : function () {
    
    // disallow 'showEdges:true' on tabSets - this is an effect the user essentially never wants
    // as edges would encompass the tab-bar as well as the (rectangular) pane container.
    
    this.showEdges = false;
    
	// call the superclass function
	this.Super("initWidget",arguments);
    
    if (this.tabs == null) this.tabs = [];
    if (this.tabBarDefaults == null) this.tabBarDefaults = {};
    // NOTE: tabInstanceDefaults is old name
    this.tabProperties = this.tabProperties || this.tabInstanceDefaults || {};

    var pos = this.tabBarPosition;

    // if tabBarAlign is unset, set default based on tabBarPosition 
    if (this.tabBarAlign == null) {
        this.tabBarAlign = ((pos == "left" || pos == "right") ? "top" : "left");
    }
    
    // If this has the 'useSimpleTabs' property set to true, create buttons rather than imgTabs
    // as tabs in the tab bar.  Saves on creating a number of widgets for performance.
    
    if (this.useSimpleTabs) {
        // also update the styling
        this.tabBarDefaults.buttonConstructor = isc.Button;
        // eg base + "Right" (derived from "right")
        this.tabProperties.baseStyle = this.simpleTabBaseStyle + 
                pos.substring(0,1).toUpperCase() + pos.substring(1);
    }    
	
	this.makeTabBar();
    
	this.makePaneContainer();

    this.createPanes();
},


//>	@method	tabSet.makeTabBar()	(A)
//	Instantiates a tabBar for this tabSet, and then adds it as a child of
//	the tabSet. starts with tabBarDefaults and adds additional, tabSet-specific properties
// @visibility internal
//<
makeTabBar : function () {
	if (this.tabs == null) return;
	
    
	var tabBarIsVertical = (this.tabBarPosition == isc.Canvas.LEFT || 
                            this.tabBarPosition == isc.Canvas.RIGHT),
        align = this.tabBarAlign;

    
    var tabs = this.tabs.duplicate(),
        undef;
    for (var i = 0; i < tabs.length; i++) {
        for (var j in this.tabProperties) {
            if (tabs[i][j] === undef) tabs[i][j] = this.tabProperties[j];
        }
    }    
    
	// assemble tabBar properties
	var tabBarProperties = isc.addProperties({
        ID:this.getID() + "_tabBar",

        width: (tabBarIsVertical ? this.tabBarThickness : "100%"),
        height: (tabBarIsVertical ? "100%" : this.tabBarThickness),

        // Default the tab bar to having the same accessKey as the tabSet
        accessKey: this.accessKey,
        
        // If the user has specified a tabIndex for the tabSet, apply it to the tabBar as well
        tabIndex: this.tabIndex,

        // Passes in the user-specified tabs array. 
        // This is a simple way for the developer to specify title / size / etc. for each tab
        // Note - we copy the tabs array rather than pointing at the same array.
        // the tabSet should manage the tabs and call the appropriate actions on the tabBar.
		tabs:tabs,

        align:this.tabBarAlign,
				 
		// tabBar is set vertical or not depending on the value of tabBarPosition.
		orientation: tabBarIsVertical ? isc.Layout.VERTICAL : isc.Layout.HORIZONTAL,
				 
		// the initially selectedTab is passed in.
		selectedTab:this.selectedTab,

        // Override buttonSelected() and buttonDeselected() to fire _tabSelected() and
        // _tabDeselected() on this widget
        // Note: these methods are only fired on actual selection change - repeated clicks on
        // the buttons should not fire these methods.
        buttonDeselected : function (button) {
            // Default implementation will remember which tab was selected, handle moving the
            // deselected tab behind the baseline image, etc.
            this.Super("buttonDeselected", arguments);
            
            if (this.parentElement != null)
                this.parentElement._tabDeselected(button);
        },
        				 
		buttonSelected : function (button) {
            
            this.Super("buttonSelected", arguments);
            
            //call _tabSelected() on this tabSet to trigger any selection actions
            if (this.parentElement != null) {
                this.parentElement._tabSelected(button);
            }
        },
        
        // notify the tabset if a tab resizes
        childResized : function () {
            this.Super("childResized", arguments);
            if (this.parentElement != null) {
                this.parentElement._tabResized();
            }
        },
                 
		// other properties
		tabBarPosition:this.tabBarPosition,
        tabBarAlign:this.tabBarAlign,
		autoDraw:false
        
	}, this.tabBarDefaults, this.tabBarProperties);
	
	// create tabBar and add as child.  NOTE: make available as this.tabBar as well since it's
    // declared as an autoChild
	this.tabBar = this._tabBar = isc.TabBar.create(tabBarProperties);
    this.addChild(this._tabBar);
},

// override setAccessKey and setTabIndex to manage the accessKey / tabIndex of the 
// tab-bar

setTabIndex : function (index) {
    this.Super("setTabIndex", arguments)

    if (this._tabBar != null) this._tabBar.setTabIndex(index);
},

// setAccessKey()
// apply the accessKey to the tabBar, which will in turn apply it to the focus-tab.
setAccessKey : function (accessKey) {
    this.Super("setAccessKey", arguments);
    if (this._tabBar != null) this._tabBar.setAccessKey(accessKey);
},


//>	@method	tabSet.createPanes()
//      converts any tab.pane object literals to canvii
// @visibility internal
//<
createPanes : function () {
    for (var i = 0; i < this.tabs.length; i++) {
	    var tab = this.tabs[i],
			pane = tab.pane
		;
		if (pane == null) continue;
        
        tab.pane = this.createPane(pane);
        
    }
},

//>	@method	tabSet.createPane()
//      (Internal method)
//      Given a pane object, create a canvas from it, and prepare it to be made a pane of this
//      object.
//      Creates canvas from properties object.
//      Ensures canvas is deparented / hidden.
//      Returns canvas.
//  @param  pane (object | canvas) object literal / canvas to be made into a pane
// @visibility internal
//<
createPane : function (pane) {
    if (pane == null) return pane;

    // handle string name, autoChild, props object
    if (!isc.isA.Canvas(pane)) pane = this.createCanvas(pane);

    if (pane == null) return pane;

    // make sure the pane is hidden before we add it to the pane container - otherwise it will
    // draw before the tab is actually selected
    pane.hide();

    // add the pane as a member to the paneContainer right away.
    //
    // Note: previously we did the addMember in updateTab() and _showTab().  Now we also do it
    // here - the reason is that it immediately establishes the parent-child relationship that
    // the ExampleViewer relies on to correctly render a view.  In the ExampleViewer we scan
    // for top-level Canvases and add them to a view Canvas - if this addMember isn't here,
    // we'll mistakenly add panes declared inline in a TabSet constructor block as top-level
    // canvases.
    //
    // We still must do the addMember in updateTab() and _showTab() because tabSelected() may
    // be overridden to provide a new pane.
    this.paneContainer.addMember(pane);

    return pane;
},

makePaneContainer : function () {
    
    var props = {   
            ID: this.getID() + "_paneContainer",
            _generated: false,
            className:this.paneContainerClassName,
            layoutMargin:(this.paneMargin || 0),
            overflow:this.paneContainerOverflow,
            
            _createEdgedCanvas : function () {
                var edgedCanvas = this.Super("_createEdgedCanvas", arguments);
                edgedCanvas.addMethods({
                    _asymmetricEdgePrefixes:{top:"_top",left:"_left",bottom:"_bottom",right:"_right"},
                    getEdgePrefix : function (edgeName) {
                        var pc = this.eventProxy,
                            tabSet = pc ? pc.creator : null;
                        if (tabSet && !tabSet.symmetricEdges) {
                            return this._asymmetricEdgePrefixes[tabSet.tabBarPosition];
                        }
                    }
                });
                return edgedCanvas;
            }
        };
    // NOTE: these dynamic defaults will override any static defaults defined in
    // this.paneContainerDefaults, (but may be overridden by attributes in
    // this.paneContainerProperties)
    // For back-compat, if showPaneContainerEdges / getPaneContainerCustomEdges() don't have
    // an explicit value, don't apply them to this object so we continue to pick up
    // showEdges/customEdges from the paneContainerDefaults block  
    if (this.showPaneContainerEdges != null) props.showEdges = this.showPaneContainerEdges;        
    if (this.getPaneContainerEdges && this.getPaneContainerEdges() != null) {
        props.customEdges = this.getPaneContainerEdges();
    }
    // asymmetricEdges needs support for asymmetric edge sizes and offsets
    
    if (!this.symmetricEdges) {
        var sizes = this[this._asymmetricEdgeSizePropertyMap[this.tabBarPosition]];
        if (sizes && sizes.defaultSize != null) props.edgeSize = sizes.defaultSize;
        if (sizes && sizes.bottom != null) props.edgeBottom = sizes.bottom;
        if (sizes && sizes.top != null) props.edgeTop = sizes.top;
        if (sizes && sizes.left != null) props.edgeLeft = sizes.left;
        if (sizes && sizes.right != null) props.edgeRight = sizes.right;
        
        var offsets = this[this._asymmetricEdgeOffsetPropertyMap[this.tabBarPosition]];
        if (offsets && offsets.defaultSize != null) props.edgeOffset = offsets.defaultSize;
        if (offsets && offsets.bottom != null) props.edgeOffsetBottom = offsets.bottom;
        if (offsets && offsets.top != null) props.edgeOffsetTop = offsets.top;
        if (offsets && offsets.left != null) props.edgeOffsetLeft = offsets.left;
        if (offsets && offsets.right != null) props.edgeOffsetRight = offsets.right;
        
    }
     
    this.addAutoChild("paneContainer", props);
},

// For efficiency avoid assembling asymmetric edge size / offset property names on the fly
_asymmetricEdgeSizePropertyMap : {
    top:"topEdgeSizes", bottom:"bottomEdgeSizes", left:"leftEdgeSizes", right:"rightEdgeSizes"
},
_asymmetricEdgeOffsetPropertyMap : {
    top:"topEdgeOffsets", bottom:"bottomEdgeOffsets", left:"leftEdgeOffsets",
    right:"rightEdgeOffsets"
},

//> @attr tabSet.showPartialEdges (boolean : false : [IRA])
// If the paneContainer for this tab set is showing +link{Canvas.showEdges,edges}, setting this
// attribute to <code>true</code> will set the paneContainer to show
// +link{canvas.customEdges,customEdges} for the three sides opposing the tabBarPosition.
// @visibility external
//<
 
//>	@method tabSet.getPaneContainerEdges() [A]
// If the paneContainer for this tab set is showing +link{Canvas.showEdges,edges}, this 
// method can be used to specify (dynamically) which +link{canvas.customEdges,customEdges} to
// show. Called when the pane creator is created.
// <P>
// Default implementation will return null unless +link{tabSet.showPartialEdges,showPartialEdges}
// is true, in which case it will return the three edges opposite the
// +link{tabSet.tabBarPosition,tabBarPosition}.
// @return (array) array of custom edges to show
// @visibility external
//<
getPaneContainerEdges : function () {
    if (this.showPartialEdges) {
                if (this.tabBarPosition == "bottom") return ["T","L","R"];
                else if (this.tabBarPosition == "left") return ["T","B","R"];
                else if (this.tabBarPosition == "right") return ["T","B","L"];
                else return ["B","L","R"];