Reversible tag editing, save real changes

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);

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