Recently at work I needed to implement a message queue. I like the pattern and I think I will need it more often in the future. I recreated the message queue with a class for personal reference and study purposes.

I absolutely like some of the new features: for example proper ‘this’ binding with the arrow functions and parameter defaults in function.

Code

you can see the full code below, or get the example from my github account

/**
 * MessageQueue create notification messages
 */
class MessageQueue {


    /**
     * constructor optional container and delay
     */
    constructor(container = document.getElementById('messageContainer'), delay = 5000) {
        this.messageQueue = [];
        this.container = container;
        this.delay = delay;
    }

    clearMessages() {
        this.container.innerHTML = '';
    }

    displayMessages() {
        let messageFrag = document.createElement('div');

        // clear
        this.clearMessages();

        for (let index = 0; index < this.messageQueue.length; index++) {
            let message = document.createTextNode(this.messageQueue[index].text);
            let flash = document.createElement('div');

            flash.classList.add('flash-message');
            flash.classList.add(this.messageQueue[index].msgType);
            flash.appendChild(message);

            messageFrag.appendChild(flash);

        }
        this.container.appendChild(messageFrag);
    }

    remove() {
        this.messageQueue.shift();
        this.displayMessages();
    }

    /**
     * add messages optional type (CSS class)
     */
    add(message, type = 'error') {
        let msg = {
            text: message,
            index: this.messageQueue.length,
            msgType: type,
        };

        setTimeout(() => this.remove(), this.delay);

        this.messageQueue.push(msg);
        this.displayMessages();
    }
}

Feel free to modify and extend the code, to run the code you need to install babel-cli and run the following watch statement

babel messagequeue.js --watch --out-file messagequeue-compiled.js