From 7194d4bcf023a3b05a94c58df71607d9976cc5e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Thu, 2 Oct 2014 16:30:27 +0200
Subject: [PATCH] Fix palette labels and improve CSS id / class structure.

---
 src/ui/Component.js | 31 +++++++++++++++++--------------
 src/ui/Pane.js      | 12 +++++++-----
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/ui/Component.js b/src/ui/Component.js
index 09b29908..94711260 100644
--- a/src/ui/Component.js
+++ b/src/ui/Component.js
@@ -97,6 +97,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         this._name = name;
         this._row = row;
         this._parent = parent; // The parent component, if any.
+        this._nested = !!parent;
         var type = this._type = props.type in this._types
                 ? props.type
                 : 'options' in props
@@ -115,19 +116,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
                     components.push(new Component(pane, key, entry,
                             pane._values[key], row, this));
             }
-            pane._maxComponents = Math.max(components.length,
-                    pane._maxComponents || 0);
+            pane._numCells = Math.max(components.length * 2, pane._numCells || 0);
         } else {
             DomElement.addChildren(row, [
                 this._labelCell = create('td', {
                     class: 'palettejs-label',
                     id: 'palettejs-label-' + name
                 }),
-                this._inputCell = create('td', {
-                    class: 'palettejs-input',
-                    id: 'palettejs-input-' + name
+                this._cell = create('td', {
+                    class: 'palettejs-component',
+                    id: 'palettejs-component-' + name
                 }, [
                     this._input = create(meta.tag || 'input', {
+                        class: 'palettejs-input',
+                        id: 'palettejs-input-' + name,
                         type: meta.type,
                         events: {
                             change: function() {
@@ -173,16 +175,20 @@ var Component = Base.extend(Callback, /** @lends Component# */{
         return this._name;
     },
 
+    _setLabel: function(label, nodeName, parent) {
+        this[nodeName] = DomElement.set(this[nodeName]
+                || parent.appendChild(DomElement.create('label',
+                    { 'for': 'palettejs-input-' + this._name })),
+                'text', label);
+    },
+
     getLabel: function() {
         return this._label;
     },
 
     setLabel: function(label) {
         this._label = label;
-        DomElement.set(this._labelNode = this._labelNode
-                || this._labelCell.appendChild(DomElement.create('label',
-                    { 'for': 'palettejs-input-' + this._name })),
-                'text', label);
+        this._setLabel(label, '_labelNode', this._labelCell);
     },
 
     getSuffix: function() {
@@ -191,10 +197,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
 
     setSuffix: function(suffix) {
         this._suffix = suffix;
-        DomElement.set(this._suffixNode = this._suffixNode
-                || this._inputCell.appendChild(DomElement.create('label',
-                    { 'for': 'palettejs-input-' + this._name })),
-                'text', suffix);
+        this._setLabel(label, '_suffixNode', this._cell);
     },
 
     getOptions: function() {
@@ -239,7 +242,7 @@ var Component = Base.extend(Callback, /** @lends Component# */{
     setVisible: function(visible) {
         // NOTE: Only set the visibility of the whole row if this is a row item,
         // in which case this._input is not defined.
-        DomElement.toggleClass(this._inputCell || this._row, 'hidden', !visible);
+        DomElement.toggleClass(this._cell || this._row, 'hidden', !visible);
         DomElement.toggleClass(this._labelCell, 'hidden', !visible);
         this._visible = !!visible;
     },
diff --git a/src/ui/Pane.js b/src/ui/Pane.js
index eb7300af..07b6d14f 100644
--- a/src/ui/Pane.js
+++ b/src/ui/Pane.js
@@ -37,7 +37,7 @@ var Pane = Base.extend(Callback, /** @lends Pane# */{
         // referenced from outside.
         this._components = components;
         this._values = values;
-        this._maxComponents = 1; // 1 component per row is the default.
+        this._numCells = 2; // 2 cells per row is the default (label / item).
         for (var name in components) {
             var row = DomElement.create('tr', { class: 'palettejs-row' }),
                 component = new Component(this, name, components[name],
@@ -45,12 +45,14 @@ var Pane = Base.extend(Callback, /** @lends Pane# */{
             DomElement.set(row, 'id', 'palettejs-row-' + component._name);
             this._table.appendChild(row);
         }
-        if (this._maxComponents > 1) {
+        if (this._numCells > 2) {
+            // Update colspan in all components that are not nested in another
+            // component.
             for (name in components) {
                 var component = components[name];
-                if (component._inputCell && !component._parent) {
-                    DomElement.set(component._inputCell, 'colspan',
-                            this._maxComponents * 2 - 1);
+                if (component._cell && !component._nested) {
+                    DomElement.set(component._cell, 'colspan',
+                            this._numCells - 1); // Remove first label.
                 }
             }
         }