Replace mousetrap with @github/hotkey

package-lock.json

@@ -8,6 +8,7 @@
       "name": "rfd-fyi",
       "version": "0.1.0",
       "dependencies": {
+        "@github/hotkey": "^2.0.1",
         "@popperjs/core": "^2.11.5",
         "axios": "^0.27.2",
         "bootstrap": "^5.2.0",
@@ -15,7 +16,6 @@
         "core-js": "^3.8.3",
         "jquery": "^3.6.0",
         "moment": "^2.29.4",
-        "mousetrap": "^1.6.5",
         "vue": "^3.2.37",
         "vue-github-button": "^3.0.3",
         "vue-gtag": "^2.0.1",
@@ -1934,6 +1934,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@github/hotkey": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@github/hotkey/-/hotkey-2.0.1.tgz",
+      "integrity": "sha512-qKXjAJjtheJbf4ie3hi8IwrHWJZHB5qdojR6JGo6jvQNPpsdUbk/NIdU8sxu4PW41CjW80vfciDMu3MAP3j2Fg=="
+    },
     "node_modules/@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -7792,11 +7797,6 @@
         "node": "*"
       }
     },
-    "node_modules/mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
     "node_modules/mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",
@@ -12885,6 +12885,11 @@
         }
       }
     },
+    "@github/hotkey": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@github/hotkey/-/hotkey-2.0.1.tgz",
+      "integrity": "sha512-qKXjAJjtheJbf4ie3hi8IwrHWJZHB5qdojR6JGo6jvQNPpsdUbk/NIdU8sxu4PW41CjW80vfciDMu3MAP3j2Fg=="
+    },
     "@hapi/hoek": {
       "version": "9.3.0",
       "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -17049,11 +17054,6 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="
     },
-    "mousetrap": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz",
-      "integrity": "sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA=="
-    },
     "mrmime": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz",

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@github/hotkey": "^2.0.1",
     "@popperjs/core": "^2.11.5",
     "axios": "^0.27.2",
     "bootstrap": "^5.2.0",
@@ -15,7 +16,6 @@
     "core-js": "^3.8.3",
     "jquery": "^3.6.0",
     "moment": "^2.29.4",
-    "mousetrap": "^1.6.5",
     "vue": "^3.2.37",
     "vue-github-button": "^3.0.3",
     "vue-gtag": "^2.0.1",

src/App.vue

@@ -2,8 +2,8 @@
 import axios from "axios";
 import moment from "moment";
 import Loading from "vue-loading-overlay";
-import Mousetrap from "mousetrap";
 import GithubButton from "vue-github-button";
+import { install } from "@github/hotkey";
 
 import "vue-loading-overlay/dist/vue-loading.css";
 
@@ -18,22 +18,17 @@ export default {
     };
   },
   mounted() {
+    // Install all the hotkeys on the page
+    for (const el of document.querySelectorAll("[data-hotkey]")) {
+      install(el);
+    }
     this.sortColumn = localStorage.getItem("sortColumn") || "score";
     this.ascending =
       localStorage.getItem("ascending") === "false" ? false : true;
     this.isLoading = true;
     this.fetchDeals();
-    Mousetrap.bind("/", this.focusFilter, "keyup");
-    Mousetrap.bind("r", this.fetchDeals);
-    Mousetrap.bind("escape", this.blurFilter);
   },
   methods: {
-    focusFilter() {
-      this.$refs.filter.focus();
-    },
-    blurFilter() {
-      this.$refs.filter.blur();
-    },
     createFilterRoute(params) {
       this.$refs.filter.blur();
       history.pushState(
@@ -135,12 +130,14 @@ export default {
   <link rel="shortcut icon" type="image/png" href="/favicon.png" />
   <body>
     <input
-      class="form-control bg-dark text-light mousetrap"
+      class="form-control bg-dark text-light"
       type="text"
       id="filter"
       placeholder="Filter"
+      data-hotkey="/"
       v-model="filter"
       v-on:keyup.enter="createFilterRoute(this.filter.toString())"
+      v-on:keyup.escape="this.$refs.filter.blur()"
       ref="filter"
     />
     <table class="table table-dark table-hover">
@@ -201,7 +198,14 @@ export default {
     </table>
     <div v-if="!isMobile()">
       <footer class="fixed-bottom">
-        <small>Tip: Press '/' to filter and create filter links (i.e. <a href="/#/filter=pizza" onclick="setTimeout(location.reload.bind(location), 1)">https://rfd.fyi/#/filter=pizza</a>)</small>
+        <small
+          >Tip: Press '/' to filter and create filter links (i.e.
+          <a
+            href="/#/filter=pizza"
+            onclick="setTimeout(location.reload.bind(location), 1)"
+            >https://rfd.fyi/#/filter=pizza</a
+          >)</small
+        >
         <div class="footer-right">
           <github-button href="https://github.com/davegallant/rfd-fyi"
             >Star</github-button

src/main.js

@@ -5,7 +5,6 @@ import { createRouter, createWebHashHistory } from "vue-router";
 
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
-import "mousetrap/mousetrap.min.js";
 
 import "./theme.css";
 

yarn.lock

@@ -973,6 +973,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@github/hotkey@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/@github/hotkey/-/hotkey-2.0.1.tgz"
+  integrity sha512-qKXjAJjtheJbf4ie3hi8IwrHWJZHB5qdojR6JGo6jvQNPpsdUbk/NIdU8sxu4PW41CjW80vfciDMu3MAP3j2Fg==
+
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
   resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz"
@@ -4313,11 +4318,6 @@ moment@^2.29.4:
   resolved "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz"
   integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
 
-mousetrap@^1.6.5:
-  version "1.6.5"
-  resolved "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.5.tgz"
-  integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
-
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/mrmime/-/mrmime-1.0.1.tgz"