diff --git a/src/App.vue b/src/App.vue index 95378848..d669556f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -35,6 +35,12 @@ export default { isLoading: true, // Set to false after mount complete }; }, + watch: { + isEditMode(isEditMode) { + // When in edit mode, show confirmation dialog on page exit + window.onbeforeunload = isEditMode ? this.confirmExit : null; + }, + }, computed: { /* If the user has specified custom text for footer - get it */ footerText() { @@ -76,7 +82,7 @@ export default { /* Hide splash screen, either after 2 seconds, or immediately based on user preference */ hideSplash() { if (this.shouldShowSplash) { - setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500); + setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1000); } else { this.isLoading = false; } @@ -117,21 +123,27 @@ export default { this.$i18n.locale = language; document.getElementsByTagName('html')[0].setAttribute('lang', language); }, + /* If placeholder element still visible, hide it */ hideLoader() { const loader = document.getElementById('loader'); if (loader) loader.style.display = 'none'; }, + /* Called when in edit mode and navigating away from page */ + confirmExit(e) { + e.preventDefault(); + return 'You may have unsaved edits. Are you sure you want to exit the page?'; + }, }, - /* When component mounted, hide splash and initiate the injection of custom styles */ + /* Basic initialization tasks on app load */ mounted() { - this.applyLanguage(); - this.hideSplash(); - if (this.appConfig.customCss) { + this.applyLanguage(); // Apply users local language + this.hideSplash(); // Hide the splash screen, if visible + if (this.appConfig.customCss) { // Inject users custom CSS, if present const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, ''); this.injectCustomStyles(cleanedCss); - this.hideLoader(); } - welcomeMsg(); + this.hideLoader(); // If initial placeholder still visible, hide it + welcomeMsg(); // Show message in console }, };