display a shortcuts modal, continues #1481

css/80_app.css

@@ -3082,6 +3082,18 @@ img.tile-removing {
 }
 
 
+/* Shortcuts Modal
+------------------------------------------------------- */
+.modal-shortcuts {
+    padding-bottom: 20px;
+}
+
+.modal-shortcuts kbd {
+    padding: 2px 4px;
+    background: #eee;
+    margin-right: 4px;
+}
+
 /* Save Mode
 ------------------------------------------------------- */
 .mode-save a.user-info {

data/index.js

@@ -6,6 +6,7 @@ export { dataDeprecated } from './deprecated.json';
 export { dataDiscarded } from './discarded.json';
 export { dataLocales } from './locales.json';
 export { dataPhoneFormats } from './phone-formats.json';
+export { dataShortcuts } from './shortcuts.json';
 
 export { default as dataImperial } from './imperial.json';
 export { default as dataDriveLeft } from './drive-left.json';

data/shortcuts.json

@@ -0,0 +1,95 @@
+{
+    "dataShortcuts": [
+        {
+            "desc": "Changing the display",
+            "shortcuts": [
+                {
+                    "keys": ["↓", "↑", "←", "→"],
+                    "desc": "Pan map"
+                },
+                {
+                    "keys": ["⇧↓", "⇧↑", "⇧←", "⇧→"],
+                    "desc": "Pan map by one screenful"
+                },
+                {
+                    "keys": ["+", "-"],
+                    "desc": "Zoom in / Zoom out"
+                },
+                {
+                    "keys": ["⌘+", "⌘-"],
+                    "desc": "Zoom in / Zoom out by a lot"
+                },
+                {
+                    "keys": ["B"],
+                    "desc": "Display background layer switcher"
+                },
+                {
+                    "keys": ["⌘B"],
+                    "desc": "Switch between previous and current backgrounds"
+                },
+                {
+                    "keys": ["W"],
+                    "desc": "Toggle wireframe mode"
+                },
+                {
+                    "keys": ["H"],
+                    "desc": "Show in-editor help/documentation"
+                },
+                {
+                    "keys": ["/"],
+                    "desc": "Toggle minimap"
+                },
+                {
+                    "keys": ["⌘I"],
+                    "desc": "Toggle info/measurements box"
+                },
+                {
+                    "keys": ["Spacebar"],
+                    "desc": "Toggle radial menu for currently selected object"
+                }
+            ]
+        },
+        {
+            "desc": "Editing mode",
+            "shortcuts": [
+                {
+                    "keys": ["1"],
+                    "desc": "Switch to 'add point' mode"
+                },
+                {
+                    "keys": ["2"],
+                    "desc": "Switch to 'add line' mode"
+                },
+                {
+                    "keys": ["3"],
+                    "desc": "Switch to 'add area' mode"
+                },
+                {
+                    "keys": ["A"],
+                    "desc": "Continue drawing a line at the selected node"
+                },
+                {
+                    "keys": ["↵ Enter", "Esc"],
+                    "desc": "Stop drawing of a line or area"
+                }
+            ]
+        },
+        {
+            "desc": "Undoing or saving changes",
+            "shortcuts": [
+                {
+                    "keys": ["⌘Z"],
+                    "desc": "Undo last action"
+                },
+                {
+                    "keys": ["⌘⇧Z"],
+                    "desc": "Redo last action"
+                },
+                {
+                    "keys": ["⌘S"],
+                    "desc": "Save changes"
+                }
+            ]
+        }
+    ]
+}

modules/ui/init.js

@@ -24,6 +24,7 @@ import { uiModes } from './modes';
 import { uiRestore } from './restore';
 import { uiSave } from './save';
 import { uiScale } from './scale';
+import { uiShortcuts } from './shortcuts';
 import { uiSidebar } from './sidebar';
 import { uiSpinner } from './spinner';
 import { uiSplash } from './splash';
@@ -283,7 +284,8 @@ export function uiInit(context) {
         if (!uiInitCounter++) {
             context.container()
                 .call(uiSplash(context))
-                .call(uiRestore(context));
+                .call(uiRestore(context))
+				.call(uiShortcuts(context));
         }
 
         var authenticating = uiLoading(context)

modules/ui/shortcuts.js

@@ -0,0 +1,69 @@
+import * as d3 from 'd3';
+import { uiCmd } from './cmd';
+import { uiModal } from './modal';
+import { d3keybinding } from '../lib/d3.keybinding.js';
+import { dataShortcuts } from '../../data/shortcuts.json';
+
+export function uiShortcuts(context) {
+    var key = uiCmd('⇧/');
+
+    function shortcuts(selection) {
+        function show() {
+            if (!d3.selectAll('.modal').empty()) return;
+
+            var modalSelection = uiModal(selection);
+
+            modalSelection.select('.modal')
+                .attr('class', 'modal fillL col6');
+
+            var shortcutsModal = modalSelection.select('.content');
+
+            shortcutsModal
+                .attr('class','cf');
+
+            shortcutsModal
+                .append('div')
+                .attr('class', 'modal-section')
+                .append('h3')
+                .text('Keyboard shortcuts');
+
+            var section = shortcutsModal
+                .selectAll('section')
+                .data(dataShortcuts)
+                .enter().append('section')
+                .attr('class', 'modal-section modal-shortcuts cf');
+
+            section
+                .append('h4')
+                .text(function(d) { return d.desc; });
+
+            var p = section
+                .selectAll('p')
+                .data(function(d) { return d.shortcuts; })
+                .enter().append('p');
+
+            var shortcuts = p
+                .append('span')
+                .attr('class', 'col4');
+
+            shortcuts
+                .selectAll('kbd')
+                .data(function(d) { return d.keys; })
+                .enter().append('kbd')
+                .text(function(d) { return uiCmd(d); });
+
+            var description  = p
+                .append('span')
+                .attr('class', 'col8')
+                .text(function(d) { return d.desc });
+        }
+
+        var keybinding = d3keybinding('shortcuts')
+            .on(key, show);
+
+        d3.select(document)
+            .call(keybinding);
+    }
+
+    return shortcuts;
+}