🚸 When in edit mode, show confirmation before leaving page

This commit is contained in:
Alicia Sykes 2021-12-29 20:06:19 +00:00
parent 7f4948aa04
commit 93a6ec08ba
1 changed files with 19 additions and 7 deletions

View File

@ -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>