Reimplement keyboard shortcuts more generically

This commit is contained in:
James Lyne 2021-05-29 00:08:43 +01:00
parent 0ca26beb8e
commit 789505e2d9
3 changed files with 95 additions and 76 deletions

View File

@ -31,7 +31,7 @@ import {ActionTypes} from "@/store/action-types";
import {parseUrl} from '@/util';
import {hideSplash, showSplash, showSplashError} from '@/util/splash';
import {MutationTypes} from "@/store/mutation-types";
import {LiveAtlasServerDefinition} from "@/index";
import {LiveAtlasServerDefinition, LiveAtlasUIElement} from "@/index";
export default defineComponent({
name: 'App',
@ -132,6 +132,34 @@ export default defineComponent({
onResize = () => {
store.commit(MutationTypes.SET_SMALL_SCREEN, window.innerWidth < 480 || window.innerHeight < 500);
},
onKeydown = (e: KeyboardEvent) => {
if(!e.ctrlKey || !e.shiftKey) {
return;
}
let element: LiveAtlasUIElement;
switch(e.key) {
case 'M':
element = 'maps';
break;
case 'C':
element = 'chat';
break;
case 'P':
element = 'players';
break;
case 'L':
element = 'layers';
break;
default:
return;
}
e.preventDefault();
store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, element);
};
watch(title, (title) => document.title = title);
@ -169,8 +197,14 @@ export default defineComponent({
handleUrl();
onResize();
onMounted(() => window.addEventListener('resize', onResize));
onUnmounted(() => window.addEventListener('resize', onResize));
onMounted(() => {
window.addEventListener('resize', onResize);
window.addEventListener('keydown', onKeydown);
});
onUnmounted(() => {
window.addEventListener('resize', onResize);
window.addEventListener('keydown', onKeydown);
});
return {
chatBoxEnabled,

View File

@ -15,25 +15,22 @@
-->
<template>
<section class="sidebar" role="none">
<section class="sidebar" role="none" ref="sidebar">
<header class="sidebar__buttons">
<button v-if="mapCount > 1" :class="{'button--maps': true}"
@click="toggleMaps" :title="messageWorlds"
:aria-label="messageWorlds" :aria-expanded="currentlyVisible.has('maps')">
<button v-if="mapCount > 1" :class="{'button--maps': true}" @click="toggleMaps" :title="messageWorlds"
:aria-label="messageWorlds" :aria-expanded="mapsVisible">
<SvgIcon name="maps"></SvgIcon>
</button>
<button :class="{'button--players': true}"
@click="togglePlayers" :title="messagePlayers"
:aria-label="messagePlayers" :aria-expanded="currentlyVisible.has('players')">
<button :class="{'button--players': true}" @click="togglePlayers" :title="messagePlayers"
:aria-label="messagePlayers" :aria-expanded="playersVisible">
<SvgIcon name="players"></SvgIcon>
</button>
</header>
<div class="sidebar__content" @keydown="handleSidebarKeydown">
<ServerList v-if="serverCount > 1" v-show="currentlyVisible.has('maps')"></ServerList>
<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
<PlayerList id="players" v-if="previouslyVisible.has('players')"
v-show="currentlyVisible.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
<ServerList v-if="serverCount > 1" v-show="mapsVisible"></ServerList>
<WorldList v-if="mapCount > 1" v-show="mapsVisible"></WorldList>
<PlayerList id="players" v-if="previouslyVisible.has('players')" v-show="playersVisible"></PlayerList>
<FollowTarget v-if="following" v-show="followVisible" :target="following"></FollowTarget>
</div>
</section>
</template>
@ -49,8 +46,9 @@ import SvgIcon from "@/components/SvgIcon.vue";
import {MutationTypes} from "@/store/mutation-types";
import "@/assets/icons/players.svg";
import "@/assets/icons/maps.svg";
import {nextTick} from "vue";
import {nextTick, ref, watch} from "vue";
import {handleKeyboardEvent} from "@/util/events";
import {focus} from "@/util";
export default defineComponent({
components: {
@ -63,6 +61,8 @@ export default defineComponent({
setup() {
const store = useStore(),
sidebar = ref<HTMLElement | null>(null),
currentlyVisible = computed(() => store.state.ui.visibleElements),
previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
smallScreen = computed(() => store.state.ui.smallScreen),
@ -73,78 +73,55 @@ export default defineComponent({
messageWorlds = computed(() => store.state.messages.worldsHeading),
messagePlayers = computed(() => store.state.messages.playersHeading),
followActive = computed(() => {
playersVisible = computed(() => currentlyVisible.value.has('players')),
mapsVisible = computed(() => currentlyVisible.value.has('maps')),
followVisible = computed(() => {
//Show following alongside playerlist on small screens
return (!smallScreen.value && following.value)
|| (smallScreen.value && currentlyVisible.value.has('players'));
|| (smallScreen.value && playersVisible.value);
});
return {
mapCount,
serverCount,
currentlyVisible,
previouslyVisible,
followActive,
following,
messageWorlds,
messagePlayers,
}
},
mounted() {
window.addEventListener('keydown', this.handleButtonKeydown);
},
unmounted() {
window.removeEventListener('keydown', this.handleButtonKeydown);
},
methods: {
handleButtonKeydown(e: KeyboardEvent) {
if(e.key === '!' && e.ctrlKey && e.shiftKey) {
e.preventDefault();
this.toggleMaps();
} else if(e.key === '"' && e.ctrlKey && e.shiftKey) {
e.preventDefault();
this.togglePlayers();
}
},
handleSidebarKeydown(e: KeyboardEvent) {
//Arrow key section navigation
const handleSidebarKeydown = (e: KeyboardEvent) => {
if(!e.target || !(e.target as HTMLElement).matches('.section__heading button')) {
return;
}
const sectionHeadings: HTMLElement[] = Array.from(this.$el.querySelectorAll('.section__heading button'));
const sectionHeadings: HTMLElement[] = Array.from(sidebar.value!.querySelectorAll('.section__heading button'));
handleKeyboardEvent(e, sectionHeadings);
},
togglePlayers() {
useStore().commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'players');
nextTick(this.focusPlayers);
},
toggleMaps() {
useStore().commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'maps');
nextTick(this.focusMaps);
},
focusPlayers() {
if (this.currentlyVisible.has('players')) {
const heading = document.getElementById('players-heading');
};
if (heading) {
heading.focus();
}
const togglePlayers = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'players');
const toggleMaps = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'maps');
//Move focus when sidebar sections become visible
const focusMaps = () => focus('.section__heading button');
const focusPlayers = () => focus('#players-heading');
watch(playersVisible, newValue => newValue && nextTick(() => focusPlayers()));
watch(mapsVisible, newValue => newValue && nextTick(() => focusMaps()));
return {
sidebar,
mapCount,
serverCount,
following,
messageWorlds,
messagePlayers,
previouslyVisible,
playersVisible,
mapsVisible,
followVisible,
handleSidebarKeydown,
togglePlayers,
toggleMaps
}
},
focusMaps() {
if(this.currentlyVisible.has('maps')) {
const heading = document.querySelector('.section__heading button');
if(heading) {
(heading as HTMLElement).focus();
}
}
}
}
})
});
</script>

View File

@ -229,3 +229,11 @@ export const getUrlForLocation = (world: DynmapWorld, map: DynmapWorldMap, locat
return `#${world.name};${map.name};${locationString};${zoom}`;
}
export const focus = (selector: string) => {
const element = document.querySelector(selector);
if(element) {
(element as HTMLElement).focus();
}
}