diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 607cd90..b878169 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -17,24 +17,24 @@ @@ -54,6 +54,7 @@ import "@/assets/icons/servers.svg"; import {nextTick, ref, watch} from "vue"; import {handleKeyboardEvent} from "@/util/events"; import {focus} from "@/util"; +import {LiveAtlasSidebarSection} from "@/index"; export default defineComponent({ components: { @@ -96,33 +97,41 @@ export default defineComponent({ return; } - const sectionHeadings: HTMLElement[] = Array.from(sidebar.value!.querySelectorAll('.section__heading button')); + const sectionHeadings: HTMLElement[] = Array.from(sidebar.value! + .querySelectorAll('.sidebar__section:not([hidden]) .section__heading button')); 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}); + //Show sections on ArrowDown from button + const handleSectionKeydown = (e: KeyboardEvent) => { + const section = (e.target as HTMLElement).dataset.section as LiveAtlasSidebarSection; + + if(e.key === 'ArrowDown' && section) { + if(currentlyVisible.value.has(section)) { + focusSection(section); + } else { + store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, { + element: section, + state: true + }); + } } }; - const handlePlayersKeydown = (e: KeyboardEvent) => { - if(e.key === 'ArrowDown') { - store.commit(MutationTypes.SET_UI_ELEMENT_VISIBILITY, {element: 'players', state: true}); - } - }; + const handleSectionClick = (e: MouseEvent) => { + const section = (e.target as HTMLElement).dataset.section as LiveAtlasSidebarSection; - const togglePlayers = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'players'); - const toggleMaps = () => store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, 'maps'); + if(section) { + store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, section); + } + } //Move focus when sidebar sections become visible - const focusMaps = () => focus('.section__heading button'); - const focusPlayers = () => focus('#players-heading'); + const focusSection = (section: LiveAtlasSidebarSection) => focus(`[data-section=${section}] .section__heading button`); //Focus sidebar sections when they become visible, except on initial load - watch(playersVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusPlayers())); - watch(mapsVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusMaps())); + watch(playersVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusSection('players'))); + watch(mapsVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusSection('maps'))); return { sidebar, @@ -142,11 +151,8 @@ export default defineComponent({ playerMakersEnabled, handleSidebarKeydown, - handleMapsKeydown, - handlePlayersKeydown, - - togglePlayers, - toggleMaps + handleSectionKeydown, + handleSectionClick, } }, }); diff --git a/src/components/sidebar/SidebarSection.vue b/src/components/sidebar/SidebarSection.vue index cd90c53..99dc3c1 100644 --- a/src/components/sidebar/SidebarSection.vue +++ b/src/components/sidebar/SidebarSection.vue @@ -95,6 +95,10 @@ export default defineComponent({ max-width: 26rem; flex: 0 0 auto; + &[hidden] { + display: none; + } + .section__heading { cursor: pointer; user-select: none; diff --git a/src/index.d.ts b/src/index.d.ts index eb64a3d..8b5a66b 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -98,7 +98,7 @@ interface LiveAtlasUIConfig { compactPlayerMarkers: boolean; } -export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps'; +export type LiveAtlasUIElement = 'layers' | 'chat' | LiveAtlasSidebarSection; export type LiveAtlasUIModal = 'login' | 'settings'; export type LiveAtlasSidebarSection = 'servers' | 'players' | 'maps'; export type LiveAtlasDimension = 'overworld' | 'nether' | 'end';