- Author:
- David Nickerson <nickerso@users.sourceforge.net>
- Date:
- 2009-07-16 02:00:03+12:00
- Desc:
- the starting point for the HH tutorial example
- Permanent Source URI:
- https://models.fieldml.org/workspace/a1/rawfile/f6a8f90307388eb4b040ee3566b84d88b59247f7/dojo-presentation/js/dojo/dijit/layout/TabContainer.js
dojo.provide("dijit.layout.TabContainer");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit._Templated");
dojo.requireLocalization("dijit", "common");
dojo.declare("dijit.layout.TabContainer",
[dijit.layout.StackContainer, dijit._Templated],
{
// summary:
// A Container with Title Tabs, each one pointing at a pane in the container.
// description:
// A TabContainer is a container that has multiple panes, but shows only
// one pane at a time. There are a set of tabs corresponding to each pane,
// where each tab has the title (aka title) of the pane, and optionally a close button.
//
// Publishes topics [widgetId]-addChild, [widgetId]-removeChild, and [widgetId]-selectChild
// (where [widgetId] is the id of the TabContainer itself.
// tabPosition: String
// Defines where tabs go relative to tab content.
// "top", "bottom", "left-h", "right-h"
tabPosition: "top",
baseClass: "dijitTabContainer",
// tabStrip: bool
// Defines whether the tablist gets an extra class for layouting
tabStrip: false,
templateString: null, // override setting in StackContainer
templatePath: dojo.moduleUrl("dijit.layout", "templates/TabContainer.html"),
// _controllerWidget: String
// An optional parameter to overrider the default TabContainer controller used.
_controllerWidget: "dijit.layout.TabController",
postMixInProperties: function(){
// set class name according to tab position, ex: dijiTabContainerTop
this.baseClass += this.tabPosition.charAt(0).toUpperCase() + this.tabPosition.substr(1).replace(/-.*/, "");
this.inherited(arguments);
},
postCreate: function(){
this.inherited(arguments);
// create the tab list that will have a tab (a.k.a. tab button) for each tab panel
var TabController = dojo.getObject(this._controllerWidget);
this.tablist = new TabController({
id: this.id + "_tablist",
tabPosition: this.tabPosition,
doLayout: this.doLayout,
containerId: this.id,
"class": this.baseClass + "-tabs" + (this.doLayout ? "" : " dijitTabNoLayout")
}, this.tablistNode);
// add Class for tabstrip
if (this.tabStrip){ dojo.addClass(this.tablist.domNode, this.baseClass+"Strip"); }
},
_setupChild: function(/* Widget */tab){
dojo.addClass(tab.domNode, "dijitTabPane");
this.inherited(arguments);
return tab; // Widget
},
startup: function(){
if(this._started){ return; }
// wire up the tablist and its tabs
this.tablist.startup();
this.inherited(arguments);
},
layout: function(){
// Summary: Configure the content pane to take up all the space except for where the tabs are
if(!this.doLayout){ return; }
// position and size the titles and the container node
var titleAlign = this.tabPosition.replace(/-h/,"");
var children = [
{ domNode: this.tablist.domNode, layoutAlign: titleAlign },
{ domNode: this.tablistSpacer, layoutAlign: titleAlign },
{ domNode: this.containerNode, layoutAlign: "client" }
];
dijit.layout.layoutChildren(this.domNode, this._contentBox, children);
// Compute size to make each of my children.
// children[2] is the margin-box size of this.containerNode, set by layoutChildren() call above
this._containerContentBox = dijit.layout.marginBox2contentBox(this.containerNode, children[2]);
if(this.selectedChildWidget){
this._showChild(this.selectedChildWidget);
if(this.doLayout && this.selectedChildWidget.resize){
this.selectedChildWidget.resize(this._containerContentBox);
}
}
},
destroy: function(){
if(this.tablist){
this.tablist.destroy();
}
this.inherited(arguments);
}
});
//TODO: make private?
dojo.declare("dijit.layout.TabController",
dijit.layout.StackController,
{
// summary:
// Set of tabs (the things with titles and a close button, that you click to show a tab panel).
// description:
// Lets the user select the currently shown pane in a TabContainer or StackContainer.
// TabController also monitors the TabContainer, and whenever a pane is
// added or deleted updates itself accordingly.
templateString: "<div wairole='tablist' dojoAttachEvent='onkeypress:onkeypress'></div>",
// tabPosition: String
// Defines where tabs go relative to the content.
// "top", "bottom", "left-h", "right-h"
tabPosition: "top",
// doLayout: Boolean
doLayout: true,
// buttonWidget: String
// The name of the tab widget to create to correspond to each page
buttonWidget: "dijit.layout._TabButton",
_rectifyRtlTabList: function(){
//summary: Rectify the width of all tabs in rtl, otherwise the tab widths are different in IE
if(0 >= this.tabPosition.indexOf('-h')){ return; }
if(!this.pane2button){ return; }
var maxWidth = 0;
for(var pane in this.pane2button){
var ow = this.pane2button[pane].innerDiv.scrollWidth;
maxWidth = Math.max(maxWidth, ow);
}
//unify the length of all the tabs
for(pane in this.pane2button){
this.pane2button[pane].innerDiv.style.width = maxWidth + 'px';
}
}
});
dojo.declare("dijit.layout._TabButton",
dijit.layout._StackButton,
{
// summary:
// A tab (the thing you click to select a pane).
// description:
// Contains the title of the pane, and optionally a close-button to destroy the pane.
// This is an internal widget and should not be instantiated directly.
baseClass: "dijitTab",
templatePath: dojo.moduleUrl("dijit.layout","templates/_TabButton.html"),
postCreate: function(){
if(this.closeButton){
dojo.addClass(this.innerDiv, "dijitClosable");
var _nlsResources = dojo.i18n.getLocalization("dijit", "common");
if(this.closeButtonNode){
dojo.attr(this.closeButtonNode,"title", _nlsResources.itemClose);
}
if(this.closeText){
dojo.attr(this.closeText, "title", _nlsResources.itemClose);
}
}else{
this.closeButtonNode.style.display="none";
}
this.inherited(arguments);
dojo.setSelectable(this.containerNode, false);
}
});
