From 1f44f7e75233e9f1e4836ed2a646f38623c3b807 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Sat, 29 May 2021 00:22:31 +0100 Subject: [PATCH] More keyboard handlers --- src/components/Sidebar.vue | 20 +++++++++++-- src/leaflet/control/ChatControl.ts | 18 ++++++++---- src/leaflet/control/DynmapLayerControl.ts | 35 ++++++++++++++++------- 3 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index aec7595..78e1370 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -18,11 +18,11 @@
@@ -91,6 +91,19 @@ export default defineComponent({ handleKeyboardEvent(e, sectionHeadings); }; + //Show sectinos on ArrowDown from button + const handleMapsKeydown = (e: KeyboardEvent) => { + if(e.key === 'ArrowDown') { + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'maps', state: true}); + } + }; + + const handlePlayersKeydown = (e: KeyboardEvent) => { + if(e.key === 'ArrowDown') { + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'players', state: true}); + } + }; + const togglePlayers = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'players'); const toggleMaps = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'maps'); @@ -117,6 +130,9 @@ export default defineComponent({ followVisible, handleSidebarKeydown, + handleMapsKeydown, + handlePlayersKeydown, + togglePlayers, toggleMaps } diff --git a/src/leaflet/control/ChatControl.ts b/src/leaflet/control/ChatControl.ts index 3e7ea09..8e1d217 100644 --- a/src/leaflet/control/ChatControl.ts +++ b/src/leaflet/control/ChatControl.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import {Control, ControlOptions, DomUtil} from 'leaflet'; +import {Control, ControlOptions, DomEvent, DomUtil} from 'leaflet'; import {useStore} from "@/store"; import {MutationTypes} from "@/store/mutation-types"; import {watch} from "@vue/runtime-core"; @@ -30,22 +30,30 @@ export class ChatControl extends Control { } onAdd() { - const chatButton = DomUtil.create('button', 'leaflet-control-chat') as HTMLButtonElement; + const store = useStore(), + chatButton = DomUtil.create('button', 'leaflet-control-chat') as HTMLButtonElement; chatButton.type = 'button'; - chatButton.title = useStore().state.messages.chatTitle; + chatButton.title = store.state.messages.chatTitle; chatButton.innerHTML = ` `; chatButton.addEventListener('click', e => { - useStore().commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'chat'); + store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'chat'); e.stopPropagation(); e.preventDefault(); }); - watch(useStore().state.ui.visibleElements, (newValue) => { + //Open chat on ArrowRight from button + DomEvent.on(chatButton,'keydown', (e: Event) => { + if((e as KeyboardEvent).key === 'ArrowRight') { + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'chat', state: true}); + } + }); + + watch(store.state.ui.visibleElements, (newValue) => { chatButton.setAttribute('aria-expanded', newValue.has('chat').toString()); }); diff --git a/src/leaflet/control/DynmapLayerControl.ts b/src/leaflet/control/DynmapLayerControl.ts index 2599624..4aa0708 100644 --- a/src/leaflet/control/DynmapLayerControl.ts +++ b/src/leaflet/control/DynmapLayerControl.ts @@ -17,17 +17,17 @@ * limitations under the License. */ -import {Util, Control, DomEvent, LeafletEvent, Map as LeafletMap, Layer, DomUtil} from 'leaflet'; -import LayersObject = Control.LayersObject; -import LayersOptions = Control.LayersOptions; -import Layers = Control.Layers; +import {Control, DomEvent, DomUtil, Layer, LeafletEvent, Map as LeafletMap, Util} from 'leaflet'; import '@/assets/icons/layers.svg'; import '@/assets/icons/checkbox.svg'; import {useStore} from "@/store"; import {MutationTypes} from "@/store/mutation-types"; -import {watch} from "vue"; +import {nextTick, watch} from "vue"; import {handleKeyboardEvent} from "@/util/events"; +import LayersObject = Control.LayersObject; +import LayersOptions = Control.LayersOptions; +import Layers = Control.Layers; const store = useStore(); @@ -91,18 +91,32 @@ export class DynmapLayerControl extends Control.Layers { _initLayout() { const className = 'leaflet-control-layers', - container = this._container = DomUtil.create('div', className); + container = this._container = DomUtil.create('div', className), + section = this._section = DomUtil.create('section', className + '-list'), + button = this._layersButton = DomUtil.create('button', className + '-toggle', container); DomEvent.disableClickPropagation(container); DomEvent.disableScrollPropagation(container); + //Open layer list on ArrowRight from button + DomEvent.on(button,'keydown', (e: Event) => { + if((e as KeyboardEvent).key === 'ArrowRight') { + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'layers', state: true}); + } + }); + DomEvent.on(container, 'keydown', (e: Event) => { + //Close layer list on ArrowLeft from within list + if((e as KeyboardEvent).key === 'ArrowLeft') { + e.preventDefault(); + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'layers', state: false}); + nextTick(() => button.focus()); + } + const elements = Array.from(container.querySelectorAll('input')) as HTMLElement[]; handleKeyboardEvent(e as KeyboardEvent, elements); }); - - const section = this._section = DomUtil.create('section', className + '-list'), - button = this._layersButton = DomUtil.create('button', className + '-toggle', container); + DomEvent.on(button,'click', () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'layers')); section.style.display = 'none'; @@ -113,9 +127,8 @@ export class DynmapLayerControl extends Control.Layers { `; - //Use vuex to toggle and track expanded state - DomEvent.on(button,'click', () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'layers')); + //Use vuex track expanded state watch(store.state.ui.visibleElements, (newValue) => { if(newValue.has('layers') && !this.visible) { this.expand();