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 @@
+
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');
+};