From 8f84ae5a51af7d586755d5aefa1d0dd3540353fc Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sun, 13 Jan 2019 14:02:15 -0800
Subject: [PATCH] feat: add setting to disable hotkeys (#889)

---
 src/routes/_components/ShortcutHelpInfo.html  |  5 ---
 .../dialog/components/ShortcutHelpDialog.html |  9 ++++-
 src/routes/_pages/settings/hotkeys.html       | 33 +++++++++++++++++++
 src/routes/_store/store.js                    |  1 +
 src/routes/_utils/shortcuts.js                |  5 +++
 5 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/routes/_components/ShortcutHelpInfo.html b/src/routes/_components/ShortcutHelpInfo.html
index deb42d5..bed97d2 100644
--- a/src/routes/_components/ShortcutHelpInfo.html
+++ b/src/routes/_components/ShortcutHelpInfo.html
@@ -1,6 +1,4 @@
 <div class="{inDialog ? 'in-dialog' : ''}">
-  <h1>Hotkeys</h1>
-
   <ul>
     <li><kbd>s</kbd> to search</li>
     <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
@@ -22,9 +20,6 @@
   </ul>
 </div>
 <style>
-  .in-dialog h1 {
-    color: var(--muted-modal-text);
-  }
   li {
     list-style-type: none;
   }
diff --git a/src/routes/_components/dialog/components/ShortcutHelpDialog.html b/src/routes/_components/dialog/components/ShortcutHelpDialog.html
index 09c430e..d1e33d5 100644
--- a/src/routes/_components/dialog/components/ShortcutHelpDialog.html
+++ b/src/routes/_components/dialog/components/ShortcutHelpDialog.html
@@ -4,11 +4,18 @@
   background="var(--muted-modal-bg)"
   muted="true"
   className="shortcut-help-modal-dialog">
-  
+
+  <h1>Hotkeys</h1>
+
   <ShortcutHelpInfo inDialog={true} />
 
   <Shortcut scope='modal' key='h|?' on:pressed='close()'/>
 </ModalDialog>
+<style>
+  h1 {
+    color: var(--muted-modal-text);
+  }
+</style>
 <script>
   import ModalDialog from './ModalDialog.html'
   import ShortcutHelpInfo from '../../ShortcutHelpInfo.html'
diff --git a/src/routes/_pages/settings/hotkeys.html b/src/routes/_pages/settings/hotkeys.html
index b1fd793..9fb2bc2 100644
--- a/src/routes/_pages/settings/hotkeys.html
+++ b/src/routes/_pages/settings/hotkeys.html
@@ -1,11 +1,44 @@
 <SettingsLayout page='settings/hotkeys' label="Hotkeys">
+  <h1>Hotkeys</h1>
+
+  <h2 class="sr-only">Preferences</h2>
+  <form class="ui-settings" aria-label="Hotkey settings">
+    <div class="setting-group">
+      <input type="checkbox" id="choice-disable-hotkeys"
+             bind:checked="$disableHotkeys" on:change="onChange()">
+      <label for="choice-disable-hotkeys">Disable hotkeys</label>
+    </div>
+  </form>
+
+  <h2 class="sr-only">Guide</h2>
+
   <ShortcutHelpInfo />
 </SettingsLayout>
+<style>
+  .ui-settings {
+    background: var(--form-bg);
+    border: 1px solid var(--main-border);
+    border-radius: 4px;
+    padding: 20px;
+    line-height: 2em;
+    margin-bottom: 20px;
+  }
+  .setting-group {
+    padding: 5px 0;
+  }
+</style>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
+  import { store } from '../../_store/store'
 
   export default {
+    store: () => store,
+    methods: {
+      onChange () {
+        this.store.save()
+      }
+    },
     components: {
       SettingsLayout,
       ShortcutHelpInfo
diff --git a/src/routes/_store/store.js b/src/routes/_store/store.js
index 968d30c..a0c1b9a 100644
--- a/src/routes/_store/store.js
+++ b/src/routes/_store/store.js
@@ -11,6 +11,7 @@ const persistedState = {
   currentRegisteredInstanceName: undefined,
   currentRegisteredInstance: undefined,
   disableCustomScrollbars: false,
+  disableHotkeys: false,
   disableLongAriaLabels: false,
   disableTapOnStatus: false,
   largeInlineMedia: false,
diff --git a/src/routes/_utils/shortcuts.js b/src/routes/_utils/shortcuts.js
index 6c093a6..a196b2d 100644
--- a/src/routes/_utils/shortcuts.js
+++ b/src/routes/_utils/shortcuts.js
@@ -1,3 +1,5 @@
+import { store } from '../_store/store'
+
 // A map of scopeKey to KeyMap
 let scopeKeyMaps
 
@@ -119,6 +121,9 @@ function handleEvent (scopeKey, keyMap, key, event) {
 }
 
 function onKeyDown (event) {
+  if (store.get().disableHotkeys) {
+    return
+  }
   if (!acceptShortcutEvent(event)) {
     return
   }