Use context.keybinding for keybindings that don't change

(closes #5487)

modules/ui/background.js

@@ -21,7 +21,7 @@ import { uiMapData } from './map_data';
 import { uiMapInMap } from './map_in_map';
 import { uiSettingsCustomBackground } from './settings/custom_background';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilCallWhenIdle, utilKeybinding } from '../util';
+import { utilCallWhenIdle } from '../util';
 import { tooltip } from '../util/tooltip';
 
 
@@ -410,13 +410,9 @@ export function uiBackground(context) {
 
         update();
 
-        var keybinding = utilKeybinding('background')
+        context.keybinding()
             .on(key, togglePane)
-            .on(uiCmd('⌘' + key), quickSwitch)
-            .on([t('map_data.key'), t('help.key')], hidePane);
-
-        d3_select(document)
-            .call(keybinding);
+            .on(uiCmd('⌘' + key), quickSwitch);
 
         uiBackground.hidePane = hidePane;
         uiBackground.togglePane = togglePane;

modules/ui/conflicts.js

@@ -34,7 +34,7 @@ export function uiConflicts(context) {
 
     function keybindingOff() {
         d3_select(document)
-            .call(keybinding.off);
+            .call(keybinding.unbind);
     }
 
     function tryAgain() {

modules/ui/feature_list.js

@@ -18,13 +18,11 @@ import {
     utilDisplayName,
     utilDisplayType,
     utilEntityOrMemberSelector,
-    utilKeybinding,
     utilNoAuto
 } from '../util';
 
 
 export function uiFeatureList(context) {
-    var keybinding = utilKeybinding('uiFeatureList');
     var _geocodeResults;
 
 
@@ -66,12 +64,9 @@ export function uiFeatureList(context) {
         context.map()
             .on('drawn.feature-list', mapDrawn);
 
-        keybinding
+        context.keybinding()
             .on(uiCmd('⌘F'), focusSearch);
 
-        d3_select(document)
-            .call(keybinding);
-
 
         function focusSearch() {
             var mode = context.mode() && context.mode().id;

modules/ui/full_screen.js

@@ -1,17 +1,12 @@
-import {
-    event as d3_event,
-    select as d3_select
-} from 'd3-selection';
+import { event as d3_event } from 'd3-selection';
 
 import { uiCmd } from './cmd';
-import { utilKeybinding } from '../util';
 import { utilDetect } from '../util/detect';
 
 
 export function uiFullScreen(context) {
-    var element = context.container().node(),
-        keybinding = utilKeybinding('full-screen');
-        // button;
+    var element = context.container().node();
+    // var button = d3_select(null);
 
 
     function getFullScreenFn() {
@@ -66,8 +61,7 @@ export function uiFullScreen(context) {
 
 
     return function() { // selection) {
-        if (!isSupported())
-            return;
+        if (!isSupported()) return;
 
         // button = selection.append('button')
         //     .attr('title', t('full_screen'))
@@ -79,10 +73,7 @@ export function uiFullScreen(context) {
         //     .attr('class', 'icon full-screen');
 
         var detected = utilDetect();
-        var keys = detected.os === 'mac' ? [uiCmd('⌃⌘F'), 'f11'] : ['f11'];
-        keybinding.on(keys, fullScreen);
-
-        d3_select(document)
-            .call(keybinding);
+        var keys = (detected.os === 'mac' ? [uiCmd('⌃⌘F'), 'f11'] : ['f11']);
+        context.keybinding().on(keys, fullScreen);
     };
 }

modules/ui/help.js

@@ -11,7 +11,6 @@ import { uiIntro } from './intro';
 import { uiMapData } from './map_data';
 import { uiShortcuts } from './shortcuts';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilKeybinding } from '../util';
 
 import { t, textDirection } from '../util/locale';
 import { tooltip } from '../util/tooltip';
@@ -476,12 +475,8 @@ export function uiHelp(context) {
 
         clickHelp(docs[0], 0);
 
-        var keybinding = utilKeybinding('help')
-            .on(key, togglePane)
-            .on([t('background.key'), t('map_data.key')], hidePane);
-
-        d3_select(document)
-            .call(keybinding);
+        context.keybinding()
+            .on(key, togglePane);
 
         uiHelp.hidePane = hidePane;
         uiHelp.togglePane = togglePane;

modules/ui/info.js

@@ -7,14 +7,13 @@ import { t } from '../util/locale';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiInfoPanels } from './panels';
-import { utilKeybinding } from '../util';
 
 
 export function uiInfo(context) {
-    var ids = Object.keys(uiInfoPanels),
-        wasActive = ['measurement'],
-        panels = {},
-        active = {};
+    var ids = Object.keys(uiInfoPanels);
+    var wasActive = ['measurement'];
+    var panels = {};
+    var active = {};
 
     // create panels
     ids.forEach(function(k) {
@@ -117,18 +116,15 @@ export function uiInfo(context) {
 
         redraw();
 
-        var keybinding = utilKeybinding('info')
+        context.keybinding()
             .on(uiCmd('⌘' + t('info_panels.key')), toggle);
 
         ids.forEach(function(k) {
             var key = t('info_panels.' + k + '.key', { default: null });
             if (!key) return;
-            keybinding
+            context.keybinding()
                 .on(uiCmd('⌘⇧' + key), function() { toggle(k); });
         });
-
-        d3_select(document)
-            .call(keybinding);
     }
 
     return info;

modules/ui/init.js

@@ -10,7 +10,6 @@ import { behaviorHash } from '../behavior';
 import { modeBrowse } from '../modes';
 import { svgDefs, svgIcon } from '../svg';
 import { utilGetDimensions } from '../util/dimensions';
-import { utilKeybinding } from '../util';
 
 import { uiAccount } from './account';
 import { uiAttribution } from './attribution';
@@ -297,7 +296,7 @@ export function uiInit(context) {
 
 
         var panPixels = 80;
-        var keybinding = utilKeybinding('main')
+        context.keybinding()
             .on('⌫', function() { d3_event.preventDefault(); })
             .on(t('sidebar.key'), ui.sidebar.toggle)
             .on('←', pan([panPixels, 0]))
@@ -309,9 +308,6 @@ export function uiInit(context) {
             .on(['⇧→', uiCmd('⌘→')], pan([-map.dimensions()[0], 0]))
             .on(['⇧↓', uiCmd('⌘↓')], pan([0, -map.dimensions()[1]]));
 
-        d3_select(document)
-            .call(keybinding);
-
         context.enter(modeBrowse(context));
 
         if (!_initCounter++) {
@@ -372,6 +368,7 @@ export function uiInit(context) {
 
 
     ui.restart = function(arg) {
+        context.keybinding().clear();
         context.locale(arg);
         context.loadLocale(function(err) {
             if (!err) {

modules/ui/map_data.js

@@ -13,7 +13,6 @@ import { uiDisclosure } from './disclosure';
 import { uiHelp } from './help';
 import { uiSettingsCustomData } from './settings/custom_data';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilKeybinding } from '../util';
 
 
 export function uiMapData(context) {
@@ -645,13 +644,9 @@ export function uiMapData(context) {
         update();
         setFill(_fillSelected);
 
-        var keybinding = utilKeybinding('features')
+        context.keybinding()
             .on(key, togglePane)
-            .on(t('area_fill.wireframe.key'), toggleWireframe)
-            .on([t('background.key'), t('help.key')], hidePane);
-
-        d3_select(document)
-            .call(keybinding);
+            .on(t('area_fill.wireframe.key'), toggleWireframe);
 
         uiMapData.hidePane = hidePane;
         uiMapData.togglePane = togglePane;

modules/ui/map_in_map.js

@@ -21,7 +21,7 @@ import {
 
 import { rendererTileLayer } from '../renderer';
 import { svgDebug, svgData } from '../svg';
-import { utilKeybinding, utilSetTransform } from '../util';
+import { utilSetTransform } from '../util';
 import { utilGetDimensions } from '../util/dimensions';
 
 
@@ -334,11 +334,8 @@ export function uiMapInMap(context) {
 
         redraw();
 
-        var keybinding = utilKeybinding('map-in-map')
+        context.keybinding()
             .on(t('background.minimap.key'), toggle);
-
-        d3_select(document)
-            .call(keybinding);
     }
 
     return map_in_map;

modules/ui/modal.js

@@ -34,7 +34,8 @@ export function uiModal(selection, blocking) {
             .duration(200)
             .style('top','0px');
 
-        keybinding.off();
+        d3_select(document)
+            .call(keybinding.unbind);
     };
 
 

modules/ui/modes.js

@@ -12,7 +12,6 @@ import {
 
 import { svgIcon } from '../svg';
 import { tooltip } from '../util/tooltip';
-import { utilKeybinding } from '../util';
 import { uiTooltipHtml } from './tooltipHtml';
 
 
@@ -56,10 +55,8 @@ export function uiModes(context) {
                     .classed('mode-' + exited.id, false);
             });
 
-        var keybinding = utilKeybinding('mode-buttons');
-
         modes.forEach(function(mode) {
-            keybinding.on(mode.key, function() {
+            context.keybinding().on(mode.key, function() {
                 if (mode.id === 'add-note' && !(notesEnabled() && notesEditable())) return;
                 if (mode.id !== 'add-note' && !editable()) return;
 
@@ -71,9 +68,6 @@ export function uiModes(context) {
             });
         });
 
-        d3_select(document)
-            .call(keybinding);
-
 
         var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
 

modules/ui/panels/background.js

@@ -20,8 +20,8 @@ export function uiPanelBackground(context) {
     var debouncedRedraw = _debounce(redraw, 250);
 
     function redraw(selection) {
-        var source = background.baseLayerSource(),
-            isDG = (source.id.match(/^DigitalGlobe/i) !== null);
+        var source = background.baseLayerSource();
+        var isDG = (source.id.match(/^DigitalGlobe/i) !== null);
 
         if (currSourceName !== source.name()) {
             currSourceName = source.name();

modules/ui/save.js

@@ -1,16 +1,11 @@
 import { interpolateRgb as d3_interpolateRgb } from 'd3-interpolate';
-
-import {
-    event as d3_event,
-    select as d3_select
-} from 'd3-selection';
+import { event as d3_event } from 'd3-selection';
 
 import { t } from '../util/locale';
 import { modeSave } from '../modes';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilKeybinding } from '../util';
 import { tooltip } from '../util/tooltip';
 
 
@@ -100,12 +95,9 @@ export function uiSave(context) {
         updateCount();
 
 
-        var keybinding = utilKeybinding('uiSave')
+        context.keybinding()
             .on(key, save, true);
 
-        d3_select(document)
-            .call(keybinding);
-
         context.history()
             .on('change.save', updateCount);
 

modules/ui/shortcuts.js

@@ -8,18 +8,17 @@ import { dataShortcuts } from '../../data';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiModal } from './modal';
-import { utilKeybinding } from '../util';
 import { utilDetect } from '../util/detect';
 
 
-export function uiShortcuts() {
+export function uiShortcuts(context) {
     var detected = utilDetect();
     var _activeTab = 0;
     var _modalSelection;
     var _selection = d3_select(null);
 
 
-    var keybinding = utilKeybinding('shortcuts')
+    context.keybinding()
         .on(t('shortcuts.toggle.key'), function () {
             if (d3_selectAll('.modal-shortcuts').size()) {  // already showing
                 if (_modalSelection) {
@@ -32,10 +31,6 @@ export function uiShortcuts() {
             }
         });
 
-    d3_select(document)
-        .call(keybinding);
-
-
 
     function shortcutsModal(_modalSelection) {
         _modalSelection.select('.modal')

modules/ui/undo_redo.js

@@ -9,7 +9,6 @@ import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilKeybinding } from '../util';
 import { tooltip } from '../util/tooltip';
 
 
@@ -64,13 +63,10 @@ export function uiUndoRedo(context) {
                 .call(svgIcon('#iD-icon-' + iconName));
         });
 
-        var keybinding = utilKeybinding('undo')
+        context.keybinding()
             .on(commands[0].cmd, function() { d3_event.preventDefault(); commands[0].action(); })
             .on(commands[1].cmd, function() { d3_event.preventDefault(); commands[1].action(); });
 
-        d3_select(document)
-            .call(keybinding);
-
 
         var debouncedUpdate = _debounce(update, 500, { leading: true, trailing: true });
 

modules/ui/zoom.js

@@ -7,7 +7,6 @@ import { t, textDirection } from '../util/locale';
 import { svgIcon } from '../svg';
 import { uiCmd } from './cmd';
 import { uiTooltipHtml } from './tooltipHtml';
-import { utilKeybinding } from '../util';
 import { tooltip } from '../util/tooltip';
 
 
@@ -72,19 +71,14 @@ export function uiZoom(context) {
                 .call(svgIcon('#iD-icon-' + d.icon, 'light'));
         });
 
-        var keybinding = utilKeybinding('zoom');
-
         ['plus', 'ffplus', '=', 'ffequals'].forEach(function(key) {
-            keybinding.on([key], zoomIn);
-            keybinding.on([uiCmd('⌘' + key)], zoomInFurther);
+            context.keybinding().on([key], zoomIn);
+            context.keybinding().on([uiCmd('⌘' + key)], zoomInFurther);
         });
 
         ['_', '-', 'ffminus', 'dash'].forEach(function(key) {
-            keybinding.on([key], zoomOut);
-            keybinding.on([uiCmd('⌘' + key)], zoomOutFurther);
+            context.keybinding().on([key], zoomOut);
+            context.keybinding().on([uiCmd('⌘' + key)], zoomOutFurther);
         });
-
-        d3_select(document)
-            .call(keybinding);
     };
 }