infobox

static/js/modal.js

@@ -0,0 +1,71 @@
+// Modal functionality for ISO info popups
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Get modal elements
+  const modal = document.getElementById("isoModal");
+  const modalContent = document.getElementById("modalContent");
+  const closeBtn = document.querySelector(".close-btn");
+  const modalOverlay = document.querySelector(".modal-overlay");
+
+  // Function to open modal with ISO info
+  function openModal(title, description, imageSrc) {
+    document.getElementById("modalTitle").textContent = title;
+    document.getElementById("modalDescription").textContent =
+      description || "No description available";
+
+    const modalImage = document.getElementById("modalImage");
+    if (imageSrc) {
+      modalImage.src = imageSrc;
+      modalImage.style.display = "block";
+    } else {
+      modalImage.style.display = "none";
+    }
+
+    modal.classList.add("visible");
+    document.body.style.overflow = "hidden";
+  }
+
+  // Function to close modal
+  function closeModal() {
+    modal.classList.remove("visible");
+    document.body.style.overflow = "";
+  }
+
+  // Event listeners for close button and overlay
+  if (closeBtn) {
+    closeBtn.addEventListener("click", closeModal);
+  }
+
+  if (modalOverlay) {
+    modalOverlay.addEventListener("click", function (e) {
+      if (e.target === modalOverlay) {
+        closeModal();
+      }
+    });
+  }
+
+  // Close modal when Escape key is pressed
+  document.addEventListener("keydown", function (e) {
+    if (e.key === "Escape" && modal.style.display === "block") {
+      closeModal();
+    }
+  });
+
+  // Add click handlers to all ISO info buttons
+  const infoButtons = document.querySelectorAll(".info-btn");
+  infoButtons.forEach((button) => {
+    button.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      const isoName = this.getAttribute("data-iso-name");
+      const description = this.getAttribute("data-description");
+      const imageSrc = this.getAttribute("data-image-src");
+
+      openModal(isoName, description, imageSrc);
+    });
+  });
+
+  // Expose functions to global scope for potential future use
+  window.openISOModal = openModal;
+  window.closeISOModal = closeModal;
+});