Message

The message service allows you to create a system of notifications in your application and to call messages from any module built by you.

Demo #

Click the buttons to see how the message service work.

 
// HTML
<div data-kube="mymodule">
    <button data-type="show">Show</button>
    <button data-type="show-error">Show Error</button>
</div>

// JS
(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        // events
        onclick: function(e, element, type)
        {
            e.preventDefault();
            if (type === 'show')
            {
                this.message.show({ message: 'My message' });
            }
            else if (type === 'show-error')
            {
                this.message.show({
                    message: 'My error message',
                    type: 'is-error',
                    position: 'left'
                });
            }
        }
    });
})(Kube);

Settings #

message

Type: String

Default: false

Set the text or HTML to the message body.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        showMessage: function()
        {
            this.message.show({ message: 'My message' });
        }
    });
})(Kube);

delay

Type: Number

Default: 7

Set the delay in seconds for automatically hiding the message.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        showMessage: function()
        {
            // this message will be hidden automatically in 5 seconds
            this.message.show({ message: 'My message', delay: 5 });
        }
    });
})(Kube);

type

Type: Boolean String

Default: false

Set the type and appearance of the message. Possible types: is-error, is-success, is-focus, is-black.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        showMessage: function()
        {
            this.message.show({
                message: 'My message',
                type: 'is-error'
            });
        }
    });
})(Kube);

position

Type: String

Default: right

Set the position of the message. Possible positions: left, centered, line.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        showMessage: function()
        {
            this.message.show({
                message: 'My message',
                position: 'centered'
            });
        }
    });
})(Kube);

name

Type: Boolean String

Default: false

Set the name of the message to catch the event from this particular message.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        // catch event
        onmessage: {
            message: {
                closed: function(sender)
                {
                    if (sender._id === 'mymessage')
                    {
                        console.log('My message is closed!');
                    }
                }
            }
        },
        // show message
        showMessage: function()
        {
            this.message.show({
                message: 'My message',
                name: 'mymessage'
            });
        }
    });
})(Kube);

Events #

Event Description
open This event fires immediately when the show instance method is called.
opened This event is fired when the message has been shown, will wait for CSS animation to complete.
close This event fires immediately when the hide instance method is called.
closed This event is fired when the message has been hidden, will wait for CSS animation to complete.

Catch events in your module:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            message: {
                closed: function(sender)
                {
                    console.log('Message is closed.');
                }
            }
        }
    });
})(Kube);

Catch events from a message with a specified name.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        // catch event
        onmessage: {
            message: {
                closed: function(sender)
                {
                    if (sender._id === 'mymessage')
                    {
                        console.log('My message is closed!');
                    }
                }
            }
        },
        // show message
        showMessage: function()
        {
            this.message.show({
                message: 'My message',
                name: 'mymessage'
            });
        }
    });
})(Kube);

Methods #

show

Arguments
params Object settings of the message

Show the message.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        showMessage: function()
        {
            this.message.show({ message: 'My message' });
        }
    });
})(Kube);

hide

Arguments
params Object settings of the message

Manually hide the message.

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;

            // define service
            this.message = app.message;
        },
        hideMessage: function()
        {
            this.message.hide();
        }
    });
})(Kube);