From 2e1426e945ec5b3162f883dc193d665e2f936e39 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Fri, 28 May 2021 22:31:08 +0100 Subject: [PATCH] More generic keyboard event handling --- src/components/Sidebar.vue | 38 ++---------------- src/components/util/RadioList.vue | 32 +--------------- src/util/events.ts | 64 +++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 65 deletions(-) create mode 100644 src/util/events.ts diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 83ec278..e6d8779 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -50,6 +50,7 @@ import {MutationTypes} from "@/store/mutation-types"; import "@/assets/icons/players.svg"; import "@/assets/icons/maps.svg"; import {nextTick} from "vue"; +import {handleKeyboardEvent} from "@/util/events"; export default defineComponent({ components: { @@ -113,41 +114,8 @@ export default defineComponent({ return; } - const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button')), - position = sectionHeadings.indexOf(e.target as HTMLElement); - - if(position === -1) { - return; - } - - let newPosition; - - switch(e.key) { - case 'ArrowDown': - newPosition = position + 1; - break; - case 'ArrowUp': - newPosition = position - 1; - break; - case 'Home': - newPosition = 0; - break; - case 'End': - newPosition = sectionHeadings.length - 1; - break; - default: - return; - } - - if(newPosition >= sectionHeadings.length) { - newPosition = 0 - } else if(newPosition < 0) { - newPosition = sectionHeadings.length - 1; - } - - e.preventDefault(); - e.stopImmediatePropagation(); - sectionHeadings[newPosition].focus(); + const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button')); + handleKeyboardEvent(e, sectionHeadings); }, togglePlayers() { useStore().commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'players'); diff --git a/src/components/util/RadioList.vue b/src/components/util/RadioList.vue index 2382bed..4ca2208 100644 --- a/src/components/util/RadioList.vue +++ b/src/components/util/RadioList.vue @@ -21,6 +21,7 @@