| New file |
|---|
| 0,0 → 1,451 |
|---|
| if(!dojo._hasResource["dijit.layout.StackContainer"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. |
| dojo._hasResource["dijit.layout.StackContainer"] = true; |
| dojo.provide("dijit.layout.StackContainer"); |
| |
| dojo.require("dijit._Templated"); |
| dojo.require("dijit.layout._LayoutWidget"); |
| dojo.require("dijit.form.Button"); |
| |
| dojo.declare( |
| "dijit.layout.StackContainer", |
| dijit.layout._LayoutWidget, |
| |
| // summary |
| // A container that has multiple children, but shows only |
| // one child at a time (like looking at the pages in a book one by one). |
| // |
| // Publishes topics <widgetId>-addChild, <widgetId>-removeChild, and <widgetId>-selectChild |
| // |
| // Can be base class for container, Wizard, Show, etc. |
| { |
| // doLayout: Boolean |
| // if true, change the size of my currently displayed child to match my size |
| doLayout: true, |
| |
| _started: false, |
| |
| // selectedChildWidget: Widget |
| // References the currently selected child widget, if any |
| |
| postCreate: function(){ |
| dijit.setWaiRole((this.containerNode || this.domNode), "tabpanel"); |
| this.connect(this.domNode, "onkeypress", this._onKeyPress); |
| }, |
| |
| startup: function(){ |
| if(this._started){ return; } |
| |
| var children = this.getChildren(); |
| |
| // Setup each page panel |
| dojo.forEach(children, this._setupChild, this); |
| |
| // Figure out which child to initially display |
| dojo.some(children, function(child){ |
| if(child.selected){ |
| this.selectedChildWidget = child; |
| } |
| return child.selected; |
| }, this); |
| |
| var selected = this.selectedChildWidget; |
| |
| // Default to the first child |
| if(!selected && children[0]){ |
| selected = this.selectedChildWidget = children[0]; |
| selected.selected = true; |
| } |
| if(selected){ |
| this._showChild(selected); |
| } |
| |
| // Now publish information about myself so any StackControllers can initialize.. |
| dojo.publish(this.id+"-startup", [{children: children, selected: selected}]); |
| this.inherited("startup",arguments); |
| this._started = true; |
| }, |
| |
| _setupChild: function(/*Widget*/ page){ |
| // Summary: prepare the given child |
| |
| page.domNode.style.display = "none"; |
| |
| // since we are setting the width/height of the child elements, they need |
| // to be position:relative, or IE has problems (See bug #2033) |
| page.domNode.style.position = "relative"; |
| |
| return page; // dijit._Widget |
| }, |
| |
| addChild: function(/*Widget*/ child, /*Integer?*/ insertIndex){ |
| // summary: Adds a widget to the stack |
| |
| dijit._Container.prototype.addChild.apply(this, arguments); |
| child = this._setupChild(child); |
| |
| if(this._started){ |
| // in case the tab titles have overflowed from one line to two lines |
| this.layout(); |
| |
| dojo.publish(this.id+"-addChild", [child, insertIndex]); |
| |
| // if this is the first child, then select it |
| if(!this.selectedChildWidget){ |
| this.selectChild(child); |
| } |
| } |
| }, |
| |
| removeChild: function(/*Widget*/ page){ |
| // summary: Removes the pane from the stack |
| |
| dijit._Container.prototype.removeChild.apply(this, arguments); |
| |
| // If we are being destroyed than don't run the code below (to select another page), because we are deleting |
| // every page one by one |
| if(this._beingDestroyed){ return; } |
| |
| if(this._started){ |
| // this will notify any tablists to remove a button; do this first because it may affect sizing |
| dojo.publish(this.id+"-removeChild", [page]); |
| |
| // in case the tab titles now take up one line instead of two lines |
| this.layout(); |
| } |
| |
| if(this.selectedChildWidget === page){ |
| this.selectedChildWidget = undefined; |
| if(this._started){ |
| var children = this.getChildren(); |
| if(children.length){ |
| this.selectChild(children[0]); |
| } |
| } |
| } |
| }, |
| |
| selectChild: function(/*Widget*/ page){ |
| // summary: |
| // Show the given widget (which must be one of my children) |
| |
| page = dijit.byId(page); |
| |
| if(this.selectedChildWidget != page){ |
| // Deselect old page and select new one |
| this._transition(page, this.selectedChildWidget); |
| this.selectedChildWidget = page; |
| dojo.publish(this.id+"-selectChild", [page]); |
| } |
| }, |
| |
| _transition: function(/*Widget*/newWidget, /*Widget*/oldWidget){ |
| if(oldWidget){ |
| this._hideChild(oldWidget); |
| } |
| this._showChild(newWidget); |
| |
| // Size the new widget, in case this is the first time it's being shown, |
| // or I have been resized since the last time it was shown. |
| // page must be visible for resizing to work |
| if(this.doLayout && newWidget.resize){ |
| newWidget.resize(this._containerContentBox || this._contentBox); |
| } |
| }, |
| |
| _adjacent: function(/*Boolean*/ forward){ |
| // summary: Gets the next/previous child widget in this container from the current selection |
| var children = this.getChildren(); |
| var index = dojo.indexOf(children, this.selectedChildWidget); |
| index += forward ? 1 : children.length - 1; |
| return children[ index % children.length ]; // dijit._Widget |
| }, |
| |
| forward: function(){ |
| // Summary: advance to next page |
| this.selectChild(this._adjacent(true)); |
| }, |
| |
| back: function(){ |
| // Summary: go back to previous page |
| this.selectChild(this._adjacent(false)); |
| }, |
| |
| _onKeyPress: function(e){ |
| dojo.publish(this.id+"-containerKeyPress", [{ e: e, page: this}]); |
| }, |
| |
| layout: function(){ |
| if(this.doLayout && this.selectedChildWidget && this.selectedChildWidget.resize){ |
| this.selectedChildWidget.resize(this._contentBox); |
| } |
| }, |
| |
| _showChild: function(/*Widget*/ page){ |
| var children = this.getChildren(); |
| page.isFirstChild = (page == children[0]); |
| page.isLastChild = (page == children[children.length-1]); |
| page.selected = true; |
| |
| page.domNode.style.display=""; |
| if(page._loadCheck){ |
| page._loadCheck(); // trigger load in ContentPane |
| } |
| if(page.onShow){ |
| page.onShow(); |
| } |
| }, |
| |
| _hideChild: function(/*Widget*/ page){ |
| page.selected=false; |
| page.domNode.style.display="none"; |
| if(page.onHide){ |
| page.onHide(); |
| } |
| }, |
| |
| closeChild: function(/*Widget*/ page){ |
| // summary |
| // callback when user clicks the [X] to remove a page |
| // if onClose() returns true then remove and destroy the childd |
| var remove = page.onClose(this, page); |
| if(remove){ |
| this.removeChild(page); |
| // makes sure we can clean up executeScripts in ContentPane onUnLoad |
| page.destroy(); |
| } |
| }, |
| |
| destroy: function(){ |
| this._beingDestroyed = true; |
| this.inherited("destroy",arguments); |
| } |
| }); |
| |
| dojo.declare( |
| "dijit.layout.StackController", |
| [dijit._Widget, dijit._Templated, dijit._Container], |
| { |
| // summary: |
| // Set of buttons to select a page in a page list. |
| // Monitors the specified StackContainer, and whenever a page is |
| // added, deleted, or selected, updates itself accordingly. |
| |
| templateString: "<span wairole='tablist' dojoAttachEvent='onkeypress' class='dijitStackController'></span>", |
| |
| // containerId: String |
| // the id of the page container that I point to |
| containerId: "", |
| |
| // buttonWidget: String |
| // the name of the button widget to create to correspond to each page |
| buttonWidget: "dijit.layout._StackButton", |
| |
| postCreate: function(){ |
| dijit.setWaiRole(this.domNode, "tablist"); |
| |
| this.pane2button = {}; // mapping from panes to buttons |
| this._subscriptions=[ |
| dojo.subscribe(this.containerId+"-startup", this, "onStartup"), |
| dojo.subscribe(this.containerId+"-addChild", this, "onAddChild"), |
| dojo.subscribe(this.containerId+"-removeChild", this, "onRemoveChild"), |
| dojo.subscribe(this.containerId+"-selectChild", this, "onSelectChild"), |
| dojo.subscribe(this.containerId+"-containerKeyPress", this, "onContainerKeyPress") |
| ]; |
| }, |
| |
| onStartup: function(/*Object*/ info){ |
| // summary: called after StackContainer has finished initializing |
| dojo.forEach(info.children, this.onAddChild, this); |
| this.onSelectChild(info.selected); |
| }, |
| |
| destroy: function(){ |
| dojo.forEach(this._subscriptions, dojo.unsubscribe); |
| this.inherited("destroy",arguments); |
| }, |
| |
| onAddChild: function(/*Widget*/ page, /*Integer?*/ insertIndex){ |
| // summary: |
| // Called whenever a page is added to the container. |
| // Create button corresponding to the page. |
| |
| // add a node that will be promoted to the button widget |
| var refNode = document.createElement("span"); |
| this.domNode.appendChild(refNode); |
| // create an instance of the button widget |
| var cls = dojo.getObject(this.buttonWidget); |
| var button = new cls({label: page.title, closeButton: page.closable}, refNode); |
| this.addChild(button, insertIndex); |
| this.pane2button[page] = button; |
| page.controlButton = button; // this value might be overwritten if two tabs point to same container |
| |
| dojo.connect(button, "onClick", dojo.hitch(this,"onButtonClick",page)); |
| dojo.connect(button, "onClickCloseButton", dojo.hitch(this,"onCloseButtonClick",page)); |
| |
| if(!this._currentChild){ // put the first child into the tab order |
| button.focusNode.setAttribute("tabIndex","0"); |
| this._currentChild = page; |
| } |
| }, |
| |
| onRemoveChild: function(/*Widget*/ page){ |
| // summary: |
| // Called whenever a page is removed from the container. |
| // Remove the button corresponding to the page. |
| if(this._currentChild === page){ this._currentChild = null; } |
| var button = this.pane2button[page]; |
| if(button){ |
| // TODO? if current child { reassign } |
| button.destroy(); |
| } |
| this.pane2button[page] = null; |
| }, |
| |
| onSelectChild: function(/*Widget*/ page){ |
| // summary: |
| // Called when a page has been selected in the StackContainer, either by me or by another StackController |
| |
| if(!page){ return; } |
| |
| if(this._currentChild){ |
| var oldButton=this.pane2button[this._currentChild]; |
| oldButton.setChecked(false); |
| oldButton.focusNode.setAttribute("tabIndex", "-1"); |
| } |
| |
| var newButton=this.pane2button[page]; |
| newButton.setChecked(true); |
| this._currentChild = page; |
| newButton.focusNode.setAttribute("tabIndex", "0"); |
| }, |
| |
| onButtonClick: function(/*Widget*/ page){ |
| // summary: |
| // Called whenever one of my child buttons is pressed in an attempt to select a page |
| var container = dijit.byId(this.containerId); // TODO: do this via topics? |
| container.selectChild(page); |
| }, |
| |
| onCloseButtonClick: function(/*Widget*/ page){ |
| // summary: |
| // Called whenever one of my child buttons [X] is pressed in an attempt to close a page |
| var container = dijit.byId(this.containerId); |
| container.closeChild(page); |
| var b = this.pane2button[this._currentChild]; |
| if(b){ |
| dijit.focus(b.focusNode || b.domNode); |
| } |
| }, |
| |
| // TODO: this is a bit redundant with forward, back api in StackContainer |
| adjacent: function(/*Boolean*/ forward){ |
| // find currently focused button in children array |
| var children = this.getChildren(); |
| var current = dojo.indexOf(children, this.pane2button[this._currentChild]); |
| // 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. |
| |
| if(this.disabled || e.altKey ){ return; } |
| var forward = true; |
| if(e.ctrlKey || !e._djpage){ |
| var k = dojo.keys; |
| switch(e.keyCode){ |
| case k.LEFT_ARROW: |
| case k.UP_ARROW: |
| case k.PAGE_UP: |
| forward = false; |
| // fall through |
| case k.RIGHT_ARROW: |
| case k.DOWN_ARROW: |
| case k.PAGE_DOWN: |
| this.adjacent(forward).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.keyCode == k.TAB){ |
| this.adjacent(!e.shiftKey).onClick(); |
| dojo.stopEvent(e); |
| }else if(e.keyChar == "w"){ |
| if(this._currentChild.closable){ |
| this.onCloseButtonClick(this._currentChild); |
| } |
| dojo.stopEvent(e); // avoid browser tab closing. |
| } |
| } |
| } |
| } |
| }, |
| |
| onContainerKeyPress: function(/*Object*/ info){ |
| info.e._djpage = info.page; |
| this.onkeypress(info.e); |
| } |
| }); |
| |
| dojo.declare("dijit.layout._StackButton", |
| dijit.form.ToggleButton, |
| { |
| // summary |
| // Internal widget used by StackContainer. |
| // The button-like or tab-like object you click to select or delete a page |
| |
| tabIndex: "-1", // StackContainer buttons are not in the tab order by default |
| |
| postCreate: function(/*Event*/ evt){ |
| dijit.setWaiRole((this.focusNode || this.domNode), "tab"); |
| this.inherited("postCreate", arguments); |
| }, |
| |
| 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) |
| 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. |
| evt.stopPropagation(); |
| } |
| }); |
| |
| // These arguments can be specified for the children of a StackContainer. |
| // Since any widget can be specified as a StackContainer child, mix them |
| // into the base widget class. (This is a hack, but it's effective.) |
| dojo.extend(dijit._Widget, { |
| // title: String |
| // Title of this widget. Used by TabContainer to the name the tab, etc. |
| title: "", |
| |
| // selected: Boolean |
| // Is this child currently selected? |
| selected: false, |
| |
| // closable: Boolean |
| // True if user can close (destroy) this child, such as (for example) clicking the X on the tab. |
| closable: false, // true if user can close this tab pane |
| |
| onClose: function(){ |
| // summary: Callback if someone tries to close the child, child will be closed if func returns true |
| return true; |
| } |
| }); |
| |
| } |