From a3ec26dace6b33a69dbe14e3f676814d502f9cc4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Tue, 29 Oct 2013 21:34:12 +0100
Subject: [PATCH] Improve handling of change events in Palette.

---
 examples/Interface/Palette.html |  3 ++-
 src/ui/Component.js             | 26 ++++++++++++++++----------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/examples/Interface/Palette.html b/examples/Interface/Palette.html
index 915dc8a9..1a127c9a 100644
--- a/examples/Interface/Palette.html
+++ b/examples/Interface/Palette.html
@@ -44,6 +44,7 @@
 				label: 'A Button',
 				value: 'Click Me!',
 				onClick: function() {
+					console.log('Resetting');
 					palette.reset();
 					values.text = 'You clicked!';
 				}
@@ -58,7 +59,7 @@
 		};
 		var palette = new Palette('Values', components, values);
 		palette.onChange = function(component, name, value) {
-			console.log(component, name + ' = ' + value);
+			console.log(name + ' = ' + value, component);
 		}
 		values.number = 10;
 		values.string = 'Woop woop';
diff --git a/src/ui/Component.js b/src/ui/Component.js
index 9504df37..a418d67b 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -69,23 +69,25 @@ var Component = Base.extend(Callback, /** @lends Component# */{
 					: typeof obj.value;
 		this._info = this._types[this._type] || { type: this._type };
 		var that = this,
-			fireChange = false;
+			dontFire = true;
 		this._inputItem = DomElement.create(this._info.tag || 'input', {
 			type: this._info.type,
 			events: {
 				change: function() {
 					that.setValue(
-						DomElement.get(this, that._info.value || 'value'));
-					if (fireChange) {
-						that._palette.fire('change', that, that.name, that._value);
-						that.fire('change', that._value);
-					}
+						DomElement.get(this, that._info.value || 'value'),
+						dontFire);
 				},
 				click: function() {
 					that.fire('click');
 				}
 			}
 		});
+		// Attach default 'change' even that delegates to palette
+		this.attach('change', function(value) {
+			if (!dontFire)
+				this._palette.fire('change', this, this.name, value);
+		});
 		this._element = DomElement.create('tr', [
 			this._labelItem = DomElement.create('td'),
 			'td', [this._inputItem]
@@ -94,8 +96,8 @@ var Component = Base.extend(Callback, /** @lends Component# */{
 			this[key] = value;
 		}, this);
 		this._defaultValue = this._value;
-		// Only fire change events after we have initalized
-		fireChange = true;
+		// Start firing change events after we have initalized.
+		dontFire = false;
 	},
 
 	getType: function() {
@@ -125,12 +127,16 @@ var Component = Base.extend(Callback, /** @lends Component# */{
 		return this._value;
 	},
 
-	setValue: function(value) {
+	setValue: function(value, _dontFire) {
 		var key = this._info.value || 'value';
 		DomElement.set(this._inputItem, key, value);
 		// Read back and convert from input again, to make sure we're in sync
 		value = DomElement.get(this._inputItem, key);
-		this._value = this._info.number ? parseFloat(value, 10) : value;
+		if (this._info.number)
+			value = parseFloat(value, 10);
+		this._value = value;
+		if (!_dontFire)
+			this.fire('change', value);
 	},
 
 	getRange: function() {