source: [view]
define("dijit/layout/StackController", ["dojo", "dijit", "dijit/_Widget", "dijit/_Templated", "dijit/_Container", "dijit/form/ToggleButton", "i18n!dijit/nls/common"], function(dojo, dijit) {
dojo.declare(
"dijit.layout.StackController",
[dijit._Widget, dijit._Templated, dijit._Container],
{
// summary:
// Set of buttons to select a page in a page list.
// description:
// Monitors the specified StackContainer, and whenever a page is
// added, deleted, or selected, updates itself accordingly.
templateString: "",
// containerId: [const] String
// The id of the page container that I point to
containerId: "",
// buttonWidget: [const] String
// The name of the button widget to create to correspond to each page
buttonWidget: "dijit.layout._StackButton",
constructor: function(){
this.pane2button = {}; // mapping from pane id to buttons
this.pane2connects = {}; // mapping from pane id to this.connect() handles
this.pane2watches = {}; // mapping from pane id to watch() handles
},
buildRendering: function(){
this.inherited(arguments);
dijit.setWaiRole(this.domNode, "tablist"); // TODO: unneeded? it's in template above.
},
postCreate: function(){
this.inherited(arguments);
// Listen to notifications from StackContainer
this.subscribe(this.containerId+"-startup", "onStartup");
this.subscribe(this.containerId+"-addChild", "onAddChild");
this.subscribe(this.containerId+"-removeChild", "onRemoveChild");
this.subscribe(this.containerId+"-selectChild", "onSelectChild");
this.subscribe(this.containerId+"-containerKeyPress", "onContainerKeyPress");
},
onStartup: function(/*Object*/ info){
// summary:
// Called after StackContainer has finished initializing
// tags:
// private
dojo.forEach(info.children, this.onAddChild, this);
if(info.selected){
// Show button corresponding to selected pane (unless selected
// is null because there are no panes)
this.onSelectChild(info.selected);
}
},
destroy: function(){
for(var pane in this.pane2button){
this.onRemoveChild(dijit.byId(pane));
}
this.inherited(arguments);
},
onAddChild: function(/*dijit._Widget*/ page, /*Integer?*/ insertIndex){
// summary:
// Called whenever a page is added to the container.
// Create button corresponding to the page.
// tags:
// private
// create an instance of the button widget
var cls = dojo.getObject(this.buttonWidget);
var button = new cls({
id: this.id + "_" + page.id,
label: page.title,
dir: page.dir,
lang: page.lang,
showLabel: page.showTitle,
iconClass: page.iconClass,
closeButton: page.closable,
title: page.tooltip
});
dijit.setWaiState(button.focusNode,"selected", "false");
// map from page attribute to corresponding tab button attribute
var pageAttrList = ["title", "showTitle", "iconClass", "closable", "tooltip"],
buttonAttrList = ["label", "showLabel", "iconClass", "closeButton", "title"];
// watch() so events like page title changes are reflected in tab button
this.pane2watches[page.id] = dojo.map(pageAttrList, function(pageAttr, idx){
return page.watch(pageAttr, function(name, oldVal, newVal){
button.set(buttonAttrList[idx], newVal);
});
});
// connections so that clicking a tab button selects the corresponding page
this.pane2connects[page.id] = [
this.connect(button, 'onClick', dojo.hitch(this,"onButtonClick", page)),
this.connect(button, 'onClickCloseButton', dojo.hitch(this,"onCloseButtonClick", page))
];
this.addChild(button, insertIndex);
this.pane2button[page.id] = button;
page.controlButton = button; // this value might be overwritten if two tabs point to same container
if(!this._currentChild){ // put the first child into the tab order
button.focusNode.setAttribute("tabIndex", "0");
dijit.setWaiState(button.focusNode, "selected", "true");
this._currentChild = page;
}
// make sure all tabs have the same length
if(!this.isLeftToRight() && dojo.isIE && this._rectifyRtlTabList){
this._rectifyRtlTabList();
}