/*
Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
Available via Academic Free License >= 2.1 OR the modified BSD license.
see: http://dojotoolkit.org/license for details
*/
if(!dojo._hasResource["dijit.layout.StackController"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.layout.StackController"] = true;
dojo.provide("dijit.layout.StackController");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dijit._Container");
dojo.require("dijit.form.ToggleButton");
dojo.requireLocalization("dijit", "common", null, "ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,kk,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw");
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: "<span role='tablist' dojoAttachEvent='onkeypress' class='dijitStackController'></span>",
// 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();
}
},
onRemoveChild: function(/*dijit._Widget*/ page){
// summary:
// Called whenever a page is removed from the container.
// Remove the button corresponding to the page.
// tags:
// private
if(this._currentChild === page){ this._currentChild = null; }
// disconnect/unwatch connections/watches related to page being removed
dojo.forEach(this.pane2connects[page.id], dojo.hitch(this, "disconnect"));
delete this.pane2connects[page.id];
dojo.forEach(this.pane2watches[page.id], function(w){ w.unwatch(); });
delete this.pane2watches[page.id];
var button = this.pane2button[page.id];
if(button){
this.removeChild(button);
delete this.pane2button[page.id];
button.destroy();
}
delete page.controlButton;
},
onSelectChild: function(/*dijit._Widget*/ page){
// summary:
// Called when a page has been selected in the StackContainer, either by me or by another StackController
// tags:
// private
if(!page){ return; }
if(this._currentChild){
var oldButton=this.pane2button[this._currentChild.id];
oldButton.set('checked', false);
dijit.setWaiState(oldButton.focusNode, "selected", "false");
oldButton.focusNode.setAttribute("tabIndex", "-1");
}
var newButton=this.pane2button[page.id];
newButton.set('checked', true);
dijit.setWaiState(newButton.focusNode, "selected", "true");
this._currentChild = page;
newButton.focusNode.setAttribute("tabIndex", "0");
var container = dijit.byId(this.containerId);
dijit.setWaiState(container.containerNode, "labelledby", newButton.id);
},
onButtonClick: function(/*dijit._Widget*/ page){
// summary:
// Called whenever one of my child buttons is pressed in an attempt to select a page
// tags:
// private
var container = dijit.byId(this.containerId);
container.selectChild(page);
},
onCloseButtonClick: function(/*dijit._Widget*/ page){
// summary:
// Called whenever one of my child buttons [X] is pressed in an attempt to close a page
// tags:
// private
var container = dijit.byId(this.containerId);
container.closeChild(page);
if(this._currentChild){
var b = this.pane2button[this._currentChild.id];
if(b){
dijit.focus(b.focusNode || b.domNode);
}
}
},
// TODO: this is a bit redundant with forward, back api in StackContainer
adjacent: function(/*Boolean*/ forward){
// summary:
// Helper for onkeypress to find next/previous button
// tags:
// private
if(!this.isLeftToRight() && (!this.tabPosition || /top|bottom/.test(this.tabPosition))){ forward = !forward; }
// find currently focused button in children array
var children = this.getChildren();
var current = dojo.indexOf(children, this.pane2button[this._currentChild.id]);
// pick next button to focus on
var offset = forward ? 1 : children.length - 1;
return children[ (current + offset) % children.length ]; // dijit._Widget
},
onkeypress: function(/*Event*/ e){
// summary:
// Handle keystrokes on the page list, for advancing to next/previous button
// and closing the current page if the page is closable.
// tags:
// private
if(this.disabled || e.altKey ){ return; }
var forward = null;
if(e.ctrlKey || !e._djpage){
var k = dojo.keys;
switch(e.charOrCode){
case k.LEFT_ARROW:
case k.UP_ARROW:
if(!e._djpage){ forward = false; }
break;
case k.PAGE_UP:
if(e.ctrlKey){ forward = false; }
break;
case k.RIGHT_ARROW:
case k.DOWN_ARROW:
if(!e._djpage){ forward = true; }
break;
case k.PAGE_DOWN:
if(e.ctrlKey){ forward = true; }
break;
case k.HOME:
case k.END:
var children = this.getChildren();
if(children && children.length){
children[e.charOrCode == k.HOME ? 0 : children.length-1].onClick();
}
dojo.stopEvent(e);
break;
case k.DELETE:
if(this._currentChild.closable){
this.onCloseButtonClick(this._currentChild);
}
dojo.stopEvent(e);
break;
default:
if(e.ctrlKey){
if(e.charOrCode === k.TAB){
this.adjacent(!e.shiftKey).onClick();
dojo.stopEvent(e);
}else if(e.charOrCode == "w"){
if(this._currentChild.closable){
this.onCloseButtonClick(this._currentChild);
}
dojo.stopEvent(e); // avoid browser tab closing.
}
}
}
// handle next/previous page navigation (left/right arrow, etc.)
if(forward !== null){
this.adjacent(forward).onClick();
dojo.stopEvent(e);
}
}
},
onContainerKeyPress: function(/*Object*/ info){
// summary:
// Called when there was a keypress on the container
// tags:
// private
info.e._djpage = info.page;
this.onkeypress(info.e);
}
});
dojo.declare("dijit.layout._StackButton",
dijit.form.ToggleButton,
{
// summary:
// Internal widget used by StackContainer.
// description:
// The button-like or tab-like object you click to select or delete a page
// tags:
// private
// Override _FormWidget.tabIndex.
// StackContainer buttons are not in the tab order by default.
// Probably we should be calling this.startupKeyNavChildren() instead.
tabIndex: "-1",
buildRendering: function(/*Event*/ evt){
this.inherited(arguments);
dijit.setWaiRole((this.focusNode || this.domNode), "tab");
},
onClick: function(/*Event*/ evt){
// summary:
// This is for TabContainer where the tabs are <span> rather than button,
// so need to set focus explicitly (on some browsers)
// Note that you shouldn't override this method, but you can connect to it.
dijit.focus(this.focusNode);
// ... now let StackController catch the event and tell me what to do
},
onClickCloseButton: function(/*Event*/ evt){
// summary:
// StackContainer connects to this function; if your widget contains a close button
// then clicking it should call this function.
// Note that you shouldn't override this method, but you can connect to it.
evt.stopPropagation();
}
});
}