Lazily render PlayerList
This commit is contained in:
parent
2251ca3e25
commit
f7b3c4d551
@ -17,21 +17,21 @@
|
||||
<template>
|
||||
<aside class="sidebar">
|
||||
<header class="sidebar__buttons">
|
||||
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':visibleUIElements.has('maps')}"
|
||||
<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':currentlyVisible.has('maps')}"
|
||||
@click="toggleElement('maps')" title="Map list" aria-label="Map list">
|
||||
<SvgIcon name="maps"></SvgIcon>
|
||||
</button>
|
||||
<button :class="{'button--players': true, 'active': visibleUIElements.has('players')}"
|
||||
<button :class="{'button--players': true, 'active': currentlyVisible.has('players')}"
|
||||
@click="toggleElement('players')" title="Player list" aria-label="Player list">
|
||||
<SvgIcon name="players"></SvgIcon>
|
||||
</button>
|
||||
<!-- <button :class="{'button--settings': true, 'active': visibleUIElements.has('settings'))}"-->
|
||||
<!-- <button :class="{'button--settings': true, 'active': currentlyVisible.has('settings'))}"-->
|
||||
<!-- @click="toggleElement('settings')" title="Settings" aria-label="Settings">-->
|
||||
<!-- <SvgIcon name="settings"></SvgIcon>-->
|
||||
<!-- </button>-->
|
||||
</header>
|
||||
<WorldList v-if="mapCount > 1" v-show="visibleUIElements.has('maps')"></WorldList>
|
||||
<PlayerList v-show="visibleUIElements.has('players')"></PlayerList>
|
||||
<WorldList v-if="mapCount > 1" v-show="currentlyVisible.has('maps')"></WorldList>
|
||||
<PlayerList v-if="previouslyVisible.has('players')" v-show="currentlyVisible.has('players')"></PlayerList>
|
||||
<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
|
||||
</aside>
|
||||
</template>
|
||||
@ -56,7 +56,8 @@ export default defineComponent({
|
||||
|
||||
setup() {
|
||||
const store = useStore(),
|
||||
visibleUIElements = computed(() => store.state.ui.visibleElements),
|
||||
currentlyVisible = computed(() => store.state.ui.visibleElements),
|
||||
previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
|
||||
smallScreen = computed(() => store.state.ui.smallScreen),
|
||||
mapCount = computed(() => store.state.maps.size),
|
||||
following = computed(() => store.state.followTarget),
|
||||
@ -68,12 +69,13 @@ export default defineComponent({
|
||||
followActive = computed(() => {
|
||||
//Show following alongside playerlist on small screens
|
||||
return (!smallScreen.value && following)
|
||||
|| (smallScreen.value && visibleUIElements.value.has('players'));
|
||||
|| (smallScreen.value && currentlyVisible.value.has('players'));
|
||||
});
|
||||
|
||||
return {
|
||||
mapCount,
|
||||
visibleUIElements,
|
||||
currentlyVisible,
|
||||
previouslyVisible,
|
||||
toggleElement,
|
||||
followActive,
|
||||
following,
|
||||
|
@ -425,6 +425,7 @@ export const mutations: MutationTree<State> & Mutations = {
|
||||
state.ui.visibleElements.clear();
|
||||
}
|
||||
|
||||
state.ui.previouslyVisibleElements.add(element);
|
||||
newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element);
|
||||
},
|
||||
|
||||
@ -433,6 +434,10 @@ export const mutations: MutationTree<State> & Mutations = {
|
||||
state.ui.visibleElements.clear();
|
||||
}
|
||||
|
||||
if(payload.state || state.ui.visibleElements.has(payload.element)) {
|
||||
state.ui.previouslyVisibleElements.add(payload.element);
|
||||
}
|
||||
|
||||
payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
|
||||
},
|
||||
|
||||
|
@ -61,6 +61,7 @@ export type State = {
|
||||
ui: {
|
||||
smallScreen: boolean;
|
||||
visibleElements: Set<DynmapUIElement>;
|
||||
previouslyVisibleElements: Set<DynmapUIElement>;
|
||||
};
|
||||
|
||||
parsedUrl: DynmapParsedUrl;
|
||||
@ -171,6 +172,7 @@ export const state: State = {
|
||||
ui: {
|
||||
smallScreen: false,
|
||||
visibleElements:new Set(),
|
||||
previouslyVisibleElements: new Set(),
|
||||
},
|
||||
|
||||
parsedUrl: {
|
||||
|
Loading…
Reference in New Issue
Block a user