newosinadjango/osinaweb/static/js/pop-modals.js

document.addEventListener("DOMContentLoaded", function () {

    // Function to open the modal
    function openModal(url) {
        const modalContainer = document.getElementById("popUpModal");

        //Get the iframe element
        const iframe = document.getElementById("popupModalFrame");

        //Get the body element
        const body = document.body;

        //Disable scrolling
        body.style.overflow = "hidden";

        //Set the URL of the iframe to load the external content
        iframe.src = url;

        //Display the modal
        modalContainer.style.display = "flex";
    }

    //Function to close the modal
    function closeModal() {
        const modalContainer = document.getElementById("popUpModal");

        const iframe = document.getElementById("popupModalFrame");

        //Clear the URL to stop loading the content
        iframe.src = "";

        const body = document.body;

        //Enable scrolling
        body.style.overflow = "auto";

        //Hide the modal
        modalContainer.style.display = "none";
    }


    const closeButton = document.getElementById("closeModalButton");

    closeButton.addEventListener("click", () => {
        closeModal();
    });

    const modalContainer = document.getElementById("popUpModal");
    // Event listener to trigger the modal when clicking outside of it
    window.addEventListener("click", function (event) {
        if (event.target === modalContainer) {
            closeModal();
        }
    });

    //ADD STATUS MODAL
    const addStatusButton = document.getElementById("addStatusButton");

    addStatusButton.addEventListener("click", () => {
        const modalUrl = addStatusButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "200px"
        iframe.style.width = "450px"
    });

    //ADD NOTE MODAL
    const addNoteButton = document.getElementById("addNoteButton");

    addNoteButton.addEventListener("click", () => {
        // Retrieve the URL from the data attribute
        const modalUrl = addNoteButton.getAttribute("data-modal-url");

        // Open the modal with the retrieved URL
        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "225px"
        iframe.style.width = "400px"
    });

    //ADD FILE MODAL (in the inner project page)
    const addFileButton = document.getElementById("addFileButton");

    addFileButton.addEventListener("click", () => {
        const modalUrl = addFileButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "320px"
        iframe.style.width = "500px"
    });


    //ADD CREDENTIALS MODAL (in the inner project page)
    const addCredentialsButton = document.getElementById("addCredentialsButton");

    addCredentialsButton.addEventListener("click", () => {
        const modalUrl = addCredentialsButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "300px"
        iframe.style.width = "500px"
    });


    //SHOW TASK MODALS
    //Show the update status modal
    const updateStatusButton = document.getElementById("updateStatusButton");

    updateStatusButton.addEventListener("click", () => {
        const modalUrl = updateStatusButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "160px"
        iframe.style.width = "fit-content"
    });


    //Show the show points modal
    const showPointsButton = document.getElementById("showPointsButton");

    showPointsButton.addEventListener("click", () => {
        const modalUrl = showPointsButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "450px"
        iframe.style.width = "600px"
    });

    //Show the add point modal
    const addPointButton = document.getElementById("addPointButton");

    addPointButton.addEventListener("click", () => {
        const modalUrl = addPointButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "225px"
        iframe.style.width = "500px"
    });

    //Show the Timeline modal
    const timelineButton = document.getElementById("timelineButton");

    timelineButton.addEventListener("click", () => {
        const modalUrl = timelineButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "450px"
        iframe.style.width = "600px"
    });

    //Show the add timeline modal
    const addTimeButton = document.getElementById("addTimeButton");

    addTimeButton.addEventListener("click", () => {
        const modalUrl = addTimeButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "270px"
        iframe.style.width = "300px"
    });

    //Show the delete task modal
    const deleteTaskButton = document.getElementById("deleteTaskButton");

    deleteTaskButton.addEventListener("click", () => {
        const modalUrl = deleteTaskButton.getAttribute("data-modal-url");

        openModal(modalUrl);

        const iframe = document.getElementById("popupModalFrame");
        iframe.style.height = "130px"
        iframe.style.width = "fit-content"
    });

});