Don't focus sidebar sections due to expandUI on initial load

This commit is contained in:
James Lyne 2022-01-14 11:30:52 +00:00
parent fc55d56692
commit ef28afaceb
5 changed files with 19 additions and 5 deletions

View File

@ -68,6 +68,7 @@ export default defineComponent({
const store = useStore(), const store = useStore(),
sidebar = ref<HTMLElement | null>(null), sidebar = ref<HTMLElement | null>(null),
firstLoad = computed(() => store.state.firstLoad),
currentlyVisible = computed(() => store.state.ui.visibleElements), currentlyVisible = computed(() => store.state.ui.visibleElements),
previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements), previouslyVisible = computed(() => store.state.ui.previouslyVisibleElements),
smallScreen = computed(() => store.state.ui.smallScreen), smallScreen = computed(() => store.state.ui.smallScreen),
@ -119,8 +120,9 @@ export default defineComponent({
const focusMaps = () => focus('.section__heading button'); const focusMaps = () => focus('.section__heading button');
const focusPlayers = () => focus('#players-heading'); const focusPlayers = () => focus('#players-heading');
watch(playersVisible, newValue => newValue && nextTick(() => focusPlayers())); //Focus sidebar sections when they become visible, except on initial load
watch(mapsVisible, newValue => newValue && nextTick(() => focusMaps())); watch(playersVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusPlayers()));
watch(mapsVisible, newValue => newValue && !firstLoad.value && nextTick(() => focusMaps()));
return { return {
sidebar, sidebar,

View File

@ -25,6 +25,7 @@ import {
DynmapTileUpdate, DynmapTileUpdate,
} from "@/dynmap"; } from "@/dynmap";
import {LiveAtlasMarkerSet, LiveAtlasPlayer, LiveAtlasWorldDefinition} from "@/index"; import {LiveAtlasMarkerSet, LiveAtlasPlayer, LiveAtlasWorldDefinition} from "@/index";
import {nextTick} from "vue";
type AugmentedActionContext = { type AugmentedActionContext = {
commit<K extends keyof Mutations>( commit<K extends keyof Mutations>(
@ -96,8 +97,8 @@ export const actions: ActionTree<State, State> & Actions = {
await state.currentMapProvider!.loadServerConfiguration(); await state.currentMapProvider!.loadServerConfiguration();
//Skip default map/ui visibility logic if we already have a map selected (i.e config reload after hash change) //Skip default map/ui visibility logic if not first load (i.e config reload after hash change)
if(state.currentMap) { if(!state.firstLoad) {
return; return;
} }
@ -148,6 +149,8 @@ export const actions: ActionTree<State, State> & Actions = {
worldName, mapName worldName, mapName
}); });
} }
await nextTick(() => commit(MutationTypes.SET_LOADED, undefined));
}, },
async [ActionTypes.START_UPDATES]({state}) { async [ActionTypes.START_UPDATES]({state}) {

View File

@ -36,6 +36,7 @@ export enum MutationTypes {
SET_MAX_PLAYERS = 'setMaxPlayers', SET_MAX_PLAYERS = 'setMaxPlayers',
SET_PLAYERS_ASYNC = 'setPlayersAsync', SET_PLAYERS_ASYNC = 'setPlayersAsync',
SYNC_PLAYERS = 'syncPlayers', SYNC_PLAYERS = 'syncPlayers',
SET_LOADED = 'setLoaded',
SET_CURRENT_SERVER = 'setCurrentServer', SET_CURRENT_SERVER = 'setCurrentServer',
SET_CURRENT_MAP = 'setCurrentMap', SET_CURRENT_MAP = 'setCurrentMap',

View File

@ -30,7 +30,6 @@ import {
LiveAtlasWorldDefinition, LiveAtlasWorldDefinition,
LiveAtlasParsedUrl, LiveAtlasParsedUrl,
LiveAtlasGlobalConfig, LiveAtlasGlobalConfig,
LiveAtlasGlobalMessageConfig,
LiveAtlasServerMessageConfig, LiveAtlasServerMessageConfig,
LiveAtlasPlayer, LiveAtlasPlayer,
LiveAtlasCircleMarker, LiveAtlasCircleMarker,
@ -78,6 +77,7 @@ export type Mutations<S = State> = {
[MutationTypes.SET_MAX_PLAYERS](state: S, maxPlayers: number): void [MutationTypes.SET_MAX_PLAYERS](state: S, maxPlayers: number): void
[MutationTypes.SET_PLAYERS_ASYNC](state: S, players: Set<LiveAtlasPlayer>): Set<LiveAtlasPlayer> [MutationTypes.SET_PLAYERS_ASYNC](state: S, players: Set<LiveAtlasPlayer>): Set<LiveAtlasPlayer>
[MutationTypes.SYNC_PLAYERS](state: S, keep: Set<string>): void [MutationTypes.SYNC_PLAYERS](state: S, keep: Set<string>): void
[MutationTypes.SET_LOADED](state: S, a?: void): void
[MutationTypes.SET_CURRENT_SERVER](state: S, server: string): void [MutationTypes.SET_CURRENT_SERVER](state: S, server: string): void
[MutationTypes.SET_CURRENT_MAP](state: S, payload: CurrentMapPayload): void [MutationTypes.SET_CURRENT_MAP](state: S, payload: CurrentMapPayload): void
[MutationTypes.SET_CURRENT_LOCATION](state: S, payload: Coordinate): void [MutationTypes.SET_CURRENT_LOCATION](state: S, payload: Coordinate): void
@ -455,6 +455,11 @@ export const mutations: MutationTree<State> & Mutations = {
} }
}, },
//Sets flag indicating LiveAtlas has fully loaded
[MutationTypes.SET_LOADED](state: State) {
state.firstLoad = false;
},
//Sets the currently active server //Sets the currently active server
[MutationTypes.SET_CURRENT_SERVER](state: State, serverName) { [MutationTypes.SET_CURRENT_SERVER](state: State, serverName) {
if(!state.servers.has(serverName)) { if(!state.servers.has(serverName)) {

View File

@ -43,6 +43,8 @@ import {getMessages} from "@/util";
export type State = { export type State = {
version: string; version: string;
firstLoad: boolean;
servers: Map<string, LiveAtlasServerDefinition>; servers: Map<string, LiveAtlasServerDefinition>;
configuration: LiveAtlasServerConfig; configuration: LiveAtlasServerConfig;
configurationHash: number | undefined; configurationHash: number | undefined;
@ -100,6 +102,7 @@ export type State = {
export const state: State = { export const state: State = {
version: (process.env.VITE_APP_VERSION || 'Unknown') as string, version: (process.env.VITE_APP_VERSION || 'Unknown') as string,
firstLoad: true,
servers: new Map(), servers: new Map(),
configuration: { configuration: {