From e76cf6eab24e375b4fde4d0ffab95f332e438347 Mon Sep 17 00:00:00 2001
From: Nathan Gray <nathangray.bsc@gmail.com>
Date: Wed, 17 Aug 2011 22:56:49 +0000
Subject: [PATCH] - Add labels to input widgets - Add row & col properties to
 textarea

---
 etemplate/js/et2_checkbox.js                 |  2 +-
 etemplate/js/et2_inputWidget.js              | 16 +++++++
 etemplate/js/et2_textbox.js                  | 44 +++++++++++++++++++-
 etemplate/js/test/et2_test_basic_widgets.xet |  9 ++--
 etemplate/js/test/test_xml.html              |  1 +
 5 files changed, 65 insertions(+), 7 deletions(-)

diff --git a/etemplate/js/et2_checkbox.js b/etemplate/js/et2_checkbox.js
index 477f61a57b..7e2dae93b9 100644
--- a/etemplate/js/et2_checkbox.js
+++ b/etemplate/js/et2_checkbox.js
@@ -61,7 +61,7 @@ var et2_checkbox = et2_inputWidget.extend({
 	set_value: function(_value) {
 		if(_value != this.value) {
 			if(_value == this.set_value) {
-				this.input.attr("checked", true);
+				this.input.attr("checked", "checked");
 			} else {
 				this.input.removeAttr("checked");
 			}
diff --git a/etemplate/js/et2_inputWidget.js b/etemplate/js/et2_inputWidget.js
index 49be7f5866..b6c75b624f 100644
--- a/etemplate/js/et2_inputWidget.js
+++ b/etemplate/js/et2_inputWidget.js
@@ -51,6 +51,12 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			"default": false,
 			"type": "boolean",
 			"description": "If required, the user must enter a value before the form can be submitted"
+		},
+		"label": {
+			"name": "Label",
+			"default": "",
+			"type": "string",
+			"description": "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables)."
 		}
 	},
 	init: function() {
@@ -102,6 +108,16 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			}
 		}
 	},
+
+	set_label: function(_label) {
+		if(_label != this.label)
+		{
+			label = et2_csvSplit(_label, 2, '%s');
+			if(label[0]) this.input.before("<span class='et2_label'>"+label[0]+"</span>");
+			if(label[1]) this.input.after("<span class='et2_label'>"+label[1]+"</span>");
+		}
+	},
+
 	set_required: function(_value) {
 		var node = this.getInputNode();
 		if (node)
diff --git a/etemplate/js/et2_textbox.js b/etemplate/js/et2_textbox.js
index d0f303721e..b6074fa4bb 100644
--- a/etemplate/js/et2_textbox.js
+++ b/etemplate/js/et2_textbox.js
@@ -35,7 +35,21 @@ var et2_textbox = et2_inputWidget.extend({
 			"type": "integer",
 			"default": et2_no_init,
 			"description": "Field width"
-		}
+		},
+
+		// These for multi-line
+		"rows": {
+			"name": "Rows",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Multiline field height - better to use CSS"
+		},
+		"cols": {
+			"name": "Size",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Multiline field width - better to use CSS"
+		},
 	},
 
 	init: function(_parent) {
@@ -61,7 +75,6 @@ var et2_textbox = et2_inputWidget.extend({
 		if(this.size) {
 			this.set_size(this.size);
 		}
-
 		this.input.addClass("et2_textbox");
 
 		this.setDOMNode(this.input[0]);
@@ -79,6 +92,33 @@ var et2_textbox = et2_inputWidget.extend({
 		}
 	},
 
+	set_rows: function(_value) {
+		if (_value != this.rows)
+		{
+			this.rows = _value;
+			if(this.rows > 1)
+			{
+				this.set_multiline(true);
+				this.input.attr("rows", this.rows);
+			} else {
+				this.set_multiline(false);
+			}
+		}
+	},
+	set_cols: function(_value) {
+		if (_value != this.cols)
+		{
+			this.cols = _value;
+			if(this.cols > 1)
+			{
+				this.set_multiline(true);
+				this.input.attr("cols", this.cols);
+			} else {
+				this.set_multiline(false);
+			}
+		}
+	},
+
 	/**
 	 * Set input widget size
 	 * @param _size Rather arbitrary size units, approximately characters
diff --git a/etemplate/js/test/et2_test_basic_widgets.xet b/etemplate/js/test/et2_test_basic_widgets.xet
index 499b02e8f6..d92fe71bbc 100644
--- a/etemplate/js/test/et2_test_basic_widgets.xet
+++ b/etemplate/js/test/et2_test_basic_widgets.xet
@@ -6,8 +6,8 @@
 	<textbox label="This is required text" id="text_value" required="true"/>
 	<int label="This is an integer" id="integer_value" min="5"/>
 	<textbox type="float" label="This is a float" id="float_value"/>
-	<textbox multiline="true" label="This is a text area" id="text_area_value"/>
-	<checkbox label="Checkbox" id="checkbox_value"/>
+	<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
+	<checkbox label="Checkbox %s here" id="checkbox_value"/>
 	<radio label="Radio" id="radio_value"/>
 	<buttononly label="Button" id="button_value"/>
 	<hrule label="HR"/>
@@ -22,10 +22,11 @@
 	<template id="test.basic_widget_test">
 		<description value="This is a label" id="label_value"/>
 		<textbox label="This is a text" id="text_value"/>
+		<textbox label="This is required text" id="text_value" required="true"/>
 		<int label="This is an integer" id="integer_value" min="5"/>
 		<textbox type="float" label="This is a float" id="float_value"/>
-		<textbox multiline="true" label="This is a text area" id="text_area_value"/>
-		<checkbox label="Checkbox" id="checkbox_value"/>
+		<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
+		<checkbox label="Checkbox %s here" id="checkbox_value"/>
 		<radio label="Radio" id="radio_value"/>
 		<buttononly label="Button" id="button_value"/>
 		<hrule label="HR"/>
diff --git a/etemplate/js/test/test_xml.html b/etemplate/js/test/test_xml.html
index 4b06532ce8..c3942367b0 100644
--- a/etemplate/js/test/test_xml.html
+++ b/etemplate/js/test/test_xml.html
@@ -21,6 +21,7 @@
 		<script src="../et2_textbox.js"></script>
 		<script src="../et2_number.js"></script>
 		<script src="../et2_selectbox.js"></script>
+		<script src="../et2_checkbox.js"></script>
 		<script src="../et2_styles.js"></script>
 		<script src="../et2_html.js"></script>