Move splash methods to Util
This commit is contained in:
parent
6f11542b33
commit
a616a302e8
10
src/App.vue
10
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();
|
||||
|
3
src/dynmap.d.ts
vendored
3
src/dynmap.d.ts
vendored
@ -24,9 +24,6 @@ declare global {
|
||||
interface Window {
|
||||
config: { url: DynmapUrlConfig };
|
||||
liveAtlasConfig: any,
|
||||
hideSplash: Function;
|
||||
showSplash: Function;
|
||||
showSplashError: Function;
|
||||
}
|
||||
}
|
||||
|
||||
|
57
src/main.ts
57
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);
|
||||
}
|
||||
|
60
src/util.ts
60
src/util.ts
@ -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()})`;
|
||||
}
|
||||
}
|
||||
};
|
Loading…
Reference in New Issue
Block a user