From bce8e8b807297cfd04350506c248bd25178d424f Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 29 Oct 2018 13:07:49 +0000
Subject: [PATCH 1/2] Shortcut fixes

 - Allow shortcuts to trigger from the shortcut modal
 - Fix inspect/map toggle shortcut
---
 src/components/App.jsx | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index df8983c..b9c12d8 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -119,7 +119,9 @@ export default class App extends React.Component {
       {
         keyCode: keyCodes["i"],
         handler: () => {
-          this.setMapState("inspect");
+          this.setMapState(
+            this.state.mapState === "map" ? "inspect" : "map"
+          );
         }
       },
       {
@@ -135,12 +137,13 @@ export default class App extends React.Component {
         e.target.blur();
         document.body.focus();
       }
-      else if(document.activeElement === document.body) {
+      else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
         const shortcut = shortcuts.find((shortcut) => {
           return (shortcut.keyCode === e.keyCode)
         })
 
         if(shortcut) {
+          this.setModal("shortcuts", false);
           shortcut.handler(e);
         }
       }
@@ -484,17 +487,21 @@ export default class App extends React.Component {
     this.setState({ selectedLayerIndex: idx })
   }
 
-  toggleModal(modalName) {
+  setModal(modalName, value) {
+    if(modalName === 'survey' && value === false) {
+      localStorage.setItem('survey', '');
+    }
+
     this.setState({
       isOpen: {
         ...this.state.isOpen,
-        [modalName]: !this.state.isOpen[modalName]
+        [modalName]: value
       }
     })
+  }
 
-    if(modalName === 'survey') {
-      localStorage.setItem('survey', '');
-    }
+  toggleModal(modalName) {
+    this.setModal(modalName, !this.state.isOpen[modalName]);
   }
 
   render() {
@@ -549,6 +556,7 @@ export default class App extends React.Component {
 
     const modals = <div>
       <ShortcutsModal
+        ref={(el) => this.shortcutEl = el}
         isOpen={this.state.isOpen.shortcuts}
         onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
       />

From f2f02709368355c301aa392fd94779efde49da2a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 30 Oct 2018 20:12:48 +0000
Subject: [PATCH 2/2] Use KeyboardEvent.key rather than keyCode in attempt to
 support more keyboard layouts.

---
 src/components/App.jsx | 29 +++++++++--------------------
 1 file changed, 9 insertions(+), 20 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index b9c12d8..6f49c27 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -74,50 +74,39 @@ export default class App extends React.Component {
     })
 
     
-    const keyCodes = {
-      "esc": 27,
-      "?": 191,
-      "o": 79,
-      "e": 69,
-      "s": 83,
-      "d": 68,
-      "i": 73,
-      "m": 77,
-    }
-
     const shortcuts = [
       {
-        keyCode: keyCodes["?"],
+        key: "?",
         handler: () => {
           this.toggleModal("shortcuts");
         }
       },
       {
-        keyCode: keyCodes["o"],
+        key: "o",
         handler: () => {
           this.toggleModal("open");
         }
       },
       {
-        keyCode: keyCodes["e"],
+        key: "e",
         handler: () => {
           this.toggleModal("export");
         }
       },
       {
-        keyCode: keyCodes["d"],
+        key: "d",
         handler: () => {
           this.toggleModal("sources");
         }
       },
       {
-        keyCode: keyCodes["s"],
+        key: "s",
         handler: () => {
           this.toggleModal("settings");
         }
       },
       {
-        keyCode: keyCodes["i"],
+        key: "i",
         handler: () => {
           this.setMapState(
             this.state.mapState === "map" ? "inspect" : "map"
@@ -125,7 +114,7 @@ export default class App extends React.Component {
         }
       },
       {
-        keyCode: keyCodes["m"],
+        key: "m",
         handler: () => {
           document.querySelector(".mapboxgl-canvas").focus();
         }
@@ -133,13 +122,13 @@ export default class App extends React.Component {
     ]
 
     document.body.addEventListener("keyup", (e) => {
-      if(e.keyCode === keyCodes["esc"]) {
+      if(e.key === "Escape") {
         e.target.blur();
         document.body.focus();
       }
       else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
         const shortcut = shortcuts.find((shortcut) => {
-          return (shortcut.keyCode === e.keyCode)
+          return (shortcut.key === e.key)
         })
 
         if(shortcut) {