isosilo/static/js/modal.js

// 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) {
        // Change: Check for the "visible" class instead of style.display
        if (e.key === "Escape" && modal.classList.contains("visible")) {
            closeModal();
        }
    });

    // Add click handlers to all ISO info buttons
    // Change: Use the new ".info-trigger" class you added to the HTML
    const infoButtons = document.querySelectorAll(".info-trigger");
    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;
});