Disable toolbar during save (fixes #1563)

js/id/id.js

@@ -119,6 +119,10 @@ window.iD = function () {
         }
     };
 
+    context.editable = function() {
+        return map.editable() && mode && mode.id !== 'save';
+    };
+
     /* Behaviors */
     context.install = function(behavior) {
         context.surface().call(behavior);

js/id/modes/save.js

@@ -68,9 +68,6 @@ iD.modes.Save = function(context) {
         iD.modes.DragNode(context).behavior];
 
     mode.enter = function() {
-        context.container().selectAll('#bar button.save')
-            .classed('active', true);
-
         behaviors.forEach(function(behavior) {
             context.install(behavior);
         });
@@ -81,9 +78,6 @@ iD.modes.Save = function(context) {
     };
 
     mode.exit = function() {
-        context.container().selectAll('#bar button.save')
-            .classed('active', false);
-
         behaviors.forEach(function(behavior) {
             context.uninstall(behavior);
         });

js/id/ui/modes.js

@@ -25,14 +25,13 @@ iD.ui.Modes = function(context) {
                    return iD.ui.tooltipHtml(mode.description, mode.key);
                }));
 
-        function disableTooHigh() {
-            buttons.attr('disabled', context.map().editable() ? null : 'disabled');
-        }
-
         context.map()
-            .on('move.modes', _.debounce(disableTooHigh, 500));
+            .on('move.modes', _.debounce(update, 500));
 
-        disableTooHigh();
+        context
+            .on('enter.modes', update);
+
+        update();
 
         buttons.append('span')
             .attr('class', function(mode) { return mode.id + ' icon icon-pre-text'; });
@@ -55,10 +54,14 @@ iD.ui.Modes = function(context) {
         var keybinding = d3.keybinding('mode-buttons');
 
         modes.forEach(function(m) {
-            keybinding.on(m.key, function() { if (context.map().editable()) context.enter(m); });
+            keybinding.on(m.key, function() { if (context.editable()) context.enter(m); });
         });
 
         d3.select(document)
             .call(keybinding);
+
+        function update() {
+            buttons.property('disabled', !context.editable());
+        }
     };
 };

js/id/ui/save.js

@@ -2,22 +2,28 @@ iD.ui.Save = function(context) {
     var history = context.history(),
         key = iD.ui.cmd('⌘S');
 
+    function saving() {
+        return context.mode().id === 'save';
+    }
+
     function save() {
         d3.event.preventDefault();
-        if (!history.hasChanges()) return;
-        context.enter(iD.modes.Save(context));
+        if (!saving() && history.hasChanges()) {
+            context.enter(iD.modes.Save(context));
+        }
     }
 
     return function(selection) {
+        var tooltip = bootstrap.tooltip()
+            .placement('bottom')
+            .html(true)
+            .title(iD.ui.tooltipHtml(t('save.no_changes'), key));
+
         var button = selection.append('button')
             .attr('class', 'save col12 disabled')
             .attr('tabindex', -1)
             .on('click', save)
-            .attr('data-original-title',
-                iD.ui.tooltipHtml(t('save.no_changes'), key))
-            .call(bootstrap.tooltip()
-                .placement('bottom')
-                .html(true));
+            .call(tooltip);
 
         button.append('span')
             .attr('class', 'label')
@@ -41,10 +47,8 @@ iD.ui.Save = function(context) {
                 return;
             numChanges = _;
 
-            button
-                .attr('data-original-title',
-                    iD.ui.tooltipHtml(t(numChanges > 0 ?
-                        'save.help' : 'save.no_changes'), key));
+            tooltip.title(iD.ui.tooltipHtml(t(numChanges > 0 ?
+                    'save.help' : 'save.no_changes'), key))
 
             button
                 .classed('disabled', numChanges === 0)
@@ -53,5 +57,10 @@ iD.ui.Save = function(context) {
             button.select('span.count')
                 .text(numChanges);
         });
+
+        context.on('enter.save', function() {
+            button.property('disabled', saving());
+            if (saving()) button.call(tooltip.hide);
+        });
     };
 };

js/id/ui/undo_redo.js

@@ -2,15 +2,19 @@ iD.ui.UndoRedo = function(context) {
     var commands = [{
         id: 'undo',
         cmd: iD.ui.cmd('⌘Z'),
-        action: context.undo,
+        action: function() { if (!saving()) context.undo(); },
         annotation: function() { return context.history().undoAnnotation(); }
     }, {
         id: 'redo',
         cmd: iD.ui.cmd('⌘⇧Z'),
-        action: context.redo,
+        action: function() { if (!saving()) context.redo(); },
         annotation: function() { return context.history().redoAnnotation(); }
     }];
 
+    function saving() {
+        return context.mode().id === 'save';
+    }
+
     return function(selection) {
         var tooltip = bootstrap.tooltip()
             .placement('bottom')
@@ -36,8 +40,15 @@ iD.ui.UndoRedo = function(context) {
         d3.select(document)
             .call(keybinding);
 
-        context.history().on('change.editor', function() {
+        context.history()
+            .on('change.undo_redo', update);
+
+        context
+            .on('enter.undo_redo', update);
+
+        function update() {
             buttons
+                .property('disabled', saving())
                 .classed('disabled', function(d) { return !d.annotation(); })
                 .each(function() {
                     var selection = d3.select(this);
@@ -45,6 +56,6 @@ iD.ui.UndoRedo = function(context) {
                         selection.call(tooltip.show);
                     }
                 });
-        });
+        }
     };
 };