www/alert.js

/** @module alert */
const alertFadeDuration = 1000;

let alertContainer;

/**
 * Send an alert message to the user.
 * @param {string} message - The message to display.
 * @param {number} [timeout=5000] - The time in milliseconds before the alert is removed.
 */
export const sendAlert = (alertType, alertMessage = "", timeout = 10000) => {
    if (alertType instanceof Error) {
        alertMessage = alertType.message;
        if (/^(\w+):/.test(alertMessage)) {
            alertType = alertMessage.match(/^(\w+):/)[1];
            alertMessage = alertMessage.replace(/^(\w+):/, "");
        } else {
            alertType = "Error";
        }
    }
    const alertElement = document.createElement("div");
    const alertRemoveButton = document.createElement("button");
    const alertProgressBar = document.createElement("div");
    const alertHeader = document.createElement("h2");
    const alertBody = document.createElement("p");
    alertElement.classList.add("alert");
    alertRemoveButton.innerHTML = "×";
    alertRemoveButton.classList.add("close");
    alertProgressBar.classList.add("progress-bar");
    alertProgressBar.style.animationDuration = `${timeout}ms`;
    alertHeader.innerText = alertType;
    alertBody.innerText = alertMessage;
    alertElement.appendChild(alertHeader);
    alertElement.appendChild(alertBody);
    alertElement.appendChild(alertRemoveButton);
    alertElement.appendChild(alertProgressBar);

    if (!alertContainer) {
        alertContainer = document.createElement("div");
        alertContainer.classList.add("alert-container");
        document.body.appendChild(alertContainer);
    }

    alertContainer.appendChild(alertElement);

    const removeAlert = () => {
        alertElement.classList.add("hiding");
        setTimeout(() => {
            alertElement.remove();
        }, alertFadeDuration);
    };

    const removeTimeout = setTimeout(removeAlert, timeout);

    alertRemoveButton.onclick = () => {
        clearTimeout(removeTimeout);
        removeAlert();
    };
};