Labeles are now generated as 'label' tags, basic implementation of the 'for' attribute, sel_options can now contain entries with 'title' and 'label'

etemplate/js/et2_description.js

@@ -82,9 +82,15 @@ var et2_description = et2_baseWidget.extend({
 		this.value = "";
 		this.font_style = "";
 
-		this.span = $j(document.createElement("span"))
+		this.span = $j(document.createElement(this.options.label_for ? "label" : "span"))
 			.addClass("et2_label");
 
+		if (this.options.label_for)
+		{
+			// TODO: Get the real id of the widget in the doLoadingFinished method.
+			this.span.attr("for", this.options.label_for);
+		}
+
 		this.setDOMNode(this.span[0]);
 	},
 

etemplate/js/et2_inputWidget.js

@@ -160,7 +160,8 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			// Create the label container if it didn't exist yet
 			if (this._labelContainer == null)
 			{
-				this._labelContainer = document.createElement("span");
+				this._labelContainer = document.createElement("label");
+				this._labelContainer.setAttribute("class", "et2_label");
 			}
 
 			// Clear the label container.

etemplate/js/et2_selectbox.js

@@ -23,8 +23,8 @@
 var et2_selectbox = et2_inputWidget.extend({
 
 	attributes: {
-		"multiselect": {
-			"name": "multiselect",
+		"multiple": {
+			"name": "multiple",
 			"type": "boolean",
 			"default": false,
 			"description": "Allow selecting multiple options"
@@ -107,8 +107,8 @@ var et2_selectbox = et2_inputWidget.extend({
 				this.empty_label);
 		}
 
-		// Set multiselect
-		if(this.options.multiselect)
+		// Set multiple
+		if(this.options.multiple)
 		{
 			this.input.attr("multiple", "multiple");
 		}
@@ -119,10 +119,30 @@ var et2_selectbox = et2_inputWidget.extend({
 	 * added after the "option"-widgets were added to selectbox.
 	 */
 	set_select_options: function(_options) {
+
+		var root = this;
+
 		// Add the select_options
 		for (var key in _options)
 		{
-			this._appendOptionElement(key, _options[key]);
+			var attrs = {
+				"value": key
+			};
+
+			if (_options[key] instanceof Object)
+			{
+				attrs["label"] = _options[key]["label"] ? _options[key]["label"] : "";
+				attrs["statustext"] = _options[key]["title"] ? _options[key]["title"] : "";
+			}
+			else
+			{
+				attrs["label"] = _options[key]
+			}
+
+			// Add all other important options to the attributes
+			et2_option.prototype.generateAttributeSet(attrs);
+
+			new et2_option(root, attrs);
 		}
 	}
 
@@ -142,6 +162,11 @@ var et2_option = et2_baseWidget.extend({
 			"type": "string",
 			"description": "Value which is sent back to the server when this entry is selected."
 		},
+		"label": {
+			"name": "Label",
+			"type": "string",
+			"description": "Caption of the option element"
+		},
 		"width": {
 			"ignore": true
 		},
@@ -156,12 +181,17 @@ var et2_option = et2_baseWidget.extend({
 	init: function() {
 		this._super.apply(this, arguments);
 
-		// Allow no other widgets inside of this one.
-		this.supportedWidgetClasses = [];
+		// Only allow other options inside of this element
+		this.supportedWidgetClasses = [et2_option];
 
 		this.option = $j(document.createElement("option"))
 			.attr("value", this.options.value);
 
+		if (this.options.label)
+		{
+			this.option.text(this.options.label);
+		}
+
 		this.setDOMNode(this.option[0]);
 	},
 
@@ -173,7 +203,13 @@ var et2_option = et2_baseWidget.extend({
 
 	loadContent: function(_data) {
 		this.option.text(_data);
-	}
+	},
+
+/*	Doesn't work either with selectboxes
+	set_statustext: function(_value) {
+		this.statustext = _value;
+		this.option.attr("title", _value);
+	}*/
 
 });
 

etemplate/js/test/et2_test_label.xet

@@ -2,6 +2,7 @@
 	<vbox>
 		<textbox label="Blub" />
 		<textbox label="This %s is a textbox" />
+		<hbox><description label_for="testbox" value="This is a description tag for the textbox next to it."/><textbox id="testbox"/></hbox>
 	</vbox>
 </overlay>
 

etemplate/js/test/et2_test_timesheet_edit.json

@@ -56,7 +56,11 @@ var timesheet_data = {
             "customfields":"Custom fields"
         },
         "ts_owner":{
-            "5":"User, admin"
+            "5":"User, admin",
+			"6": {
+				"label": "User, andreas",
+				"title": "This is the local user of Andreas Stöckel"
+			}
         },
         "ts_status":[]
     },

etemplate/js/test/test_xml.html

@@ -38,6 +38,17 @@
 		<script src="et2_test_timesheet_edit.json"></script>
 		<script src="et2_test_expressions.json"></script>
 		<link rel="StyleSheet" type="text/css" href="./test.css" />
+
+		<style>
+			#linklist {
+				-moz-column-count: 4;
+				-moz-column-gap: 20px;
+				-webkit-column-count: 4;
+				-webkit-column-gap: 20px;
+				column-count: 4;
+				column-gap: 20px;
+			}
+		</style>
 	</head>
 	<body>
 		<h1>EGroupware ETemplate2 Test</h1>