spanish-quizzer

commit 0243b0e3cf4e1433583aabe95d9935be7bc6d105
parent a99ad5d2b51e58897137959ed33f6128309aeda1
Author: AsherMorgan <59518073+AsherMorgan@users.noreply.github.com>
Date:   Wed, 21 Oct 2020 08:46:12 -0700

Fix broken keyboard shortcuts.

Diffstat:
M
js/home.js
 | 
10
----------
M
js/settings.js
 | 
34
+++++++++++++++++++++++++++++++++-

2 files changed, 33 insertions(+), 11 deletions(-)
diff --git a/js/home.js b/js/home.js
@@ -179,14 +179,4 @@ function KeyDown(e) {
             window.location = "reference.html";
         }
     }
-
-    // Settings shortcuts
-    if (app.state === "verbSettings" || app.state === "vocabSettings") {
-        if (e.key === "s") {
-            CreateSession();
-        }
-        if (e.key === "r") {
-            ResumeSession();
-        }
-    }
 }
diff --git a/js/settings.js b/js/settings.js
@@ -248,6 +248,28 @@ let settings = Vue.component("settings", {
             // Start quizzer
             this.$emit("start-session", prompts, promptIndex, this.promptType, this.inputType, this.onMissedPrompt, this.repeatPrompts);
         },
+
+        /**
+         * Implements keyboard shortcuts.
+         */
+        keyup: function(e) {
+            try {
+                if (window.getComputedStyle(this.$refs.container).display === "none") {
+                    return;
+                }
+            }
+            catch {
+                // Will fail if not mounted
+                return;
+            }
+
+            if (e.key === "s") {
+                this.CreateSession();
+            }
+            if (e.key === "r") {
+                this.ResumeSession();
+            }
+        }
     },
 
     watch: {
@@ -290,9 +312,19 @@ let settings = Vue.component("settings", {
             localStorage.setItem("repeatPrompts", value);
         },
     },
+
+    created: function() {
+        // Add keyup handler
+        window.addEventListener("keyup", this.keyup);
+    },
+
+    destroyed: function() {
+        // Remove keyup handler
+        window.removeEventListener("keydown", this.keyup);
+    },
     
     template: `
-        <div class="settings">
+        <div class="settings" ref="container">
             <div class="verbSettings" v-show="category === 'verbs'">
                 <h1>Choose your settings and then click start.</h1>