Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move UI visibility handling to vuex

Browse Source
This commit is contained in:
James Lyne 2020-12-31 13:02:49 +00:00
parent b64250404a
commit 53f5960e52
5 changed files with 76 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/Sidebar.vue
View File

@ -17,32 +17,34 @@
<template>
<aside class="sidebar">
<header class="sidebar__buttons">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active': menusActive.has('maps')}"
@click="toggleMenu('maps')" title="Map list" aria-label="Map list">
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':visibleUIElements.has('maps')}"
@click="toggleElement('maps')" title="Map list" aria-label="Map list">
<SvgIcon name="maps"></SvgIcon>
</button>
<button :class="{'button--players': true, 'active': menusActive.has('players')}"
@click="toggleMenu('players')" title="Player list" aria-label="Player list">
<button :class="{'button--players': true, 'active': visibleUIElements.has('players')}"
@click="toggleElement('players')" title="Player list" aria-label="Player list">
<SvgIcon name="players"></SvgIcon>
</button>
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': menusActive.has('settings')}"-->
<!-- @click="toggleMenu('settings')" title="Settings" aria-label="Settings">-->
<!-- <button :class="{'button&#45;&#45;settings': true, 'active': visibleUIElements.has('settings'))}"-->
<!-- @click="toggleElement('settings')" title="Settings" aria-label="Settings">-->
<!-- <SvgIcon name="settings"></SvgIcon>-->
<!-- </button>-->
</header>
<WorldList v-if="mapCount > 1" v-show="menusActive.has('maps')"></WorldList>
<PlayerList v-show="menusActive.has('players')"></PlayerList>
<WorldList v-if="mapCount > 1" v-show="visibleUIElements.has('maps')"></WorldList>
<PlayerList v-show="visibleUIElements.has('players')"></PlayerList>
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
</aside>
</template>
<script lang="ts">
import {defineComponent, ref, reactive, computed, onMounted, onUnmounted, watch} from "@vue/runtime-core";
import {defineComponent, computed} from "@vue/runtime-core";
import PlayerList from './sidebar/PlayerList.vue';
import WorldList from './sidebar/WorldList.vue';
import FollowTarget from './sidebar/FollowTarget.vue';
import {useStore} from "@/store";
import SvgIcon from "@/components/SvgIcon.vue";
import {MutationTypes} from "@/store/mutation-types";
import {DynmapUIElement} from "@/dynmap";
export default defineComponent({
components: {
@ -54,47 +56,27 @@ export default defineComponent({
setup() {
const store = useStore(),
onResize = () => {
smallScreen.value = window.innerWidth < 480 || window.innerHeight < 500;
},
toggleMenu = (menu: string) => {
if(menusActive.has(menu)) {
menusActive.delete(menu);
} else {
if(smallScreen.value) {
menusActive.clear();
}
visibleUIElements = computed(() => store.state.ui.visibleElements),
smallScreen = computed(() => store.state.ui.smallScreen),
mapCount = computed(() => store.state.maps.size),
following = computed(() => store.state.followTarget),
menusActive.add(menu);
}
toggleElement = (element: DynmapUIElement) => {
store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, element);
},
followActive = computed(() => {
//Show following alongside playerlist on small screens
return (!smallScreen.value && following) || (smallScreen.value && menusActive.has('players'));
return (!smallScreen.value && following)
|| (smallScreen.value && visibleUIElements.value.has('players'));
});
let menusActive = reactive(new Set<string>()),
smallScreen = ref(false),
mapCount = computed(() => store.state.maps.size),
following = computed(() => store.state.followTarget);
onResize();
onMounted(() => window.addEventListener('resize', onResize));
onUnmounted(() => window.addEventListener('resize', onResize));
watch(smallScreen, (newValue) => {
if(newValue && menusActive.size > 1) {
menusActive.clear();
}
});
return {
mapCount,
menusActive,
visibleUIElements,
toggleElement,
followActive,
toggleMenu,
following
following,
}
}
})

2
src/dynmap.d.ts vendored
View File

@ -304,3 +304,5 @@ interface DynmapChat {
// source?: string;
timestamp: number;
}
export type DynmapUIElement = 'chat' | 'players' | 'maps' | 'settings';

6
src/store/mutation-types.ts
View File

@ -46,5 +46,9 @@ export enum MutationTypes {
SET_PAN_TARGET = 'setPanTarget',
CLEAR_FOLLOW_TARGET = 'clearFollow',
CLEAR_PAN_TARGET = 'clearPanTarget'
CLEAR_PAN_TARGET = 'clearPanTarget',
SET_SMALL_SCREEN = 'setSmallScreen',
TOGGLE_UI_ELEMENT_VISIBILITY = 'toggleUIElementVisibility',
SET_UI_ELEMENT_VISIBILITY = 'setUIElementVisibility',
}

36
src/store/mutations.ts
View File

@ -29,7 +29,7 @@ import {
DynmapPlayer,
DynmapServerConfig, DynmapTileUpdate,
DynmapWorld,
DynmapWorldState, DynmapParsedUrl, DynmapChat
DynmapWorldState, DynmapParsedUrl, DynmapChat, DynmapUIElement
} from "@/dynmap";
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
@ -69,6 +69,10 @@ export type Mutations<S = State> = {
[MutationTypes.SET_PAN_TARGET](state: S, payload: DynmapPlayer): void
[MutationTypes.CLEAR_FOLLOW_TARGET](state: S, a?: void): void
[MutationTypes.CLEAR_PAN_TARGET](state: S, a?: void): void
[MutationTypes.SET_SMALL_SCREEN](state: S, payload: boolean): void
[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: S, payload: DynmapUIElement): void
[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: S, payload: {element: DynmapUIElement, state: boolean}): void
}
export const mutations: MutationTree<State> & Mutations = {
@ -238,6 +242,10 @@ export const mutations: MutationTree<State> & Mutations = {
//Adds chat messages from an update fetch to the chat history
[MutationTypes.ADD_CHAT](state: State, chat: Array<DynmapChat>) {
state.chat.unshift(...chat);
if(state.components.chat && isFinite(state.components.chat.messageHistory)) {
state.chat.splice(state.components.chat.messageHistory);
}
},
//Pops the specified number of marker updates from the pending updates list
@ -397,5 +405,31 @@ export const mutations: MutationTree<State> & Mutations = {
//Clear the pan target
[MutationTypes.CLEAR_PAN_TARGET](state: State) {
state.panTarget = undefined;
},
[MutationTypes.SET_SMALL_SCREEN](state: State, smallScreen: boolean): void {
if(!state.ui.smallScreen && smallScreen && state.ui.visibleElements.size > 1) {
state.ui.visibleElements.clear();
}
state.ui.smallScreen = smallScreen;
},
[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: State, element: DynmapUIElement): void {
const newState = !state.ui.visibleElements.has(element);
if(newState && state.ui.smallScreen) {
state.ui.visibleElements.clear();
}
newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element);
},
[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: State, payload: {element: DynmapUIElement, state: boolean}): void {
if(payload.state && state.ui.smallScreen) {
state.ui.visibleElements.clear();
}
payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
}
}

12
src/store/state.ts
View File

@ -20,7 +20,7 @@ import {
DynmapMessageConfig,
DynmapPlayer,
DynmapServerConfig, DynmapTileUpdate,
DynmapWorld, DynmapWorldState, Coordinate, DynmapParsedUrl, DynmapChat
DynmapWorld, DynmapWorldState, Coordinate, DynmapParsedUrl, DynmapChat, DynmapUIElement
} from "@/dynmap";
import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
@ -52,6 +52,11 @@ export type State = {
updateRequestId: number;
updateTimestamp: Date;
ui: {
smallScreen: boolean;
visibleElements: Set<DynmapUIElement>;
};
parsedUrl: DynmapParsedUrl;
}
@ -145,6 +150,11 @@ export const state: State = {
updateRequestId: 0,
updateTimestamp: new Date(),
ui: {
smallScreen: false,
visibleElements:new Set(),
},
parsedUrl: {
world: undefined,
map: undefined,