Add cancel button to preset grid

js/id/ui/inspector.js

@@ -18,9 +18,6 @@ iD.ui.Inspector = function() {
 
         inspectorbody = selection.append('div')
             .attr('class', 'fillL'),
-        selection.append('div')
-            .attr('class', 'inspector-actions pad1 fillD col12')
-            .call(drawButtons);
 
         presetGrid = iD.ui.PresetGrid()
             .presetData(presetData)
@@ -36,11 +33,14 @@ iD.ui.Inspector = function() {
             .tags(entity.tags)
             .context(context)
             .on('message', changeMessage)
-            .on('change', function() {
+            .on('changeTags', function() {
                 event.changeTags(entity, inspector.tags());
             })
+            .on('close', function() {
+                event.close(entity);
+            })
             .on('choose', function() {
-                inspectorbody.call(presetGrid);
+                inspectorbody.call(presetGrid, true);
             });
 
         function changeMessage(msg) { message.text(msg);}
@@ -55,31 +55,6 @@ iD.ui.Inspector = function() {
         selection.call(iD.ui.Toggle(true));
     }
 
-    function drawButtons(selection) {
-        var entity = selection.datum();
-
-        var inspectorButton = selection.append('button')
-            .attr('class', 'apply action')
-            .on('click', apply);
-
-        inspectorButton.append('span')
-            .attr('class','label')
-            .text(t('inspector.okay'));
-
-        var minorButtons = selection.append('div')
-            .attr('class','minor-buttons fl');
-
-        minorButtons.append('a')
-            .attr('href', 'http://www.openstreetmap.org/browse/' + entity.type + '/' + entity.osmId())
-            .attr('target', '_blank')
-            .text(t('inspector.view_on_osm'));
-    }
-
-    function apply(entity) {
-        event.changeTags(entity, inspector.tags());
-        event.close(entity);
-    }
-
     inspector.tags = function(tags) {
         if (!arguments.length) {
             return tagEditor.tags();

js/id/ui/presetgrid.js

@@ -4,7 +4,7 @@ iD.ui.PresetGrid = function() {
         context,
         presetData;
 
-    function presetgrid(selection) {
+    function presetgrid(selection, preset) {
 
         selection.html('');
 
@@ -36,6 +36,11 @@ iD.ui.PresetGrid = function() {
             });
         search.node().focus();
 
+        if (preset) {
+            selection.append('div')
+                .attr('class', 'inspector-actions pad1 fillD col12')
+                .call(drawButtons);
+        }
 
         function filter(value) {
             if (!value) return presetData.defaults(entity);
@@ -142,6 +147,21 @@ iD.ui.PresetGrid = function() {
         entries.order();
     }
 
+    function cancel() {
+        event.choose();
+    }
+
+    function drawButtons(selection) {
+
+        var inspectorButton = selection.append('button')
+            .attr('class', 'apply action')
+            .on('click', cancel);
+
+        inspectorButton.append('span')
+            .attr('class','label')
+            .text(t('commit.cancel'));
+    }
+
     presetgrid.presetData = function(_) {
         if (!arguments.length) return presetData;
         presetData = _;

js/id/ui/tageditor.js

@@ -1,5 +1,5 @@
 iD.ui.TagEditor = function() {
-    var event = d3.dispatch('changeTags', 'choose', 'close', 'change', 'message'),
+    var event = d3.dispatch('changeTags', 'choose', 'close', 'message'),
         presetData = iD.presetData(),
         entity,
         tags,
@@ -83,20 +83,20 @@ iD.ui.TagEditor = function() {
             .attr('type', 'text')
             .property('value', entity.tags.name)
             .on('blur', function() {
-                event.change();
+                event.changeTags();
             });
 
         presetUI = iD.ui.preset()
             .context(context)
             .entity(entity)
             .on('change', function(tags) {
-                event.change(tags);
+                event.changeTags();
             });
 
         tagList = iD.ui.Taglist()
             .context(context)
             .on('change', function(tags) {
-                event.change(tags);
+                event.changeTags();
             });
 
         var tageditorpreset = editorwrap.append('div')
@@ -112,8 +112,37 @@ iD.ui.TagEditor = function() {
         editorwrap.append('div')
             .attr('class','inspector-inner col12 fillL2').call(tagList, presetMatch.name === 'other');
 
+        selection.append('div')
+            .attr('class', 'inspector-actions pad1 fillD col12')
+            .call(drawButtons);
+
         tageditor.tags(tags);
-        event.change(tags);
+
+        event.changeTags();
+    }
+
+    function apply(entity) {
+        event.changeTags();
+        event.close();
+    }
+
+    function drawButtons(selection) {
+
+        var inspectorButton = selection.append('button')
+            .attr('class', 'apply action')
+            .on('click', apply);
+
+        inspectorButton.append('span')
+            .attr('class','label')
+            .text(t('inspector.okay'));
+
+        var minorButtons = selection.append('div')
+            .attr('class','minor-buttons fl');
+
+        minorButtons.append('a')
+            .attr('href', 'http://www.openstreetmap.org/browse/' + entity.type + '/' + entity.osmId())
+            .attr('target', '_blank')
+            .text(t('inspector.view_on_osm'));
     }
 
     tageditor.tags = function(newtags) {