Fix issues causing mode/undo/save buttons to be missing disabled style

modules/renderer/map.js

@@ -330,9 +330,16 @@ export function rendererMap(context) {
         surface.selectAll('.layer-osm *').remove();
         surface.selectAll('.layer-touch:not(.markers) *').remove();
 
+        var allowed = {
+            'browse': true,
+            'save': true,
+            'select-note': true,
+            'select-data': true,
+            'select-error': true
+        };
+
         var mode = context.mode();
-        if (mode && mode.id !== 'save' && mode.id !== 'select-note' &&
-            mode.id !== 'select-data' && mode.id !== 'select-error') {
+        if (mode && !allowed[mode.id]) {
             context.enter(modeBrowse(context));
         }
 

modules/ui/modes.js

@@ -22,7 +22,16 @@ export function uiModes(context) {
         modeAddNote(context)
     ];
 
-    function editable() {
+
+    function enabled(d) {
+        if (d.id === 'add-note') {
+            return notesEnabled() && notesEditable();
+        } else {
+            return osmEditable();
+        }
+    }
+
+    function osmEditable() {
         var mode = context.mode();
         return context.editable() && mode && mode.id !== 'save';
     }
@@ -37,6 +46,7 @@ export function uiModes(context) {
         return context.map().notesEditable() && mode && mode.id !== 'save';
     }
 
+
     return function(selection) {
         context
             .on('enter.editor', function(entered) {
@@ -54,8 +64,7 @@ export function uiModes(context) {
 
         modes.forEach(function(mode) {
             context.keybinding().on(mode.key, function() {
-                if (mode.id === 'add-note' && !(notesEnabled() && notesEditable())) return;
-                if (mode.id !== 'add-note' && !editable()) return;
+                if (!enabled(mode)) return;
 
                 if (mode.id === context.mode().id) {
                     context.enter(modeBrowse(context));
@@ -94,23 +103,23 @@ export function uiModes(context) {
                 .append('button')
                 .attr('tabindex', -1)
                 .attr('class', function(d) { return d.id + ' add-button'; })
-                .on('click.mode-buttons', function(mode) {
+                .on('click.mode-buttons', function(d) {
+                    if (!enabled(d)) return;
+
                     // When drawing, ignore accidental clicks on mode buttons - #4042
                     var currMode = context.mode().id;
-                    if (currMode.match(/^draw/) !== null) return;
+                    if (/^draw/.test(currMode)) return;
 
-                    if (mode.id === currMode) {
+                    if (d.id === currMode) {
                         context.enter(modeBrowse(context));
                     } else {
-                        context.enter(mode);
+                        context.enter(d);
                     }
                 })
                 .call(tooltip()
                     .placement('bottom')
                     .html(true)
-                    .title(function(mode) {
-                        return uiTooltipHtml(mode.description, mode.key);
-                    })
+                    .title(function(d) { return uiTooltipHtml(d.description, d.key); })
                 );
 
             buttonsEnter
@@ -132,9 +141,7 @@ export function uiModes(context) {
             // update
             buttons = buttons
                 .merge(buttonsEnter)
-                .property('disabled', function(d) {
-                    return d.id === 'add-note' ? !notesEditable() : !editable();
-                });
+                .classed('disabled', function(d) { return !enabled(d); });
         }
     };
 }

modules/ui/save.js

@@ -12,57 +12,61 @@ import { tooltip } from '../util/tooltip';
 export function uiSave(context) {
     var history = context.history();
     var key = uiCmd('⌘S');
-
-
-    function saving() {
-        var mode = context.mode();
-        return mode && mode.id === 'save';
-    }
-
-
-    function save() {
-        d3_event.preventDefault();
-        if (!context.inIntro() && !saving() && history.hasChanges()) {
-            context.enter(modeSave(context));
-        }
-    }
-
-
-    function getBackground(numChanges) {
-        var step;
-        if (numChanges === 0) {
-            return null;
-        } else if (numChanges <= 50) {
-            step = numChanges / 50;
-            return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
-        } else {
-            step = Math.min((numChanges - 50) / 50, 1.0);
-            return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
-        }
-    }
+    var _numChanges = 0;
 
 
     return function(selection) {
-        var numChanges = 0;
+
+
+        function isSaving() {
+            var mode = context.mode();
+            return mode && mode.id === 'save';
+        }
+
+
+        function isDisabled() {
+            return _numChanges === 0 || isSaving();
+        }
+
+
+        function save() {
+            d3_event.preventDefault();
+            if (!context.inIntro() && !isSaving() && history.hasChanges()) {
+                context.enter(modeSave(context));
+            }
+        }
+
+
+        function bgColor() {
+            var step;
+            if (_numChanges === 0) {
+                return null;
+            } else if (_numChanges <= 50) {
+                step = _numChanges / 50;
+                return d3_interpolateRgb('#fff', '#ff8')(step);  // white -> yellow
+            } else {
+                step = Math.min((_numChanges - 50) / 50, 1.0);
+                return d3_interpolateRgb('#ff8', '#f88')(step);  // yellow -> red
+            }
+        }
+
 
         function updateCount() {
-            var _ = history.difference().summary().length;
-            if (_ === numChanges) return;
-            numChanges = _;
+            var val = history.difference().summary().length;
+            if (val === _numChanges) return;
+            _numChanges = val;
 
             tooltipBehavior
                 .title(uiTooltipHtml(
-                    t(numChanges > 0 ? 'save.help' : 'save.no_changes'), key)
+                    t(_numChanges > 0 ? 'save.help' : 'save.no_changes'), key)
                 );
 
-            var background = getBackground(numChanges);
-
             button
-                .classed('disabled', numChanges === 0)
-                .style('background', background);
+                .classed('disabled', isDisabled())
+                .style('background', bgColor(_numChanges));
 
             button.select('span.count')
-                .text(numChanges);
+                .text(_numChanges);
         }
 
 
@@ -102,8 +106,12 @@ export function uiSave(context) {
 
         context
             .on('enter.save', function() {
-                button.property('disabled', saving());
-                if (saving()) button.call(tooltipBehavior.hide);
+                button
+                    .classed('disabled', isDisabled());
+
+                if (isSaving()) {
+                    button.call(tooltipBehavior.hide);
+                }
             });
     };
 }