audio-vis/raw/javascript/notification.js

class NotificationHandler {
    static instance = new NotificationHandler();

    constructor() {
        this.outer = $('.notification');
        this.notifications = [];
    }

    async init() {
        await template.loadTemplate('notification');
    }

    static createNotification(message, type, time) {
        time = parseInt(time || "3000");
        let handler = NotificationHandler.instance,
            not = new Notification(message, type, time);
        handler.notifications.push(not);
        not.show();
        return not;
    }
}

class Notification {
    constructor(message, type, time) {
        this.outer = NotificationHandler.instance.outer;
        this.message = message;
        this.type = type;
        this.time = time;
        this.isRemoved = false;
    }

    async show() {
        let self = this,
            endless = self.time === -1;

        self.item = create('div');
        self.item.addClass('notification-item, ' + self.type);
        if (endless) {
            self.type += ' endless';
        }
        self.updateContent(self.message);
        this.outer.prepend(self.item);
        if (!endless) {
            setTimeout(this.remove.bind(this), self.time)
        }
    }

    async remove() {
        if (this.isRemoved) {
            return;
        }
        this.isRemoved = true;
        this.outer.removeChild(this.item);
        let not = NotificationHandler.instance.notifications,
            index = not.indexOf(this);
        not.splice(index, 1);
        delete this;
    }

    updateContent(message) {
        let self = this,
            isEndless = self.time === -1,
            data = {
                message: message,
                time: isEndless ? 1000 : self.time + 1,
                type: self.type,
            }
        this.item.innerHTML = template.parseTemplate('notification', data);
    }

    updateMessageOnly(message) {
        let item = $('.message', this.item);
        if (item) {
            item.innerHTML = message;
        }
    }
}