mirror of https://github.com/lissy93/dashy
🚸 When in edit mode, show confirmation before leaving page
This commit is contained in:
parent
7f4948aa04
commit
93a6ec08ba
26
src/App.vue
26
src/App.vue
|
@ -35,6 +35,12 @@ export default {
|
||||||
isLoading: true, // Set to false after mount complete
|
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: {
|
computed: {
|
||||||
/* If the user has specified custom text for footer - get it */
|
/* If the user has specified custom text for footer - get it */
|
||||||
footerText() {
|
footerText() {
|
||||||
|
@ -76,7 +82,7 @@ export default {
|
||||||
/* Hide splash screen, either after 2 seconds, or immediately based on user preference */
|
/* Hide splash screen, either after 2 seconds, or immediately based on user preference */
|
||||||
hideSplash() {
|
hideSplash() {
|
||||||
if (this.shouldShowSplash) {
|
if (this.shouldShowSplash) {
|
||||||
setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1500);
|
setTimeout(() => { this.isLoading = false; }, splashScreenTime || 1000);
|
||||||
} else {
|
} else {
|
||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
}
|
}
|
||||||
|
@ -117,21 +123,27 @@ export default {
|
||||||
this.$i18n.locale = language;
|
this.$i18n.locale = language;
|
||||||
document.getElementsByTagName('html')[0].setAttribute('lang', language);
|
document.getElementsByTagName('html')[0].setAttribute('lang', language);
|
||||||
},
|
},
|
||||||
|
/* If placeholder element still visible, hide it */
|
||||||
hideLoader() {
|
hideLoader() {
|
||||||
const loader = document.getElementById('loader');
|
const loader = document.getElementById('loader');
|
||||||
if (loader) loader.style.display = 'none';
|
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() {
|
mounted() {
|
||||||
this.applyLanguage();
|
this.applyLanguage(); // Apply users local language
|
||||||
this.hideSplash();
|
this.hideSplash(); // Hide the splash screen, if visible
|
||||||
if (this.appConfig.customCss) {
|
if (this.appConfig.customCss) { // Inject users custom CSS, if present
|
||||||
const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
|
const cleanedCss = this.appConfig.customCss.replace(/<\/?[^>]+(>|$)/g, '');
|
||||||
this.injectCustomStyles(cleanedCss);
|
this.injectCustomStyles(cleanedCss);
|
||||||
this.hideLoader();
|
|
||||||
}
|
}
|
||||||
welcomeMsg();
|
this.hideLoader(); // If initial placeholder still visible, hide it
|
||||||
|
welcomeMsg(); // Show message in console
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue