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