Skip to content
Snippets Groups Projects
Commit 072e83c3 authored by Dominik Seeger's avatar Dominik Seeger
Browse files

added shortkey handler

parent d93de798
No related branches found
No related tags found
No related merge requests found
Pipeline #107558 passed
This commit is part of merge request !184. Comments created here will be created in the context of that merge request.
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
<v-flex xs5 class="score-flex"> <v-flex xs5 class="score-flex">
<span class="mr-2">Score:</span> <span class="mr-2">Score:</span>
<input class="score-text-field" <input class="score-text-field"
v-shortkey="'numeric'" @shortkey="handleKeypress"
id="score-input" id="score-input"
type="number" type="number"
step="0.5" step="0.5"
...@@ -172,6 +173,18 @@ export default { ...@@ -172,6 +173,18 @@ export default {
} else { } else {
throw new Error("Can't skip submission when skippable is false for AnnotatedSubmissionBottomToolbar.") 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()
}
} }
} }
} }
......
...@@ -9,10 +9,11 @@ import Vuetify from 'vuetify' ...@@ -9,10 +9,11 @@ import Vuetify from 'vuetify'
import Notifications from 'vue-notification' import Notifications from 'vue-notification'
import Clipboard from 'v-clipboard' import Clipboard from 'v-clipboard'
import 'vuetify/dist/vuetify.min.css' import 'vuetify/dist/vuetify.min.css'
import 'highlight.js/styles/atom-one-light.css' import 'highlight.js/styles/atom-one-light.css'
import "@/util/shortkeys"
Vue.use(Vuetify) Vue.use(Vuetify)
Vue.use(Clipboard) Vue.use(Clipboard)
Vue.use(Notifications) Vue.use(Notifications)
......
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment