Move splash methods to Util

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();

src/dynmap.d.ts

@@ -24,9 +24,6 @@ declare global {
 	interface Window {
 		config: { url: DynmapUrlConfig };
 		liveAtlasConfig: any,
-		hideSplash: Function;
-		showSplash: Function;
-		showSplashError: Function;
 	}
 }
 

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);
 }

src/util.ts

@@ -344,3 +344,61 @@ export const getUrlForLocation = (world: DynmapWorld, map: DynmapWorldMap, locat
 
 		return `#${world.name};${map.name};${locationString};${zoom}`;
 }
+
+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()})`;
+		}
+	}
+};