define([
"dojo/_base/array", // array.forEach array.indexOf array.map
"dojo/_base/declare", // declare
"dojo/dom-class",
"dojo/dom-construct",
"dojo/keys", // keys
"dojo/_base/lang", // lang.getObject
"dojo/on",
"dojo/topic",
"../focus", // focus.focus()
"../registry", // registry.byId
"../_Widget",
"../_TemplatedMixin",
"../_Container",
"../form/ToggleButton",
"dojo/touch", // for normalized click handling, see dojoClick property setting in postCreate()
"dojo/i18n!../nls/common"
], function(array, declare, domClass, domConstruct, keys, lang, on, topic, focus, registry, _Widget, _TemplatedMixin, _Container, ToggleButton){
// module:
// dijit/layout/StackController
var StackButton = declare("dijit.layout._StackButton", 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",
// closeButton: Boolean
// When true, display close button for this tab
closeButton: false,
_aria_attr: "aria-selected",
buildRendering: function(/*Event*/ evt){
this.inherited(arguments);
(this.focusNode || this.domNode).setAttribute("role", "tab");
}
});
var StackController = declare("dijit.layout.StackController", [_Widget, _TemplatedMixin, _Container], {
// summary:
// Set of buttons to select a page in a `dijit/layout/StackContainer`
// description:
// Monitors the specified StackContainer, and whenever a page is
// added, deleted, or selected, updates itself accordingly.
baseClass: "dijitStackController",
templateString: "",
// containerId: [const] String
// The id of the page container that I point to
containerId: "",
// buttonWidget: [const] Constructor
// The button widget to create to correspond to each page
buttonWidget: StackButton,
// buttonWidgetCloseClass: String
// CSS class of [x] close icon, used by event delegation code to tell when close button was clicked
buttonWidgetCloseClass: "dijitStackCloseButton",
pane2button: function(/*String*/ id){
// summary:
// Returns the button corresponding to the pane w/the given id.
// tags:
// protected
return registry.byId(this.id + "_" + id);
},
postCreate: function(){
this.inherited(arguments);
// Listen to notifications from StackContainer. This is tricky because the StackContainer may not have
// been created yet, so abstracting it through topics.
// Note: for TabContainer we can do this through bubbled events instead of topics; maybe that's
// all we support for 2.0?
this.own(
topic.subscribe(this.containerId + "-startup", lang.hitch(this, "onStartup")),
topic.subscribe(this.containerId + "-addChild", lang.hitch(this, "onAddChild")),
topic.subscribe(this.containerId + "-removeChild", lang.hitch(this, "onRemoveChild")),
topic.subscribe(this.containerId + "-selectChild", lang.hitch(this, "onSelectChild")),
topic.subscribe(this.containerId + "-containerKeyDown", lang.hitch(this, "onContainerKeyDown"))
);
// Listen for click events to select or close tabs.
// No need to worry about ENTER/SPACE key handling: tabs are selected via left/right arrow keys,
// and closed via shift-F10 (to show the close menu).
// Also, add flag to use normalized click handling from dojo/touch
this.containerNode.dojoClick = true;
this.own(on(this.containerNode, 'click', lang.hitch(this, function(evt){
var button = registry.getEnclosingWidget(evt.target);
if(button != this.containerNode && !button.disabled && button.page){
for(var target = evt.target; target !== this.containerNode; target = target.parentNode){
if(domClass.contains(target, this.buttonWidgetCloseClass)){
this.onCloseButtonClick(button.page);
break;
}else if(target == button.domNode){
this.onButtonClick(button.page);
break;
}
}
}
})));
},
onStartup: function(/*Object*/ info){
// summary:
// Called after StackContainer has finished initializing
// tags:
// private
this.textDir = info.textDir;
array.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);
}
// Reflect events like page title changes to tab buttons
var containerNode = registry.byId(this.containerId).containerNode,
pane2button = lang.hitch(this, "pane2button"),
paneToButtonAttr = {
"title": "label",
"showtitle": "showLabel",
"iconclass": "iconClass",
"closable": "closeButton",
"tooltip": "title",
"disabled": "disabled",
"textdir": "textdir"
},
connectFunc = function(attr, buttonAttr){
return on(containerNode, "attrmodified-" + attr, function(evt){
var button = pane2button(evt.detail && evt.detail.widget && evt.detail.widget.id);
if(button){
button.set(buttonAttr, evt.detail.newValue);
}
});
};
for(var attr in paneToButtonAttr){
this.own(connectFunc(attr, paneToButtonAttr[attr]));
}
},
destroy: function(preserveDom){
// Since the buttons are internal to the StackController widget, destroy() should remove them.
// When #5796 is fixed for 2.0 can get rid of this function completely.
this.destroyDescendants(preserveDom);
this.inherited(arguments);
},
onAddChild: function(/*dijit/_WidgetBase*/ 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
// (remove typeof buttonWidget == string support in 2.0)
var Cls = lang.isString(this.buttonWidget) ? lang.getObject(this.buttonWidget) : this.buttonWidget;
var button = new Cls({
id: this.id + "_" + page.id,
name: this.id + "_" + page.id, // note: must match id used in pane2button()
label: page.title,
disabled: page.disabled,
ownerDocument: this.ownerDocument,
dir: page.dir,
lang: page.lang,
textDir: page.textDir || this.textDir,
showLabel: page.showTitle,
iconClass: page.iconClass,
closeButton: page.closable,
title: page.tooltip,
page: page
});
this.addChild(button, insertIndex);
page.controlButton = button; // this value might be overwritten if two tabs point to same container
if(!this._currentChild){
// If this is the first child then StackContainer will soon publish that it's selected,
// but before that StackContainer calls layout(), and before layout() is called the
// StackController needs to have the proper height... which means that the button needs
// to be marked as selected now. See test_TabContainer_CSS.html for test.
this.onSelectChild(page);
}
// Add this StackController button to the list of things that labels that StackContainer pane.
// Also, if there's an aria-labelledby parameter for the pane, then the aria-label parameter is unneeded.
var labelledby = page._wrapper.getAttribute("aria-labelledby") ?
page._wrapper.getAttribute("aria-labelledby") + " " + button.id : button.id;
page._wrapper.removeAttribute("aria-label");
page._wrapper.setAttribute("aria-labelledby", labelledby);
},
onRemoveChild: function(/*dijit/_WidgetBase*/ 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;
}
var button = this.pane2button(page.id);
if(button){
this.removeChild(button);
button.destroy();
}
delete page.controlButton;
},
onSelectChild: function(/*dijit/_WidgetBase*/ 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);
oldButton.focusNode.setAttribute("tabIndex", "-1");
}
var newButton = this.pane2button(page.id);
newButton.set('checked', true);
this._currentChild = page;
newButton.focusNode.setAttribute("tabIndex", "0");
var container = registry.byId(this.containerId);
},
onButtonClick: function(/*dijit/_WidgetBase*/ page){
// summary:
// Called whenever one of my child buttons is pressed in an attempt to select a page
// tags:
// private
var button = this.pane2button(page.id);
// For TabContainer where the tabs are , need to set focus explicitly when left/right arrow
focus.focus(button.focusNode);
if(this._currentChild && this._currentChild.id === page.id){
//In case the user clicked the checked button, keep it in the checked state because it remains to be the selected stack page.
button.set('checked', true);
}
var container = registry.byId(this.containerId);
container.selectChild(page);
},
onCloseButtonClick: function(/*dijit/_WidgetBase*/ page){
// summary:
// Called whenever one of my child buttons [X] is pressed in an attempt to close a page
// tags:
// private
var container = registry.byId(this.containerId);
container.closeChild(page);
if(this._currentChild){
var b = this.pane2button(this._currentChild.id);
if(b){
focus.focus(b.focusNode || b.domNode);
}
}
},
// TODO: this is a bit redundant with forward, back api in StackContainer
adjacent: function(/*Boolean*/ forward){
// summary:
// Helper for onkeydown 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 idx = array.indexOf(children, this.pane2button(this._currentChild.id)),
current = children[idx];
// Pick next/previous non-disabled button to focus on. If we get back to the original button it means
// that all buttons must be disabled, so return current child to avoid an infinite loop.
var child;
do{
idx = (idx + (forward ? 1 : children.length - 1)) % children.length;
child = children[idx];
}while(child.disabled && child != current);
return child; // dijit/_WidgetBase
},
onkeydown: function(/*Event*/ e, /*Boolean?*/ fromContainer){
// 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){
switch(e.keyCode){
case keys.LEFT_ARROW:
case keys.UP_ARROW:
if(!e._djpage){
forward = false;
}
break;
case keys.PAGE_UP:
if(e.ctrlKey){
forward = false;
}
break;
case keys.RIGHT_ARROW:
case keys.DOWN_ARROW:
if(!e._djpage){
forward = true;
}
break;
case keys.PAGE_DOWN:
if(e.ctrlKey){
forward = true;
}
break;
case keys.HOME:
// Navigate to first non-disabled child
var children = this.getChildren();
for(var idx = 0; idx < children.length; idx++){
var child = children[idx];
if(!child.disabled){
this.onButtonClick(child.page);
break;
}
}
e.stopPropagation();
e.preventDefault();
break;
case keys.END:
// Navigate to last non-disabled child
var children = this.getChildren();
for(var idx = children.length - 1; idx >= 0; idx--){
var child = children[idx];
if(!child.disabled){
this.onButtonClick(child.page);
break;
}
}
e.stopPropagation();
e.preventDefault();
break;
case keys.DELETE:
case "W".charCodeAt(0): // ctrl-W
if(this._currentChild.closable &&
(e.keyCode == keys.DELETE || e.ctrlKey)){
this.onCloseButtonClick(this._currentChild);
// avoid browser tab closing
e.stopPropagation();
e.preventDefault();
}
break;
case keys.TAB:
if(e.ctrlKey){
this.onButtonClick(this.adjacent(!e.shiftKey).page);
e.stopPropagation();
e.preventDefault();
}
break;
}
// handle next/previous page navigation (left/right arrow, etc.)
if(forward !== null){
this.onButtonClick(this.adjacent(forward).page);
e.stopPropagation();
e.preventDefault();
}
}
},
onContainerKeyDown: function(/*Object*/ info){
// summary:
// Called when there was a keydown on the container
// tags:
// private
info.e._djpage = info.page;
this.onkeydown(info.e);
}
});
StackController.StackButton = StackButton; // for monkey patching
return StackController;
});