Spawn a updatable notification that includes a optional progress bar, styled with Bulma

notification_spawner.js

function spawnNotif(box, category, message, progressMax = 0) {
    const categories = {
        "error": "is-danger",
        "info": "is-info",
        "success": "is-success",
        "warning": "is-warning",
        "warn": "is-warning",
        "primary": "is-primary",
    }

    const notif = document.createElement("div");
    notif.classList.add("notification", "is-light");
    notif.innerHTML = '<button class="delete" onclick="this.parentElement.remove()"></button>';

    const progress = document.createElement('progress');
    progress.classList.add('progress', "is-light");
    progress.textContent = 'Loading';

    const msgBlock = document.createElement('div');
    msgBlock.classList.add('block', 'content');

    const progBlock = document.createElement('div');
    progBlock.classList.add('block');
    progBlock.appendChild(progress)

    notif.append(msgBlock);
    if (progressMax) {
        notif.appendChild(progBlock);
    }

    notif.msgBlock = msgBlock
    notif.progBlock = progBlock
    notif.progress = progress
    Object.defineProperties(notif, {
        category: {
            get() {
                return notif._category;
            },
            set(cat) {
                notif._category = cat
                const newClass = categories[cat] || "is-primary"
                notif.classList.remove(...Object.values(categories));
                progress.classList.remove(...Object.values(categories));
                notif.classList.add(newClass);
                progress.classList.add(newClass);
            },
        },
        message: {
            get() {
                return msgBlock.innerHTML;
            },
            set(msg) {
                msgBlock.innerHTML = msg;
            },
        },
        barValue: {
            get() {
                return progress.value;
            },
            set(val) {
                progress.value = val;
                progress.textContent = `${Math.round(100 * val / progress.max)}%`;
            },
        },
        barMax: {
            get() {
                return progress.max;
            },
            set(val) {
                progress.max = val;
                if (val && !notif.contains(progBlock)) {
                    notif.appendChild(progBlock);
                } else if (!val && notif.contains(progBlock)) {
                    notif.removeChild(progBlock);
                }
            },
        }
    });

    notif.category = category
    notif.message = message
    notif.barMax = progressMax

    box.appendChild(notif);

    return notif
}