Move splash methods to Util

This commit is contained in:
James Lyne 2021-05-27 00:50:34 +01:00
parent 6f11542b33
commit a616a302e8
4 changed files with 66 additions and 64 deletions

View File

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

3
src/dynmap.d.ts vendored
View File

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

View File

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

View File

@ -343,4 +343,62 @@ 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()})`;
}
}
};