From 8344ea963976462b1457aaa13ee3c930576132ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Sun, 5 Oct 2014 11:14:02 +0200
Subject: [PATCH] Switch from <input type="button"> to <button> for button
 components, and allow #text as an alias to #value for better semantics.

---
 src/ui/Component.js | 65 ++++++++++++++++++++++++++-------------------
 src/ui/Palette.js   |  4 +++
 2 files changed, 42 insertions(+), 27 deletions(-)

diff --git a/src/ui/Component.js b/src/ui/Component.js
index 75fbf3ad..11990917 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -37,7 +37,11 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         },
 
         button: {
-            type: 'button'
+            tag: 'button',
+            type: 'button',
+            setValue: function(value) {
+                DomElement.set(this._input, 'text', value);
+            }
         },
 
         text: {
@@ -272,6 +276,39 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         return this._parent;
     },
 
+    getValue: function() {
+        var value = this._value,
+            getValue = this._meta.getValue;
+        return getValue ? getValue.call(this, value) : value;
+    },
+
+    setValue: function(value) {
+        if (this._components)
+            return;
+        var meta = this._meta,
+            key = meta.value || 'value',
+            setValue = meta.setValue;
+        if (setValue)
+            value = setValue.call(this, value);
+        if (value !== undefined) {
+            DomElement.set(this._input, key, value);
+            // Read back and convert from input again to make sure we're in sync
+            value = DomElement.get(this._input, key);
+        }
+        if (meta.number)
+            value = parseFloat(value, 10);
+        if (this._value !== value) {
+            this._value = value;
+            if (!this._dontFire)
+                this.fire('change', this.getValue());
+        }
+    },
+
+    // Setup #text as an alias to #value, for better semantics when creating
+    // buttons.
+    getText: '#getValue',
+    setText: '#setValue',
+
     _setLabel: function(label, nodeName, parent) {
         if (parent) {
             this[nodeName] = DomElement.set(
@@ -310,32 +347,6 @@ var Component = Base.extend(Callback, /** @lends Component# */{
             setOptions.call(this);
     },
 
-    getValue: function() {
-        var value = this._value,
-            getValue = this._meta.getValue;
-        return getValue ? getValue.call(this, value) : value;
-    },
-
-    setValue: function(value) {
-        if (this._components)
-            return;
-        var meta = this._meta,
-            key = meta.value || 'value',
-            setValue = meta.setValue;
-        if (setValue)
-            value = setValue.call(this, value);
-        DomElement.set(this._input, key, value);
-        // Read back and convert from input again, to make sure we're in sync
-        value = DomElement.get(this._input, key);
-        if (meta.number)
-            value = parseFloat(value, 10);
-        if (this._value !== value) {
-            this._value = value;
-            if (!this._dontFire)
-                this.fire('change', this.getValue());
-        }
-    },
-
     getVisible: function() {
         return this._visible;
     },
diff --git a/src/ui/Palette.js b/src/ui/Palette.js
index 4cebb23c..94fc1f99 100644
--- a/src/ui/Palette.js
+++ b/src/ui/Palette.js
@@ -65,6 +65,10 @@
         (this._palettes = paper.palettes).push(this);
     },
 
+    getName: function() {
+        return this._name;
+    },
+
     getComponents: function() {
         return this._components;
     },