]> git.pond.sub.org Git - eow/blobdiff - static/dojo-release-1.1.1/dijit/layout/StackContainer.js
add Dojo 1.1.1
[eow] / static / dojo-release-1.1.1 / dijit / layout / StackContainer.js
diff --git a/static/dojo-release-1.1.1/dijit/layout/StackContainer.js b/static/dojo-release-1.1.1/dijit/layout/StackContainer.js
new file mode 100644 (file)
index 0000000..3119972
--- /dev/null
@@ -0,0 +1,493 @@
+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.require("dijit.Menu");
+dojo.requireLocalization("dijit", "common", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,ROOT,pt-pt,cs,fr,es,ko,nl,zh-tw,pl,it,hu");
+
+dojo.declare(
+       "dijit.layout.StackContainer",
+       dijit.layout._LayoutWidget,
+       {
+       // summary: 
+       //      A container that has multiple children, but shows only
+       //      one child at a time
+       //
+       // description:
+       //      A container for widgets (ContentPanes, for example) That displays
+       //      only one Widget at a time.
+       //      
+       //      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
+       //
+       selectedChildWidget: null,
+=====*/
+       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(arguments);
+       },
+
+       _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 child
+               var remove = page.onClose(this, page);
+               if(remove){
+                       this.removeChild(page);
+                       // makes sure we can clean up executeScripts in ContentPane onUnLoad
+                       page.destroyRecursive();
+               }
+       },
+
+       destroy: function(){
+               this._beingDestroyed = true;
+               this.inherited(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");
+
+                       // TODO: change key from object to id, to get more separation from StackContainer
+                       this.pane2button = {};          // mapping from panes to buttons
+                       this.pane2menu = {};            // mapping from panes to close menu
+
+                       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(){
+                       for(var pane in this.pane2button){
+                               this.onRemoveChild(pane);
+                       }
+                       dojo.forEach(this._subscriptions, dojo.unsubscribe);
+                       this.inherited(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 = dojo.doc.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));
+                       if(page.closable){
+                               dojo.connect(button, "onClickCloseButton", dojo.hitch(this,"onCloseButtonClick",page));
+                               // add context menu onto title button
+                               var _nlsResources = dojo.i18n.getLocalization("dijit", "common");
+                               var closeMenu = new dijit.Menu({targetNodeIds:[button.id], id:button.id+"_Menu"});
+                               var mItem = new dijit.MenuItem({label:_nlsResources.itemClose});
+               dojo.connect(mItem, "onClick", dojo.hitch(this, "onCloseButtonClick", page));
+                       closeMenu.addChild(mItem);
+                       this.pane2menu[page] = closeMenu;
+                       }
+                       if(!this._currentChild){ // put the first child into the tab order
+                               button.focusNode.setAttribute("tabIndex", "0");
+                               this._currentChild = page;
+                       }
+                       //make sure all tabs have the same length
+                       if(!this.isLeftToRight() && dojo.isIE && this._rectifyRtlTabList){
+                               this._rectifyRtlTabList();
+                       }
+               },
+
+               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];
+                       var menu = this.pane2menu[page];
+                       if (menu){
+                               menu.destroy();
+                       }
+                       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.setAttribute('checked', false);
+                               oldButton.focusNode.setAttribute("tabIndex", "-1");
+                       }
+
+                       var newButton=this.pane2button[page];
+                       newButton.setAttribute('checked', true);
+                       this._currentChild = page;
+                       newButton.focusNode.setAttribute("tabIndex", "0");
+                       var container = dijit.byId(this.containerId);
+                       dijit.setWaiState(container.containerNode || container.domNode, "labelledby", newButton.id);
+               },
+
+               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){
+                       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]);
+                       // 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 = null;
+                       if(e.ctrlKey || !e._djpage){
+                               var k = dojo.keys;
+                               switch(e.keyCode){
+                                       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.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.
+                                                       }
+                                               }
+                               }
+                               // handle page navigation
+                               if(forward !== null){
+                                       this.adjacent(forward).onClick();
+                                       dojo.stopEvent(e);
+                               }
+                       }
+               },
+
+               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(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;
+       }
+});
+
+}