lib/dijit/layout/_TabContainerBase.js.uncompressed.js

   1 require({cache:{
   2 'url:dijit/layout/templates/TabContainer.html':"<div class=\"dijitTabContainer\">\n\t<div class=\"dijitTabListWrapper\" data-dojo-attach-point=\"tablistNode\"></div>\n\t<div data-dojo-attach-point=\"tablistSpacer\" class=\"dijitTabSpacer ${baseClass}-spacer\"></div>\n\t<div class=\"dijitTabPaneWrapper ${baseClass}-container\" data-dojo-attach-point=\"containerNode\"></div>\n</div>\n"}});
   3 define("dijit/layout/_TabContainerBase", [
   4         "dojo/text!./templates/TabContainer.html",
   5         "./StackContainer",
   6         "./utils",      // marginBox2contextBox, layoutChildren
   7         "../_TemplatedMixin",
   8         "dojo/_base/declare", // declare
   9         "dojo/dom-class", // domClass.add
  10         "dojo/dom-geometry", // domGeometry.contentBox
  11         "dojo/dom-style" // domStyle.style
  12 ], function(template, StackContainer, layoutUtils, _TemplatedMixin, declare, domClass, domGeometry, domStyle){
  13
  14
  15 /*=====
  16         var StackContainer = dijit.layout.StackContainer;
  17         var _TemplatedMixin = dijit._TemplatedMixin;
  18 =====*/
  19
  20 // module:
  21 //              dijit/layout/_TabContainerBase
  22 // summary:
  23 //              Abstract base class for TabContainer.   Must define _makeController() to instantiate
  24 //              and return the widget that displays the tab labels
  25
  26
  27 return declare("dijit.layout._TabContainerBase", [StackContainer, _TemplatedMixin], {
  28         // summary:
  29         //              Abstract base class for TabContainer.   Must define _makeController() to instantiate
  30         //              and return the widget that displays the tab labels
  31         // description:
  32         //              A TabContainer is a container that has multiple panes, but shows only
  33         //              one pane at a time.  There are a set of tabs corresponding to each pane,
  34         //              where each tab has the name (aka title) of the pane, and optionally a close button.
  35
  36         // tabPosition: String
  37         //              Defines where tabs go relative to tab content.
  38         //              "top", "bottom", "left-h", "right-h"
  39         tabPosition: "top",
  40
  41         baseClass: "dijitTabContainer",
  42
  43         // tabStrip: [const] Boolean
  44         //              Defines whether the tablist gets an extra class for layouting, putting a border/shading
  45         //              around the set of tabs.   Not supported by claro theme.
  46         tabStrip: false,
  47
  48         // nested: [const] Boolean
  49         //              If true, use styling for a TabContainer nested inside another TabContainer.
  50         //              For tundra etc., makes tabs look like links, and hides the outer
  51         //              border since the outer TabContainer already has a border.
  52         nested: false,
  53
  54         templateString: template,
  55
  56         postMixInProperties: function(){
  57                 // set class name according to tab position, ex: dijitTabContainerTop
  58                 this.baseClass += this.tabPosition.charAt(0).toUpperCase() + this.tabPosition.substr(1).replace(/-.*/, "");
  59
  60                 this.srcNodeRef && domStyle.set(this.srcNodeRef, "visibility", "hidden");
  61
  62                 this.inherited(arguments);
  63         },
  64
  65         buildRendering: function(){
  66                 this.inherited(arguments);
  67
  68                 // Create the tab list that will have a tab (a.k.a. tab button) for each tab panel
  69                 this.tablist = this._makeController(this.tablistNode);
  70
  71                 if(!this.doLayout){ domClass.add(this.domNode, "dijitTabContainerNoLayout"); }
  72
  73                 if(this.nested){
  74                         /* workaround IE's lack of support for "a > b" selectors by
  75                          * tagging each node in the template.
  76                          */
  77                         domClass.add(this.domNode, "dijitTabContainerNested");
  78                         domClass.add(this.tablist.containerNode, "dijitTabContainerTabListNested");
  79                         domClass.add(this.tablistSpacer, "dijitTabContainerSpacerNested");
  80                         domClass.add(this.containerNode, "dijitTabPaneWrapperNested");
  81                 }else{
  82                         domClass.add(this.domNode, "tabStrip-" + (this.tabStrip ? "enabled" : "disabled"));
  83                 }
  84         },
  85
  86         _setupChild: function(/*dijit._Widget*/ tab){
  87                 // Overrides StackContainer._setupChild().
  88                 domClass.add(tab.domNode, "dijitTabPane");
  89                 this.inherited(arguments);
  90         },
  91
  92         startup: function(){
  93                 if(this._started){ return; }
  94
  95                 // wire up the tablist and its tabs
  96                 this.tablist.startup();
  97
  98                 this.inherited(arguments);
  99         },
 100
 101         layout: function(){
 102                 // Overrides StackContainer.layout().
 103                 // Configure the content pane to take up all the space except for where the tabs are
 104
 105                 if(!this._contentBox || typeof(this._contentBox.l) == "undefined"){return;}
 106
 107                 var sc = this.selectedChildWidget;
 108
 109                 if(this.doLayout){
 110                         // position and size the titles and the container node
 111                         var titleAlign = this.tabPosition.replace(/-h/, "");
 112                         this.tablist.layoutAlign = titleAlign;
 113                         var children = [this.tablist, {
 114                                 domNode: this.tablistSpacer,
 115                                 layoutAlign: titleAlign
 116                         }, {
 117                                 domNode: this.containerNode,
 118                                 layoutAlign: "client"
 119                         }];
 120                         layoutUtils.layoutChildren(this.domNode, this._contentBox, children);
 121
 122                         // Compute size to make each of my children.
 123                         // children[2] is the margin-box size of this.containerNode, set by layoutChildren() call above
 124                         this._containerContentBox = layoutUtils.marginBox2contentBox(this.containerNode, children[2]);
 125
 126                         if(sc && sc.resize){
 127                                 sc.resize(this._containerContentBox);
 128                         }
 129                 }else{
 130                         // just layout the tab controller, so it can position left/right buttons etc.
 131                         if(this.tablist.resize){
 132                                 //make the tabs zero width so that they don't interfere with width calc, then reset
 133                                 var s = this.tablist.domNode.style;
 134                                 s.width="0";
 135                                 var width = domGeometry.getContentBox(this.domNode).w;
 136                                 s.width="";
 137                                 this.tablist.resize({w: width});
 138                         }
 139
 140                         // and call resize() on the selected pane just to tell it that it's been made visible
 141                         if(sc && sc.resize){
 142                                 sc.resize();
 143                         }
 144                 }
 145         },
 146
 147         destroy: function(){
 148                 if(this.tablist){
 149                         this.tablist.destroy();
 150                 }
 151                 this.inherited(arguments);
 152         }
 153 });
 154
 155 });