summaryrefslogtreecommitdiff
path: root/lib/dijit/layout/_TabContainerBase.js
diff options
context:
space:
mode:
Diffstat (limited to 'lib/dijit/layout/_TabContainerBase.js')
-rw-r--r--lib/dijit/layout/_TabContainerBase.js193
1 files changed, 135 insertions, 58 deletions
diff --git a/lib/dijit/layout/_TabContainerBase.js b/lib/dijit/layout/_TabContainerBase.js
index 0ba42ec35..5e07cb653 100644
--- a/lib/dijit/layout/_TabContainerBase.js
+++ b/lib/dijit/layout/_TabContainerBase.js
@@ -1,68 +1,145 @@
/*
- Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved.
+ Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
Available via Academic Free License >= 2.1 OR the modified BSD license.
see: http://dojotoolkit.org/license for details
*/
-if(!dojo._hasResource["dijit.layout._TabContainerBase"]){
-dojo._hasResource["dijit.layout._TabContainerBase"]=true;
+if(!dojo._hasResource["dijit.layout._TabContainerBase"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dijit.layout._TabContainerBase"] = true;
dojo.provide("dijit.layout._TabContainerBase");
dojo.require("dijit.layout.StackContainer");
dojo.require("dijit._Templated");
-dojo.declare("dijit.layout._TabContainerBase",[dijit.layout.StackContainer,dijit._Templated],{tabPosition:"top",baseClass:"dijitTabContainer",tabStrip:false,nested:false,templateString:dojo.cache("dijit.layout","templates/TabContainer.html","<div class=\"dijitTabContainer\">\n\t<div class=\"dijitTabListWrapper\" dojoAttachPoint=\"tablistNode\"></div>\n\t<div dojoAttachPoint=\"tablistSpacer\" class=\"dijitTabSpacer ${baseClass}-spacer\"></div>\n\t<div class=\"dijitTabPaneWrapper ${baseClass}-container\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n"),postMixInProperties:function(){
-this.baseClass+=this.tabPosition.charAt(0).toUpperCase()+this.tabPosition.substr(1).replace(/-.*/,"");
-this.srcNodeRef&&dojo.style(this.srcNodeRef,"visibility","hidden");
-this.inherited(arguments);
-},postCreate:function(){
-this.inherited(arguments);
-this.tablist=this._makeController(this.tablistNode);
-if(!this.doLayout){
-dojo.addClass(this.domNode,"dijitTabContainerNoLayout");
-}
-if(this.nested){
-dojo.addClass(this.domNode,"dijitTabContainerNested");
-dojo.addClass(this.tablist.containerNode,"dijitTabContainerTabListNested");
-dojo.addClass(this.tablistSpacer,"dijitTabContainerSpacerNested");
-dojo.addClass(this.containerNode,"dijitTabPaneWrapperNested");
-}else{
-dojo.addClass(this.domNode,"tabStrip-"+(this.tabStrip?"enabled":"disabled"));
-}
-},_setupChild:function(_1){
-dojo.addClass(_1.domNode,"dijitTabPane");
-this.inherited(arguments);
-},startup:function(){
-if(this._started){
-return;
-}
-this.tablist.startup();
-this.inherited(arguments);
-},layout:function(){
-if(!this._contentBox||typeof (this._contentBox.l)=="undefined"){
-return;
-}
-var sc=this.selectedChildWidget;
-if(this.doLayout){
-var _2=this.tabPosition.replace(/-h/,"");
-this.tablist.layoutAlign=_2;
-var _3=[this.tablist,{domNode:this.tablistSpacer,layoutAlign:_2},{domNode:this.containerNode,layoutAlign:"client"}];
-dijit.layout.layoutChildren(this.domNode,this._contentBox,_3);
-this._containerContentBox=dijit.layout.marginBox2contentBox(this.containerNode,_3[2]);
-if(sc&&sc.resize){
-sc.resize(this._containerContentBox);
-}
-}else{
-if(this.tablist.resize){
-this.tablist.resize({w:dojo.contentBox(this.domNode).w});
-}
-if(sc&&sc.resize){
-sc.resize();
-}
-}
-},destroy:function(){
-if(this.tablist){
-this.tablist.destroy();
-}
-this.inherited(arguments);
-}});
+
+
+dojo.declare("dijit.layout._TabContainerBase",
+ [dijit.layout.StackContainer, dijit._Templated],
+ {
+ // summary:
+ // Abstract base class for TabContainer. Must define _makeController() to instantiate
+ // and return the widget that displays the tab labels
+ // 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 name (aka title) of the pane, and optionally a close button.
+
+ // tabPosition: String
+ // Defines where tabs go relative to tab content.
+ // "top", "bottom", "left-h", "right-h"
+ tabPosition: "top",
+
+ baseClass: "dijitTabContainer",
+
+ // tabStrip: [const] Boolean
+ // Defines whether the tablist gets an extra class for layouting, putting a border/shading
+ // around the set of tabs. Not supported by claro theme.
+ tabStrip: false,
+
+ // nested: [const] Boolean
+ // If true, use styling for a TabContainer nested inside another TabContainer.
+ // For tundra etc., makes tabs look like links, and hides the outer
+ // border since the outer TabContainer already has a border.
+ nested: false,
+
+ templateString: dojo.cache("dijit.layout", "templates/TabContainer.html", "<div class=\"dijitTabContainer\">\n\t<div class=\"dijitTabListWrapper\" dojoAttachPoint=\"tablistNode\"></div>\n\t<div dojoAttachPoint=\"tablistSpacer\" class=\"dijitTabSpacer ${baseClass}-spacer\"></div>\n\t<div class=\"dijitTabPaneWrapper ${baseClass}-container\" dojoAttachPoint=\"containerNode\"></div>\n</div>\n"),
+
+ postMixInProperties: function(){
+ // set class name according to tab position, ex: dijitTabContainerTop
+ this.baseClass += this.tabPosition.charAt(0).toUpperCase() + this.tabPosition.substr(1).replace(/-.*/, "");
+
+ this.srcNodeRef && dojo.style(this.srcNodeRef, "visibility", "hidden");
+
+ this.inherited(arguments);
+ },
+
+ buildRendering: function(){
+ this.inherited(arguments);
+
+ // Create the tab list that will have a tab (a.k.a. tab button) for each tab panel
+ this.tablist = this._makeController(this.tablistNode);
+
+ if(!this.doLayout){ dojo.addClass(this.domNode, "dijitTabContainerNoLayout"); }
+
+ if(this.nested){
+ /* workaround IE's lack of support for "a > b" selectors by
+ * tagging each node in the template.
+ */
+ dojo.addClass(this.domNode, "dijitTabContainerNested");
+ dojo.addClass(this.tablist.containerNode, "dijitTabContainerTabListNested");
+ dojo.addClass(this.tablistSpacer, "dijitTabContainerSpacerNested");
+ dojo.addClass(this.containerNode, "dijitTabPaneWrapperNested");
+ }else{
+ dojo.addClass(this.domNode, "tabStrip-" + (this.tabStrip ? "enabled" : "disabled"));
+ }
+ },
+
+ _setupChild: function(/*dijit._Widget*/ tab){
+ // Overrides StackContainer._setupChild().
+ dojo.addClass(tab.domNode, "dijitTabPane");
+ this.inherited(arguments);
+ },
+
+ startup: function(){
+ if(this._started){ return; }
+
+ // wire up the tablist and its tabs
+ this.tablist.startup();
+
+ this.inherited(arguments);
+ },
+
+ layout: function(){
+ // Overrides StackContainer.layout().
+ // Configure the content pane to take up all the space except for where the tabs are
+
+ if(!this._contentBox || typeof(this._contentBox.l) == "undefined"){return;}
+
+ var sc = this.selectedChildWidget;
+
+ if(this.doLayout){
+ // position and size the titles and the container node
+ var titleAlign = this.tabPosition.replace(/-h/, "");
+ this.tablist.layoutAlign = titleAlign;
+ var children = [this.tablist, {
+ 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(sc && sc.resize){
+ sc.resize(this._containerContentBox);
+ }
+ }else{
+ // just layout the tab controller, so it can position left/right buttons etc.
+ if(this.tablist.resize){
+ //make the tabs zero width so that they don't interfere with width calc, then reset
+ var s = this.tablist.domNode.style;
+ s.width="0";
+ var width = dojo.contentBox(this.domNode).w;
+ s.width="";
+ this.tablist.resize({w: width});
+ }
+
+ // and call resize() on the selected pane just to tell it that it's been made visible
+ if(sc && sc.resize){
+ sc.resize();
+ }
+ }
+ },
+
+ destroy: function(){
+ if(this.tablist){
+ this.tablist.destroy();
+ }
+ this.inherited(arguments);
+ }
+});
+
}