Sindbad~EG File Manager

function displayProgress() {
    // Check if the modal already exists, if not, create it
    if (!document.getElementById('progressModal')) {
        // Create the modal structure dynamically
        var modal = document.createElement('div');
        modal.id = "progressModal";
        modal.style.position = "absolute"; // Position it absolutely
        modal.style.left = "50%"; // Center it horizontally
        modal.style.top = "50%"; // Center it vertically
        modal.style.transform = "translate(-75%, -50%)"; // Translate for true centering
        modal.style.backgroundColor = "lightblue"; 
        modal.style.padding = "20px";
        modal.style.border = "1px solid #888"; // Border
        modal.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.2)"; // Optional shadow
        modal.style.overflowY = "auto"; // Enable scrolling if content overflows
        modal.style.maxHeight = "80vh"; // Set a max height to prevent too large modal
        modal.style.width = "200px"; // Width of the modal
        modal.style.zIndex = "1000"; // Ensure modal is above other elements

        // Create a close button
        var closeButton = document.createElement('button');
        closeButton.textContent = "X";
        closeButton.style.position = "absolute";
        closeButton.style.top = "5px";
        closeButton.style.right = "5px";
        closeButton.style.background = "red";
        closeButton.style.color = "white";
        closeButton.style.border = "none";
        closeButton.style.cursor = "pointer";
        closeButton.onclick = function() {
            closeModal();
        };

        // Create a smaller title area
        var modalTitle = document.createElement('div');
        modalTitle.className = "progressTitle";
        modalTitle.style.fontSize = "14px"; // Set the font size for the title
        modalTitle.style.fontWeight = "bold";
        modalTitle.style.marginBottom = "0px"; // Space below the title

        var progressContainer = document.createElement('div');
        progressContainer.id = "progressContainer";
        progressContainer.style.position = "relative"; // Positioning relative for child elements
        progressContainer.style.width = "100%"; // Adjust to modal width

        modal.appendChild(closeButton); // Add close button to the modal
        modal.appendChild(modalTitle);
        modal.appendChild(progressContainer);
        document.body.appendChild(modal); // Append modal to the body

        // Close the modal with the Esc key
        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeModal();
            }
        });

        // Detect clicks outside the modal
        document.addEventListener('click', function(event) {
            if (!modal.contains(event.target) && event.target !== modal) {
                closeModal();
            }
        });

    } else {
        // If the modal already exists, just make it visible
        var modal = document.getElementById('progressModal');
        modal.style.display = "block";
    }

    // Set the modal title from the first element with class "progressTitle"
    var titleElement = document.querySelector(".progressTitle");
    if (titleElement) {
        var modalTitle = modal.querySelector("div.progressTitle");
        modalTitle.textContent = titleElement.textContent;
    }

    // Get all elements with class "progress" and display them vertically in the modal
    var progressItems = document.querySelectorAll(".progress");
    var progressContainer = document.getElementById("progressContainer");
    progressContainer.innerHTML = ""; // Clear previous content

    var currentTop = 0; // Start at 0 for proper alignment
    progressItems.forEach(function(item) {
        var progressClone = item.cloneNode(true); // Clone the SVG element
        progressClone.style.position = "absolute"; // absolute so coordinates are relative to the container
        progressClone.style.display = "block"; // Make sure it's visible
        progressClone.style.top = currentTop + "px"; // Set top position

        // Append the cloned SVG to the progress container
        progressContainer.appendChild(progressClone);

        // Use the height from the Engine and stack elements accordingly
        var height = item.getAttribute('height') || 30; // Use the 'height' attribute or default to 30
        currentTop += parseInt(height); // Directly add the height without extra spacing adjustment
    });

    // Dynamically resize the modal to fit the content
    var totalHeight = currentTop + 20; // Total height of all SVGs plus some padding
    modal.style.height = totalHeight + "px"; // Set the height of the modal dynamically

    // Helper function to close the modal
    function closeModal() {
        modal.style.display = "none";
    }
}