On ferme le modal avec le retour du navigateur

This commit is contained in:
Jean-Marie Favreau 2024-09-01 17:10:42 +02:00
parent 6d3033ba37
commit 2dde114ad8
2 changed files with 37 additions and 6 deletions

View File

@ -23,26 +23,46 @@ const isModalOpen = (modal) => {
}; };
// Open modal // Open modal
const openModal = (modal) => { const openModal = (modal, back=true) => {
if (isScrollbarVisible()) { if (isScrollbarVisible()) {
document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`); document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
} }
modal.setAttribute("open", true); modal.setAttribute("open", true);
console.log("visible, " + modal); if (back) {
window.history.pushState({ isPopup: true }, 'modal');
window.location.hash = modal.querySelector('header a.close').getAttribute('href');
}
setTimeout(function() { setTimeout(function() {
visibleModal = modal; visibleModal = modal;
}, 500); }, 500);
}; };
// Close modal const hideModal = (modal) => {
const closeModal = (modal) => { if (modal != null) {
if (escapeOk) {
visibleModal = null; visibleModal = null;
document.documentElement.style.removeProperty("--scrollbar-width"); document.documentElement.style.removeProperty("--scrollbar-width");
modal.removeAttribute("open"); modal.removeAttribute("open");
} }
}; };
// Close modal
const closeModal = (modal) => {
if (escapeOk) {
hideModal(modal);
window.history.back();
}
};
window.addEventListener('popstate', event => {
if (event.state?.isPopup) {
if (escapeOk) {
hideModal(visibleModal);
}
}
});
// Close with a click outside // Close with a click outside
document.addEventListener("click", (event) => { document.addEventListener("click", (event) => {
if (visibleModal != null) { if (visibleModal != null) {
@ -59,6 +79,7 @@ document.addEventListener("keydown", (event) => {
} }
}); });
// Get scrollbar width // Get scrollbar width
const getScrollbarWidth = () => { const getScrollbarWidth = () => {
// Creating invisible container // Creating invisible container
@ -84,4 +105,13 @@ const getScrollbarWidth = () => {
// Is scrollbar visible // Is scrollbar visible
const isScrollbarVisible = () => { const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height; return document.body.scrollHeight > screen.height;
}; };
document.addEventListener("DOMContentLoaded", function(e) {
if (window.location.hash != "") {
const modal = document.getElementById(window.location.hash.substring(1, window.location.hash.length));
if (modal != null)
openModal(modal, false);
}
});

View File

@ -45,6 +45,7 @@ $enable-responsive-typography: true;
} }
body>footer { body>footer {
text-align: center; text-align: center;
font-size: 90%; font-size: 90%;