Add keyboard shortcuts for searching.

/ starts searching. Escape clears the search terms.

diff --git a/app.js b/app.js
index 6c8307436749b5a33e039aafefc5aaed994b6805..36508abb694ef108fc0ecbfd552f3cda62a71f81 100644 (file)
--- a/app.js
+++ b/app.js
@@ -85,6 +85,35 @@ const app = new Vue({
         toggleMenu: function() {
             this.showMenu = !this.showMenu;
         }
+    },
+    mounted() {
+        function isSmallScreen() {
+            return window.matchMedia('screen and (max-width: 1023px)').matches;
+        }
+        this._keyListener = function(e) {
+            if (e.key === '/') {
+                if (isSmallScreen()) {
+                    this.showMenu = true;
+                }
+                Vue.nextTick(() => {
+                    this.$refs.search.focus();
+                });
+
+                e.preventDefault();
+            }
+            if (e.key === 'Escape') {
+                this.filter = '';
+                this.$refs.search.blur();
+                if (isSmallScreen()) {
+                    this.showMenu = false;
+                }
+            }
+        }
+
+        document.addEventListener('keydown', this._keyListener.bind(this));
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this._keyListener);
     }
 });
 

diff --git a/index.html b/index.html
index 9c1b531f65f836a6e7c682845c66aaa075c32b20..85c9b789f62e0ec95168e9f5333a96f2599d278c 100644 (file)
--- a/index.html
+++ b/index.html
@@ -59,7 +59,7 @@
                       :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
                   <div class="search-bar">
                     <label for="search" class="search-label"></label>
-                    <input type="text" id="search" v-model="filter" />
+                    <input type="text" id="search" ref="search" v-model="filter" />
                   </div>
                 </div>
               </div>