Implement selecting tab via content array, hiding tab via readonlys array

etemplate/js/et2_tabs.js

@@ -23,6 +23,10 @@
  */ 
 var et2_tabbox = et2_DOMWidget.extend({
 
+	/**
+	 * Currently selected tab
+	 */
+	selected_index: 0,
 	init: function(_parent, _type) {
 		// Create the outer tabbox container
 		this.container = $j(document.createElement("div"))
@@ -53,14 +57,47 @@ var et2_tabbox = et2_DOMWidget.extend({
 	},
 
 	_readTabs: function(tabData, tabs) {
+		var selected = "";
+		this.selected_index = 0;
+		var hidden = {};
+		if (this.id)
+		{
+			// Set the value for this element
+			var contentMgr = this.getArrayMgr("content");
+			if (contentMgr != null) {
+				var val = contentMgr.getValueForID(this.id);
+				if (val !== null)
+				{
+					selected = val;
+				}
+			}
+			contentMgr = this.getArrayMgr("readonlys");
+			if (contentMgr != null) {
+				var val = contentMgr.getValueForID(this.id);
+				if (val !== null)
+				{
+					hidden = val;
+				}
+			}
+		}
+		var i = 0;
 		et2_filteredNodeIterator(tabs, function(node, nodeName) {
 			if (nodeName == "tab")
 			{
+				var index_name = et2_readAttrWithDefault(node, "label");
+				var hide = false;
+				if(index_name) {
+					if(selected == index_name) this.selected_index = i;
+					if(hidden[index_name]) {
+						hide = true;
+					}
+				}
 				tabData.push({
 					"label": egw.lang(et2_readAttrWithDefault(node, "label", "Tab")),
 					"widget": null,
 					"contentDiv": null,
-					"flagDiv": null
+					"flagDiv": null,
+					"hidden": hide
 				});
 			}
 			else
@@ -68,6 +105,7 @@ var et2_tabbox = et2_DOMWidget.extend({
 				throw("Error while parsing: Invalid tag '" + nodeName +
 					"' in tabs tag");
 			}
+			i++;
 		}, this);
 	},
 
@@ -124,24 +162,31 @@ var et2_tabbox = et2_DOMWidget.extend({
 		for (var i = 0; i < this.tabData.length; i++)
 		{
 			var entry = this.tabData[i];
-
 			entry.flagDiv = $j(document.createElement("span"))
 				.addClass("et2_tabflag")
 				.text(entry.label)
-				.appendTo(this.flagContainer)
+				.appendTo(this.flagContainer);
-				.click({"tabs": this, "idx": i}, function(e) {
+			if(entry.hidden)
+			{
+				entry.flagDiv.hide();
+			}
+			else
+			{
+				entry.flagDiv.click({"tabs": this, "idx": i}, function(e) {
 					e.data.tabs.setActiveTab(e.data.idx);
 				});
-
+			}
 			entry.contentDiv = $j(document.createElement("div"))
 				.addClass("et2_tabcntr")
 				.appendTo(this.tabContainer);
 		}
 
-		this.setActiveTab(0);
+		this.setActiveTab(this.selected_index);
 	},
 
 	setActiveTab: function(_idx) {
+		this.selected_index = _idx;
+
 		// Remove the "active" flag from all tabs-flags
 		$j(".et2_tabflag", this.flagContainer).removeClass("active");
 

etemplate/js/test/et2_test_tabbox.json

@@ -0,0 +1,10 @@
+var tabbox_data = {
+	"content":	{
+		"tab_1": "Test4"
+	},
+	"readonlys":	{
+		"tab_1": {
+			"Disabled": true
+		}
+	}
+}

etemplate/js/test/et2_test_tabbox.xet

@@ -1,16 +1,14 @@
 <?xml version="1.0"?>
 <overlay>
-	<tabbox width="100%">
+	<tabbox width="100%" id="tab_1">
 		<tabs>
 			<tab label="Test1" />
 			<tab label="Test2" />
+			<tab label="Disabled" />
 			<tab label="Test3" />
 			<tab label="Test4" />
 		</tabs>
 		<tabpanels>
-			<label value="This is the content of tab 2"/>
-			<label value="This is the content of tab 3"/>
-			<label value="This is the content of tab 4"/>
 			<vbox>
 				<label value="This is the content of tab 1"/>
 				<label value="This is the content of tab 1"/>
@@ -20,6 +18,10 @@
 				<label value="This is the content of tab 1"/>
 				<label value="This is the content of tab 1"/>
 			</vbox>
+			<label value="This is the content of tab 2"/>
+			<label value="This tab should be hidden"/>
+			<label value="This is the content of tab 3"/>
+			<label value="This is the content of tab 4 - it should be displayed"/>
 		</tabpanels>
 	</tabbox>
 </overlay>

etemplate/js/test/test_xml.html

@@ -38,6 +38,7 @@
 
 
 		<script src="et2_test_timesheet_edit.json"></script>
+		<script src="et2_test_tabbox.json"></script>
 		<script src="et2_test_expressions.json"></script>
 		<script src="et2_test_dates.json"></script>
 		<link rel="StyleSheet" type="text/css" href="./test.css" />
@@ -60,7 +61,7 @@
 			<a href="#" onclick="open_xet('et2_test_timesheet_edit.xet', timesheet_data);">Timesheet edit dialog</a>
 			<a href="#" onclick="open_xet('et2_test_template.xet');">Template proxy test</a>
 			<a href="#" onclick="open_xet('et2_test_grid.xet');">Grid test</a>
-			<a href="#" onclick="open_xet('et2_test_tabbox.xet');">Tabs test</a>
+			<a href="#" onclick="open_xet('et2_test_tabbox.xet',tabbox_data);">Tabs test</a>
 			<a href="#" onclick="open_xet('et2_test_textbox.xet');">Textbox test</a>
 			<a href="#" onclick="open_xet('et2_test_description.xet');">Description test</a>
 			<a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>