Onscreen messages using vue

messages.vue

<template>
    <div class="messageContainer" v-if="messagesVisible && messages.length > 0">
        <div class="messageOperations" v-if="messages.length > 1">
            <div style="float: left; color: #FFFFFF;">Hi, There . . </div>
            <span class="fa fa-close" v-on:click="closeAll">Close All</span> &nbsp; 
            &nbsp;<span class="fa fa-angle-double-right" v-on:click='hide'>Hide</span>
        </div>
        <div v-for='x in messages' class="message">
            <div class="colorbar" v-bind:style="{ background: x.color }">
                <label class="fa" v-bind:class="x.fa_icon"></label>
            </div>
            <div class="messageText">
                <span class="closeBtn fa fa-close" v-on:click='removeMessage($index)' v-if="!x.required"></span>
                <span v-text='x.message'>
            </div>
            <div class="messageControl" v-if="x.control">
                <input type="checkbox" v-model="x.value" v-if="x.control == 'checkbox'"></input>
                <span v-text="x.label"></span>
                <input v-model="x.value" type="text" v-if="x.control == 'input'"></input>
                <span v-text='x.go_label' class="btn" v-on:click="messageAction($index)"></span>
            </div>
        </div>
    </div>
    <div class="messageIndication fa  fa-comments" v-if="messages.length > 0 && !messagesVisible" v-on:click="unhide">
        <span v-text="messages.length"></span>
    </div>
</template>

<style>

span.closeBtn {
    float: right;
    margin-top: -3px;
    margin-right: -3px;
    padding: 6px;
    padding-left: 10px;
    cursor: pointer;
    border-bottom-left-radius: 5px;
    background: #2b98f0;
    color: #FFFFFF;
}

div.messageIndication {
    position: fixed;
    width: 40px;
    bottom: 5px;
    right: 5px;
    background: #2b98f0;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
    padding: 5px;
}

div.messageOperations {
    font-family: 'Gotham-Medium';
    font-size: 8pt;
    text-align: right;
    padding: 6px;
    background: #2b98f0;
    border-radius: 5px;
    margin: 5px;
}

div.messageOperations span {
    background: #2b98f0;
    border-radius: 2px;
    padding: 3px;
    cursor: pointer;
    color: #FFFFFF;
}

div.messageContainer {
    position: fixed;
    width: 250px;
    bottom: 30px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    padding: 3px;
}

div.messageContainer:before {
    filter: blur(1px);
}

div.message {
    margin: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.9);
    font-family: 'Gotham-Book';
    font-size: 8pt;
    position: relative;
    overflow: hidden;
}

div.colorbar {
    width: 20px;
    height: 100%;
    position: absolute;
    text-align: center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding-top: 10px;
    background: rgba(255,0,0,0.5);
    top: 0;
    left: 0;
    height: 200px;
}

div.messageText {
    padding: 3px;
    overflow: auto;
    height: 49px;
    margin-left: 20px;
    margin-bottom: 2px;
    color: rgb(127,127,127);
}

div.messageControl {
    padding: 3px;
    overflow: hidden;
    height: 15px;
    margin-left: 20px;
    border-top: 1px gray solid;
}

div.messageControl input {
    height: 10px;
    padding: 1px;
}

div.messageControl input[type=text] {
    width: 60px;
}

div.messageControl input[type=checkbox] {
    width: 10px;
}

div.messageControl span.btn {
    background: #2b98f0;
    border-radius: 2px;
    padding: 1px;
    cursor: pointer;
    color: #FFFFFF;
}

</style>

<script>
function call_me(value)
{
    console.log('I am called now with '+value)
}

export default {
    data: function() {
        return {
            'messagesVisible': false,
            'timeout': null,
            'messages': [ /*
                {
                    message: 'Hello, this is a very very very very very very very looooooooooooong message that is intended to have some kind of overflow. Hello, this is a very very very very very very very looooooooooooong message that is intended to have some kind of overflow',
                }, 
                {
                    message: 'Another message.  Hello, this is a very very very very very very very looooooooooooong message that is intended to have some kind of overflow. Hello, this is a very very very very very very very looooooooooooong message that is intended to have some kind of overflow',
                    fa_icon:{ 'fa-envelope': true },
                    
                    // Optional for a checkbox message
                    control: 'checkbox',
                    label:   'Do not show in future',
                    go_label: 'go',
                    required: false,
                    on_action: call_me
                },
                {
                    message: 'please provide feedback',
                    fa_icon:{ 'fa-star': true },
                    
                    // Optional for a checkbox message
                    control: 'input',
                    label:   'Enter an amount',
                    go_label: 'done',
                    required: true,
                    on_action: call_me,
                    color: 'red'
                },
                {
                    message: 'We have managed to keep the things at bay',
                    fa_icon:{ 'fa-star': true },
                    
                    // Optional for a checkbox message
                    control: 'button',
                    label:   'Press Ack: ',
                    go_label: 'Acknowledge',
                    required: true,
                    on_action: call_me,
                    color: 'blue'
                }*/
            ]
        }
    },
    events: {
       'add-new-message': function(message) {
       /**
        * A message object can have the following attributes: 
        *
        * message - Message to be displayed.
        * color - Color of the side bar
        * required - When true, there is no close button
        * control - One of 'button', 'checkbox' or 'input' 
        * go_label - What should be hte name of button to dismiss
        * label - Label to be displayed in the control area
        * icon - Icon to be displayed in the sidebar
        * remove_after - Automatically remove from the message list after this time
        *
        * In addition each message can contain:
        *  on_action - Function to be called when the go action is performed.
        *  on_close  - Function to be called when the message is closed. 
        *       (on close is always called even if the close is due to go button)
        *       (not called if the message is expired)
        */
            if(!message.color) {
                message.color = 'rgba(255,0,0,0.5);'
            }
            
            if(message.control && !message.go_label) {
                message.go_label = 'Go'
            }
            
            if(!message.icon) {
                message.fa_icon = {'fa-star': true}
            } else {
                message.fa_icon = {}
                message.fa_icon[message.icon] = true;
            }
            
            
            
            this.messages.unshift(message);

            // Show the messages and cancel any existing timer
            this.unhide();
            this.hideAfter(5000);
            
            if (message.remove_after) {
                var self = this
                var unique_id = new Date().getTime() + "" + Math.random()
                message.unique_id = unique_id
                message.timer = setTimeout(function(){
                    // We need to search again since the index may have
                    // changed if new messages are introduced
                    for (var x in self.messages) {
                        if(self.messages[x].unique_id == unique_id){
                            self.messages[x].timer = null
                            self.removeMessage(x, true)
                            break;
                        }
                    }
                }, message.remove_after)
            }
            
       }
    },
    methods: {
        iconClasses: function(index) {
            var icon = this.messages[x].icon;
            if(!icon) icon = 'fa-star'
            var cls_list = {
                'fa': true,
            }
            cls_list[icon]=true;
            return cls_list;
        },
        hideAfter: function(mSeconds){
            self = this;
            this.timeout = setTimeout(function(){
                self.timeout = null;
                self.hide()
         }, mSeconds);
        },
        removeMessage: function(index, expired) {
            // Remove any auto close timer
            if (this.messages[index].timer) {
                clearTimeout(this.messages[index].timer)
            }
            
            // Call any registered call back method
            if (this.messages[index].on_close) {
                // Let the component sending the message know that
                // user opted to close. Will be called even when
                // the action is taken
                if(!expired)
                    this.messages[index].on_close();
            }
            
            // Remove it
            this.messages.splice(index, 1);
        },
        messageAction: function(index) {
            if (this.messages[index].on_action) {
                this.messages[index].on_action(this.messages[index].value)
            }
            this.removeMessage(index)
        },
        closeAll: function() {
            var length = this.messages.length;
            var x;
            for (x=length-1; x>=0; --x) { 
                if(!this.messages[x].required) {this.removeMessage(x) }
            }
        },
        hide: function() {
            this.messagesVisible = false;
        },
        unhide: function() {
            this.messagesVisible = true;
            if (this.timeout) { 
                console.log('Clearning the timeout if any')
                clearTimeout(this.timeout) 
            }
        }
    }
}
</script>