From d90b2f3db62d7f11cf20333b1e449a13cf3ad684 Mon Sep 17 00:00:00 2001
From: Tolleiv Nietsch <info@tolleiv.de>
Date: Fri, 24 Oct 2014 08:45:17 +0200
Subject: [PATCH 1/2] Integrate Optgroups for MultipleSelect-Widgets

---
 lib/widgets.js       | 31 ++++++++++++++++++++++++-------
 test/test-widgets.js | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/lib/widgets.js b/lib/widgets.js
index a22d7b0..6f6a3ee 100644
--- a/lib/widgets.js
+++ b/lib/widgets.js
@@ -233,16 +233,33 @@ exports.multipleSelect = function (options) {
         classes: opt.classes,
         type: 'multipleSelect'
     };
+    var choicesHTML;
+    var groupHTML = function (group, label, value) {
+        return tag('optgroup', {
+            label: label
+        }, choicesHTML(group, value));
+    };
+
+    choicesHTML = function (choices, value) {
+        return Object.keys(choices).reduce(function (html, k) {
+            if (is.object(choices[k])) {
+                return html + groupHTML(choices[k], String(k), value);
+            } else {
+                var selected = value && (Array.isArray(value) ? value.some(function (v) {
+                        return String(v) === String(k);
+                    }) : String(value) === String(k));
+                return html + tag('option', {
+                        value: k,
+                        selected: !!selected
+                    }, choices[k]);
+            }
+        }, '');
+    };
+
     var userAttrs = getUserAttrs(opt);
     w.toHTML = function (name, field) {
         var f = field || {};
-        var optionsHTML = Object.keys(f.choices).reduce(function (html, k) {
-            var selected = f.value && (Array.isArray(f.value) ? f.value.some(function (v) { return String(v) === String(k); }) : String(f.value) === String(k));
-            return html + tag('option', {
-                value: k,
-                selected: !!selected
-            }, f.choices[k]);
-        }, '');
+       var optionsHTML = choicesHTML(f.choices, f.value);
        var attrs = {
            multiple: true,
            name: name,
diff --git a/test/test-widgets.js b/test/test-widgets.js
index b9fc323..bf2b7e0 100644
--- a/test/test-widgets.js
+++ b/test/test-widgets.js
@@ -405,7 +405,37 @@ test('multipleSelect', function (t) {
 
         st.end();
     });
-
+    t.test('provides option groups', function (st) {
+        var widget = forms.widgets.multipleSelect({ classes: ['one', 'two'] });
+        var html = widget.toHTML('name', {
+            choices: {
+                'Long groupname': {
+                    1: 'one',
+                    2: 'two'
+                },
+                regular: 'value',
+                Hamster: {
+                    3: 'dance',
+                    4: 'dance!!!'
+                }
+            },
+            id: 'someid',
+            value: ['2', 'regular']
+        });
+        var expectedHTML = '<select multiple="multiple" name="name" id="someid" class="one two">' +
+            '<optgroup label="Long groupname">' +
+            '<option value="1">one</option>' +
+            '<option value="2" selected="selected">two</option>' +
+            '</optgroup>' +
+            '<option value="regular" selected="selected">value</option>' +
+            '<optgroup label="Hamster">' +
+            '<option value="3">dance</option>' +
+            '<option value="4">dance!!!</option>' +
+            '</optgroup>' +
+            '</select>';
+        st.equal(html, expectedHTML);
+        st.end();
+    });
     t.end();
 });
 

From 1c37751e0eb54e3320771db96bb39e69c95c098d Mon Sep 17 00:00:00 2001
From: Tolleiv Nietsch <info@tolleiv.de>
Date: Fri, 24 Oct 2014 08:46:24 +0200
Subject: [PATCH 2/2] Integrate Optgroups for Select-Widgets

---
 lib/widgets.js       | 26 ++++++++++++++++++++------
 test/test-widgets.js | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/lib/widgets.js b/lib/widgets.js
index 6f6a3ee..07fc961 100644
--- a/lib/widgets.js
+++ b/lib/widgets.js
@@ -105,15 +105,29 @@ exports.select = function (options) {
         classes: opt.classes,
         type: 'select'
     };
+    var choicesHTML;
+    var groupHTML = function (group, label, value) {
+        return tag('optgroup', {
+            label: label
+        }, choicesHTML(group, value));
+    };
+    choicesHTML = function (choices, value) {
+        return Object.keys(choices).reduce(function (html, k) {
+            if (is.object(choices[k])) {
+                return html + groupHTML(choices[k], String(k), value);
+            } else {
+                return html + tag('option', {
+                        value: k,
+                        selected: !!(value && String(value) === String(k))
+                    }, choices[k]);
+            }
+        }, '');
+    };
+
     var userAttrs = getUserAttrs(opt);
     w.toHTML = function (name, field) {
         var f = field || {};
-        var optionsHTML = Object.keys(f.choices).reduce(function (html, k) {
-            return html + tag('option', {
-                value: k,
-                selected: !!(f.value && String(f.value) === String(k))
-            }, f.choices[k]);
-        }, '');
+        var optionsHTML = choicesHTML(f.choices, f.value, '');
         var attrs = {
             name: name,
             id: f.id === false ? false : (f.id || true),
diff --git a/test/test-widgets.js b/test/test-widgets.js
index bf2b7e0..50180ae 100644
--- a/test/test-widgets.js
+++ b/test/test-widgets.js
@@ -124,7 +124,37 @@ test('select', function (t) {
         var expectedHTML = '<select name="name" id="someid" class="one two">' +
             '<option value="1">one</option>' +
             '<option value="2" selected="selected">two</option>' +
-        '</select>';
+            '</select>';
+        st.equal(html, expectedHTML);
+        st.end();
+    });
+    t.test('provides option groups', function (st) {
+        var html = widget.toHTML('name', {
+            choices: {
+                regular: 'value',
+                group1: {
+                    1: 'one',
+                    2: 'two'
+                },
+                'Group Two': {
+                    3: 'three',
+                    4: 'four'
+                }
+            },
+            id: 'someid',
+            value: '3'
+        });
+        var expectedHTML = '<select name="name" id="someid" class="one two">' +
+            '<option value="regular">value</option>' +
+            '<optgroup label="group1">' +
+            '<option value="1">one</option>' +
+            '<option value="2">two</option>' +
+            '</optgroup>' +
+            '<optgroup label="Group Two">' +
+            '<option value="3" selected="selected">three</option>' +
+            '<option value="4">four</option>' +
+            '</optgroup>' +
+            '</select>';
         st.equal(html, expectedHTML);
         st.end();
     });