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; });