From 072e83c3d4f80b666a7636650472d459720893e1 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 | 13 ++++++++++
frontend/src/main.ts | 3 ++-
frontend/src/util/shortkeys.ts | 26 +++++++++++++++++++
3 files changed, 41 insertions(+), 1 deletion(-)
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..e7c6459c 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,18 @@ 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") {
+ if (this.score === undefined) {
+ 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 9d0d5524..3db3c59d 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -9,10 +9,11 @@ import Vuetify from 'vuetify'
import Notifications from 'vue-notification'
import Clipboard from 'v-clipboard'
-
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..a1cf61f5
--- /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