On ferme le modal avec le retour du navigateur

src/agenda_culturel/static/js/modal.js

@@ -23,26 +23,46 @@ const isModalOpen = (modal) => {
 };
 
 // Open modal
-const openModal = (modal) => {
+const openModal = (modal, back=true) => {
   if (isScrollbarVisible()) {
     document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
   }
   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() {
     visibleModal = modal;
   }, 500);
 };
 
-// Close modal
-const closeModal = (modal) => {
-  if (escapeOk) {
+const hideModal = (modal) => {
+  if (modal != null) {
     visibleModal = null;
     document.documentElement.style.removeProperty("--scrollbar-width");
     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
 document.addEventListener("click", (event) => {
   if (visibleModal != null) {
@@ -59,6 +79,7 @@ document.addEventListener("keydown", (event) => {
   }
 });
 
+
 // Get scrollbar width
 const getScrollbarWidth = () => {
   // Creating invisible container
@@ -84,4 +105,13 @@ const getScrollbarWidth = () => {
 // Is scrollbar visible
 const isScrollbarVisible = () => {
   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);
+  }
+
+});

src/agenda_culturel/static/style.scss

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