diff --git a/js/id/ui/inspector.js b/js/id/ui/inspector.js index 10b7f4d5f..67074a290 100644 --- a/js/id/ui/inspector.js +++ b/js/id/ui/inspector.js @@ -20,7 +20,7 @@ iD.ui.inspector = function() { .attr('class', 'icon big icon-pre-text big-' + entity.geometry(graph)); var name = h2.append('input') .attr('placeholder', 'name') - .property('value', function(d) { + .property('value', function() { return entity.tags.name || ''; }) .on('keyup', function() { @@ -29,7 +29,8 @@ iD.ui.inspector = function() { inspector.tags(tags); event.change(); }); - event.on('change', function() { + + event.on('change.name', function() { var tags = inspector.tags(); name.property('value', tags.name); }); @@ -40,14 +41,26 @@ iD.ui.inspector = function() { var inspectorwrap = inspectorbody.append('div') .attr('class', 'inspector-inner tag-wrap fillL2'); + var presetUI = iD.ui.preset() + .on('change', function(tags) { + inspector.tags(_.extend(inspector.tags(), tags)); + event.change(); + }); + + event.on('change.preset', function() { + var tags = inspector.tags(); + presetUI.change(tags); + }); + var inspectorpresetsearch = inspectorwrap.append('div') .attr('class', 'inspector-preset cf') .call(iD.ui.presetsearch() .entity(entity) .presetData(presetData) .on('choose', function(preset) { - inspectorpreset.call(iD.ui.preset() - .preset(preset)); + inspectorpreset.call(presetUI + .preset(preset) + .change(inspector.tags())); })); var inspectorpresetfavs = inspectorwrap.append('div') @@ -55,8 +68,9 @@ iD.ui.inspector = function() { .call(iD.ui.presetfavs() .presetData(presetData) .on('choose', function(preset) { - inspectorpreset.call(iD.ui.preset() - .preset(preset)); + inspectorpreset.call(presetUI + .preset(preset) + .change(inspector.tags())); inspectorpresetsearch .select('input') .property('value', preset.name); diff --git a/js/id/ui/preset.js b/js/id/ui/preset.js index df9026739..674d6e2f3 100644 --- a/js/id/ui/preset.js +++ b/js/id/ui/preset.js @@ -1,37 +1,67 @@ iD.ui.preset = function() { - var preset; + var event = d3.dispatch('change'), + sections, + exttags, + preset; + + function getTags() { + var tags = {}; + sections.selectAll('input,select') + .each(function(d) { + tags[d.key] = this.value; + }); + return tags; + } + + function setTags(tags) { + if (!sections) return; + sections.selectAll('input,select') + .each(function(d) { + if (tags[d.key]) { + this.value = tags[d.key]; + } + }); + } + + function clean(o) { + var out = {}; + for (var k in o) { + if (o[k] !== '') out[k] = o[k]; + } + return out; + } + + function key() { + var tags = clean(getTags()); + event.change(tags); + } // generate form fields for a given field. function input(d) { - + var i; switch (d.type) { - case 'text': - this.append('input') + i = this.append('input') .attr('type', 'text') .attr('placeholder', d['default'] || ''); break; - case 'tel': - this.append('input') + i = this.append('input') .attr('type', 'tel') .attr('placeholder', '1-555-555-5555'); break; - case 'email': - this.append('input') + i = this.append('input') .attr('type', 'email') .attr('placeholder', 'email@domain.com'); break; - case 'url': - this.append('input') + i = this.append('input') .attr('type', 'url') .attr('placeholder', 'http://example.com/'); break; - case 'check': - this.append('input') + i = this.append('input') .attr('type', 'checkbox') .each(function() { if (d['default']) { @@ -39,42 +69,40 @@ iD.ui.preset = function() { } }); break; - case 'select': - var select = this.append('select'); + i = this.append('select'); var options = d.values.slice(); options.unshift(''); - select.selectAll('option') + i.selectAll('option') .data(options) .enter() .append('option') .text(String); break; } + if (i) { + i.on('change', key); + } } function presets(selection) { selection.html(''); - - var sections = selection.selectAll('div.preset-section') + sections = selection.selectAll('div.preset-section') .data(preset.main) .enter() .append('div') .attr('class', 'preset-section cf'); - sections.each(function(d) { var s = d3.select(this); - var wrap = s.append('div') .attr('class', 'preset-section-input cf'); - wrap.append('div') .attr('class', 'col4 preset-label') .text(d.text); - input.call(wrap.append('div') .attr('class', 'col8 preset-input'), d); }); + if (exttags) setTags(exttags); } presets.preset = function(_) { @@ -83,5 +111,11 @@ iD.ui.preset = function() { return presets; }; - return presets; + presets.change = function(_) { + exttags = _; + setTags(_); + return presets; + }; + + return d3.rebind(presets, event, 'on'); };