Added onclick handler to baseWidget and change handler to inputWidget

etemplate/js/et2_baseWidget.js

@@ -43,6 +43,11 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
 			"type": "string",
 			"default": "left",
 			"description": "Position of this element in the parent hbox"
+		},
+		"onclick": {
+			"name": "onclick",
+			"type": "js",
+			"description": "JS code which is executed when the element is clicked."
 		}
 	},
 
@@ -74,12 +79,26 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
 			this._tooltipElem = null;
 		}
 
+		// Remove the binding to the click handler
+		if (this.node)
+		{
+			$j(this.node).unbind("click.et2_baseWidget");
+		}
+
 		this._super.apply(this, arguments);
 	},
 
 	attachToDOM: function() {
 		this._super.apply(this, arguments);
 
+		// Add the binding for the click handler
+		if (this.node)
+		{
+			$j(this.node).bind("click.et2_baseWidget", this, function(e) {
+				return e.data.click(this);
+			});
+		}
+
 		// Update the statustext
 		this.set_statustext(this.statustext);
 	},
@@ -137,6 +156,15 @@ var et2_baseWidget = et2_DOMWidget.extend(et2_IAligned, {
 		}
 	},
 
+	click: function(_node) {
+		if (this.onclick)
+		{
+			return this.onclick.call(_node);
+		}
+
+		return true;
+	},
+
 	set_align: function(_value) {
 		this.align = _value;
 	},

etemplate/js/et2_button.js

@@ -47,16 +47,15 @@ var et2_button = et2_baseWidget.extend(et2_IInput, {
 		if (!_readonly)
 		{
 			this.btn = $j(document.createElement("button"))
-				.addClass("et2_button")
-				.click(this, function(e) {e.data.buttonClick()});
+				.addClass("et2_button");
 
 			this.setDOMNode(this.btn[0]);
 		}
 	},
 
-	buttonClick: function() {
+	click: function() {
 		// Execute the JS code connected to the event handler
-		if (this.onclick != null)
+		if (this.onclick)
 		{
 			if (!this.onclick())
 				return false;

etemplate/js/et2_inputWidget.js

@@ -57,6 +57,11 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			"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)."
+		},
+		"onchange": {
+			"name": "onchange",
+			"type": "js",
+			"description": "JS code which is executed when the value changes."
 		}
 	},
 
@@ -69,6 +74,12 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 	},
 
 	destroy: function() {
+		var node = this.getInputNode();
+		if (node)
+		{
+			$j(node).unbind("change.et2_inputWidget");
+		}
+
 		this._super.apply(this, arguments);
 
 		this._labelContainer = null;
@@ -100,6 +111,14 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			}
 		}
 
+		var node = this.getInputNode();
+		if (node)
+		{
+			$j(node).bind("change.et2_inputWidget", this, function(e) {
+				e.data.change(this);
+			});
+		}
+
 		this._super.apply(this,arguments);
 		
 		$j(this.getInputNode()).attr("novalidate","novalidate"); // Stop browser from getting involved
@@ -113,6 +132,13 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 		this._super.apply(this,arguments);
 	},
 
+	change: function(_node) {
+		if (this.onchange)
+		{
+			return this.onchange.apply(_node);
+		}
+	},
+
 	set_value: function(_value) {
 		this._oldValue = _value;
 

etemplate/js/test/et2_test_label.xet

@@ -3,6 +3,7 @@
 		<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>
+		<description onclick="alert('You\'ve punched me!');" value="Click me!"/>
 	</vbox>
 </overlay>
 

etemplate/js/test/et2_test_textbox.xet

@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
 <overlay>
-	<textbox id="test1" value="This is a single line textbox."/>
+	<textbox id="test1" value="This is a single line textbox." onchange="console.log('Buh!');"/>
 	<textbox id="test2" multiline="true" value="This is a multi line textbox."/>
 
 	<template id="testbox">