From 71f8978cd0ae703ff694bdd4f4aa5265994efbff Mon Sep 17 00:00:00 2001
From: Dominik Seeger <dominik.seeger@gmx.net>
Date: Tue, 3 Sep 2019 15:03:40 +0200
Subject: [PATCH] added shortkey handler

---
 .../AnnotatedSubmissionBottomToolbar.vue      | 10 +++++++
 frontend/src/main.ts                          |  2 ++
 frontend/src/util/shortkeys.ts                | 26 +++++++++++++++++++
 3 files changed, 38 insertions(+)
 create mode 100644 frontend/src/util/shortkeys.ts

diff --git a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
index b9765e1f..2fb77e70 100644
--- a/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
+++ b/frontend/src/components/submission_notes/toolbars/AnnotatedSubmissionBottomToolbar.vue
@@ -18,6 +18,7 @@
           <v-flex xs5 class="score-flex">
             <span class="mr-2">Score:</span>
             <input class="score-text-field"
+            v-shortkey="'numeric'" @shortkey="handleKeypress"
             id="score-input"
             type="number"
             step="0.5"
@@ -172,6 +173,15 @@ export default {
       } else {
         throw new Error("Can't skip submission when skippable is false for AnnotatedSubmissionBottomToolbar.")
       }
+    },
+    handleKeypress (event) {
+      // only handle keypress if nothing is focused
+      if (document.activeElement.tagName === "BODY") {
+        this.score = event.key
+        const scoreInput = document.getElementById('score-input')
+        scoreInput.scrollIntoView()
+        scoreInput.focus()
+      }
     }
   }
 }
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 3850824d..b81b15eb 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -14,6 +14,8 @@ import * as Integrations from '@sentry/integrations'
 import 'vuetify/dist/vuetify.min.css'
 import 'highlight.js/styles/atom-one-light.css'
 
+import "@/util/shortkeys"
+
 Vue.use(Vuetify)
 Vue.use(Clipboard)
 Vue.use(Notifications)
diff --git a/frontend/src/util/shortkeys.ts b/frontend/src/util/shortkeys.ts
new file mode 100644
index 00000000..6820edf8
--- /dev/null
+++ b/frontend/src/util/shortkeys.ts
@@ -0,0 +1,26 @@
+import Vue from "vue";
+
+const shortkeyTypes = {
+  numeric: (key: string) => { return Number(key) >= 0 && Number(key) <= 9 }
+}
+
+const handlerFunc = (el: any, bind: any) => {
+  return (event: KeyboardEvent) => {
+    // handle numeric key press
+    if (bind.value === "numeric" && shortkeyTypes.numeric(event.key)) {
+      const e = new KeyboardEvent('shortkey', { bubbles: false, key: event.key })
+      el.dispatchEvent(e)
+    }
+  }
+}
+
+// add the v-shortkey directive to Vue
+// usage: <tag v-shortkey="<shortkeyType>" @shortkey="<handlerFunc>"></tag>
+Vue.directive('shortkey', {
+  bind: (el, bind) => {
+    window.addEventListener("keypress", handlerFunc(el, bind))
+  },
+  unbind: (el, bind) => {
+    window.removeEventListener("keypress", handlerFunc(el, bind))
+  }
+})
\ No newline at end of file
-- 
GitLab