]>
Commit | Line | Data |
---|---|---|
1354d172 AD |
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 | }); |