From 9efa81b100822f6d51cfc6a734c06eccca3dcfda Mon Sep 17 00:00:00 2001
From: Ansis Brammanis <ansis.brammanis@gmail.com>
Date: Tue, 26 Feb 2013 20:02:30 -0500
Subject: [PATCH] add row select input

---
 css/app.css            | 20 ++++++++++++++
 index.html             |  1 +
 js/id/ui/preset.js     | 41 +++++++++++++++++++--------
 js/lib/d3.rowselect.js | 63 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 113 insertions(+), 12 deletions(-)
 create mode 100644 js/lib/d3.rowselect.js

diff --git a/css/app.css b/css/app.css
index 1d287901b..85315f609 100644
--- a/css/app.css
+++ b/css/app.css
@@ -642,6 +642,26 @@ div.combobox {
     border-right: 5px solid transparent;
 }
 
+.rowselect .item {
+    cursor: pointer;
+}
+
+.rowselect .item label:hover{
+    background-color: #ececec;
+}
+
+.rowselect .item label {
+    padding: 5px;
+    width: 100%;
+    cursor: pointer;
+    display: block;
+    text-align: center;
+}
+
+.rowselect .item div {
+    text-align: center;
+}
+
 /* Address input */
 
 .preset-input .addr-housename {
diff --git a/index.html b/index.html
index f8c88e85e..f62adccdc 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
         <script src='js/lib/jxon.js'></script>
         <script src='js/lib/d3.typeahead.js'></script>
         <script src='js/lib/d3.combobox.js'></script>
+        <script src='js/lib/d3.rowselect.js'></script>
         <script src='js/lib/d3.geo.tile.js'></script>
         <script src='js/lib/d3.size.js'></script>
         <script src='js/lib/d3.trigger.js'></script>
diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js
index db5a71436..97b6ee9a3 100644
--- a/js/id/ui/preset.js
+++ b/js/id/ui/preset.js
@@ -1,5 +1,5 @@
 iD.ui.preset = function() {
-    var event = d3.dispatch('change'),
+    var event = d3.dispatch('change', 'setTags'),
         taginfo = iD.taginfo(),
         context,
         entity,
@@ -13,9 +13,11 @@ iD.ui.preset = function() {
         var tags = _.clone(preset.match.tags);
         sections.selectAll('input,select')
             .each(function(d) {
-                tags[d.key] = d.type === 'combo' || d.type === 'select' ?
-                    this.value.replace(' ', '_') :
-                    this.value;
+                if (d && d.key) {
+                    tags[d.key] = d.type === 'combo' || d.type === 'select' ?
+                        this.value.replace(' ', '_') :
+                        this.value;
+                }
             });
         return tags;
     }
@@ -24,11 +26,15 @@ iD.ui.preset = function() {
         if (!sections) return;
         sections.selectAll('input,select')
             .each(function(d) {
-                this.value = tags[d.key] || '';
-                if (d.type === 'combo' || d.type === 'select') {
-                    this.value = this.value.replace('_', ' ');
+                if (d && d.key) {
+                    this.value = tags[d.key] || '';
+                    if (d.type === 'combo' || d.type === 'select') {
+                        this.value = this.value.replace('_', ' ');
+                    }
                 }
             });
+
+        event.setTags();
     }
 
     function clean(o) {
@@ -79,11 +85,22 @@ iD.ui.preset = function() {
             case 'select':
                 wrap = this.append('span').attr('class', 'input-wrap-position'),
                 i = wrap.append('input').attr('type', 'text');
-                wrap.call(d3.combobox().data(d.options.map(function(d) {
-                    var o = {};
-                    o.title = o.value = d.replace('_', ' ');
-                    return o;
-                })));
+
+                if (d.options.length <= 5) {
+                    var select = d3.rowselect()
+                        .data(d.options)
+                        .on('change', key);
+                    i.datum(d);
+                    wrap.call(select);
+                    event.on('setTags.' + d.key, select.update);
+
+                } else {
+                    wrap.call(d3.combobox().data(d.options.map(function(d) {
+                        var o = {};
+                        o.title = o.value = d.replace('_', ' ');
+                        return o;
+                    })));
+                }
                 break;
             case 'combo':
                 var combobox = d3.combobox();
diff --git a/js/lib/d3.rowselect.js b/js/lib/d3.rowselect.js
new file mode 100644
index 000000000..478e104fa
--- /dev/null
+++ b/js/lib/d3.rowselect.js
@@ -0,0 +1,63 @@
+d3.rowselect = function() {
+
+    var input, data, wrap,
+        event = d3.dispatch('change');
+
+    var select = function(selection) {
+
+        input = selection.select('input')
+            .style('display', 'none');
+        
+        wrap = selection.append('div')
+            .attr('class', 'rowselect');
+
+        var labels = wrap.selectAll('div')
+            .data(data)
+            .enter()
+                .append('div')
+                .style('display', 'inline-block')
+                .style('width', ~~(100 / data.length) + '%')
+                .attr('class', 'item')
+                .append('label')
+                    .on('click', function() {
+                        var checkbox = d3.select(this).select('input'),
+                            val = !!checkbox.property('checked');
+                        wrap.selectAll('input').property('checked', false);
+                        checkbox.property('checked', val);
+                        input.property('value', val ? checkbox.datum()  : '');
+
+                        event.change();
+                        d3.event.stopPropagation();
+                    });
+
+        var value = input.property('value');
+
+        labels.append('div')
+            .append('input')
+                .attr('type', 'checkbox');
+
+        labels.append('span').text(function(d) { return d; });
+
+        input.on('change.select', update);
+
+    };
+
+    function update() {
+        var value = input.property('value');
+
+        wrap.selectAll('input')
+            .property('checked', function(d) {
+                return d === value;
+            });
+    }
+
+    select.data = function(_) {
+        if (!arguments.length) return data;
+        data = _;
+        return select;
+    };
+
+    select.update = update;
+
+    return d3.rebind(select, event, 'on');
+};