diff --git a/css/app.css b/css/app.css index 8ccac2b72..1afa22426 100644 --- a/css/app.css +++ b/css/app.css @@ -664,6 +664,13 @@ a.selected:hover .toggle.icon { background-position: -40px -180px;} margin-left: 25%; padding-left: 10px; } + +button.preset-add-form { + width: 40px; + height: 40px; + margin-right: 10px; +} + .preset-fav button.fav { height: 30px; margin: 5px; diff --git a/js/id/presets/preset.js b/js/id/presets/preset.js index d9c6309ce..79f27b32d 100644 --- a/js/id/presets/preset.js +++ b/js/id/presets/preset.js @@ -3,13 +3,16 @@ iD.presets.Preset = function(preset, forms) { preset.icon = preset.icon || 'marker-stroked'; - preset.form = preset.form ? preset.form.map(function(f) { + preset.form = preset.form ? preset.form.map(getForms) : []; + preset.additional = preset.additional ? preset.additional.map(getForms) : []; + + function getForms(f) { if (typeof f === 'string') { return forms[f]; } else { return iD.presets.Form(f, f.key); } - }) : []; + } preset.matchGeometry = function(entity, resolver) { return preset.match.geometry.indexOf(entity.geometry(resolver)) >= 0; diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index 2a000d703..c9280d1a4 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -3,7 +3,9 @@ iD.ui.preset = function(context) { entity, tags, keys, - preset; + preset, + formwrap, + formbuttonwrap; function input(d) { var i = iD.ui.preset[d.type](d, context) @@ -18,7 +20,7 @@ iD.ui.preset = function(context) { keys = keys.concat(d.key ? [d.key] : d.keys); - this.call(i); + d3.select(this).call(i); } function presets(selection) { @@ -26,27 +28,59 @@ iD.ui.preset = function(context) { selection.html(''); keys = []; + formwrap = selection.append('div'); + draw(formwrap, preset.form); + + var wrap = selection.append('div') + .attr('class', 'col12 inspector-inner'); + + wrap.append('div') + .attr('class', 'col3 preset-label') + .text('Add field'); + + formbuttonwrap = wrap.append('div') + .attr('class', 'col9 preset-input'); + + formbuttonwrap.selectAll('button') + .data(preset.additional) + .enter() + .append('button') + .attr('class', 'preset-add-form') + .attr('title', function(d) { return d.title || d.key; }) + .on('click', addForm) + .append('span') + .attr('class', function(d) { return 'icon ' + d.icon; }); + + function addForm(d) { + draw(formwrap, [d]); + d3.select(this).remove(); + if (!wrap.selectAll('button').node()) wrap.remove(); + } + } + + function formKey(d) { + return d.key || String(d.keys); + } + + function draw(selection, form) { + var sections = selection.selectAll('div.preset-section') - .data(preset.form) + .data(form, formKey) .enter() .append('div') - .attr('class', 'preset-section fillL inspector-inner col12'); - - sections.each(function(d) { - var s = d3.select(this); - var wrap = s.append('div') + .attr('class', 'preset-section fillL inspector-inner col12') + .append('div') .attr('class', 'preset-section-input'); - wrap.append('div') + sections.append('div') .attr('class', 'col3 preset-label') .append('h4') - .attr('for', 'input-' + d.key) + .attr('for', function(d) { return 'input-' + d.key; }) .text(function(d) { return d.label(); }); - input.call(wrap.append('div') - .attr('class', 'col9 preset-input'), d); - }); - if (tags) event.setTags(tags); + sections.append('div') + .attr('class', 'col9 preset-input') + .each(input); } presets.rendered = function() { @@ -59,9 +93,19 @@ iD.ui.preset = function(context) { return presets; }; - presets.change = function(_) { - tags = _; - event.setTags(_); + presets.change = function(t) { + tags = t; + + function haveKey(k) { return k && !!tags[k]; } + + formbuttonwrap.selectAll('button').each(function(p) { + if (haveKey(p.key) || _.any(p.keys, haveKey)) { + draw(formwrap, [p]); + d3.select(this).remove(); + } + }); + + event.setTags(tags); return presets; }; diff --git a/js/id/ui/preset/check.js b/js/id/ui/preset/check.js index 738b14765..ab653ca86 100644 --- a/js/id/ui/preset/check.js +++ b/js/id/ui/preset/check.js @@ -2,7 +2,7 @@ iD.ui.preset.check = function(form) { var event = d3.dispatch('change', 'close'), values = ['', 'yes', 'no'], - value, + value = '', box, text, label; @@ -14,9 +14,11 @@ iD.ui.preset.check = function(form) { label = selection.append('label'); box = label.append('input') + .property('indeterminate', true) .attr('type', 'checkbox'); text = label.append('span') + .text('unknown') .attr('class', 'value'); box.on('click', function() {