From a616a302e89836d6123a13603044e7acbd4b6887 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Thu, 27 May 2021 00:50:34 +0100 Subject: [PATCH] Move splash methods to Util --- src/App.vue | 10 ++++----- src/dynmap.d.ts | 3 --- src/main.ts | 57 ++-------------------------------------------- src/util.ts | 60 ++++++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 66 insertions(+), 64 deletions(-) diff --git a/src/App.vue b/src/App.vue index 4bd5f12..2e22f54 100644 --- a/src/App.vue +++ b/src/App.vue @@ -28,7 +28,7 @@ import Sidebar from './components/Sidebar.vue'; import ChatBox from './components/ChatBox.vue'; import {useStore} from "@/store"; import {ActionTypes} from "@/store/action-types"; -import {parseUrl} from '@/util'; +import {hideSplash, parseUrl, showSplash, showSplashError} from '@/util'; import {MutationTypes} from "@/store/mutation-types"; import {LiveAtlasServerDefinition} from "@/index"; @@ -58,7 +58,7 @@ export default defineComponent({ await store.dispatch(ActionTypes.LOAD_CONFIGURATION, undefined); startUpdates(); requestAnimationFrame(() => { - window.hideSplash(); + hideSplash(); const map = document.getElementById('#app'); @@ -74,7 +74,7 @@ export default defineComponent({ const error = `Failed to load server configuration for '${store.state.currentServer!.id}'`; console.error(`${error}:`, e); - window.showSplashError(`${error}\n${e}`, false, ++configAttempts.value); + showSplashError(`${error}\n${e}`, false, ++configAttempts.value); setTimeout(() => loadConfiguration(), 1000); } }, @@ -136,7 +136,7 @@ export default defineComponent({ watch(title, (title) => document.title = title); watch(currentUrl, (url) => window.history.replaceState({}, '', url)); watch(currentServer, (newServer?: LiveAtlasServerDefinition) => { - window.showSplash(); + showSplash(); stopUpdates(); if(!newServer) { @@ -155,7 +155,7 @@ export default defineComponent({ }, {deep: true}); watch(configurationHash, (newHash, oldHash) => { if(newHash && oldHash) { - window.showSplash(); + showSplash(); stopUpdates(); store.commit(MutationTypes.CLEAR_PARSED_URL, undefined); loadConfiguration(); diff --git a/src/dynmap.d.ts b/src/dynmap.d.ts index cc31e3f..736f8ce 100644 --- a/src/dynmap.d.ts +++ b/src/dynmap.d.ts @@ -24,9 +24,6 @@ declare global { interface Window { config: { url: DynmapUrlConfig }; liveAtlasConfig: any, - hideSplash: Function; - showSplash: Function; - showSplashError: Function; } } diff --git a/src/main.ts b/src/main.ts index a5d5fdd..fd09aec 100644 --- a/src/main.ts +++ b/src/main.ts @@ -24,15 +24,11 @@ import '@/scss/style.scss'; import 'focus-visible'; import {MutationTypes} from "@/store/mutation-types"; -import {validateConfiguration} from "@/util"; +import {showSplashError, validateConfiguration} from "@/util"; import { VueClipboard } from '@soerenmartius/vue3-clipboard'; import Notifications from '@kyvg/vue3-notification' const splash = document.getElementById('splash'), - splashSpinner = document.getElementById('splash__spinner'), - splashError = document.getElementById('splash__error'), - splashErrorMessage = document.getElementById('splash__error-message'), - splashRetry = document.getElementById('splash__error-retry'), svgs = import.meta.globEager('/assets/icons/*.svg'); if(splash) { @@ -43,55 +39,6 @@ if(splash) { }); } -window.showSplash = function() { - if(!splash) { - return; - } - - splash.hidden = false; - - requestAnimationFrame(function() { - splash.style.opacity = '1'; - }); -}; - -window.hideSplash = function() { - if(!splash) { - return; - } - - requestAnimationFrame(function() { - splash.style.opacity = '0'; - - if(window.getComputedStyle(splash).opacity === '0') { - splash.hidden = true; - } - }); -}; - -window.showSplashError = function(message: string, fatal: boolean, attempts: number) { - if(splashError) { - splashError.setAttribute('aria-hidden', 'false'); - } - - if(splashErrorMessage) { - splashErrorMessage.innerText = message || 'Unknown error'; - } - - if(splashSpinner && fatal) { - splashSpinner.style.visibility = 'hidden'; - } - - if(splashRetry) { - if(fatal) { - splashRetry.hidden = true; - } else if(attempts) { - splashRetry.hidden = false; - splashRetry.textContent = `Retrying... (${attempts.toString()})`; - } - } -}; - console.info(`LiveAtlas version ${store.state.version} - https://github.com/JLyne/LiveAtlas`); try { @@ -122,5 +69,5 @@ try { app.mount('#app'); } catch(e) { console.error('LiveAtlas configuration is invalid: ', e); - window.showSplashError('LiveAtlas configuration is invalid\n' + e, true); + showSplashError('LiveAtlas configuration is invalid\n' + e, true); } diff --git a/src/util.ts b/src/util.ts index 7edcfd0..d4453fd 100644 --- a/src/util.ts +++ b/src/util.ts @@ -343,4 +343,62 @@ export const getUrlForLocation = (world: DynmapWorld, map: DynmapWorldMap, locat } return `#${world.name};${map.name};${locationString};${zoom}`; -} \ No newline at end of file +} + +const app = document.getElementById('app'), + splash = document.getElementById('splash'), + splashSpinner = document.getElementById('splash__spinner'), + splashError = document.getElementById('splash__error'), + splashErrorMessage = document.getElementById('splash__error-message'), + splashRetry = document.getElementById('splash__error-retry'); + +export const showSplash = function() { + if(!splash || !app) { + return; + } + + splash.hidden = false; + app.setAttribute('aria-hidden', 'true'); + + requestAnimationFrame(function() { + splash.style.opacity = '1'; + }); +}; + +export const hideSplash = () => { + if(!splash || !app) { + return; + } + + requestAnimationFrame(() => { + splash.style.opacity = '0'; + app.removeAttribute('aria-hidden'); + + if(window.getComputedStyle(splash).opacity === '0') { + splash.hidden = true; + } + }); +}; + +export const showSplashError = (message: string, fatal: boolean, attempts?: number) => { + if(splashError) { + splashError.setAttribute('aria-hidden', 'false'); + } + + if(splashErrorMessage) { + splashErrorMessage.innerText = message || 'Unknown error'; + } + + if(splashSpinner && fatal) { + splashSpinner.style.visibility = 'hidden'; + } + + if(splashRetry) { + if(fatal) { + splashRetry.hidden = true; + } else if(attempts) { + splashRetry.hidden = false; + splashRetry.textContent = `Retrying... (${attempts.toString()})`; + } + } +}; \ No newline at end of file