Alert

Alerts are an essential part of modern web, and they can provide invaluable feedback to the users. Alerts in Kube look nice, they are informative, simple and very easy to set up to whatever requirements you may have, style-wise or otherwise. Take a div, give it an alert class, add a color using meaningful classes like is-error or is-success and you're practically done!

Usage #

The default alert is just a styled block with a message, without interactivity.

You have 2 modules waiting for installation. Install
<div class="alert">...</div>

Let's make the action to close the alert. To do this, add a close icon from Helpers with attribute data-type="close" and set the data-kube="alert" for the alert block. Now Kube knows that this is an interactive module and will wait for the event when you click on an element that has the attribute data-type="close".

You have 2 modules waiting for installation. Install

<div class="alert" data-kube="alert">
    You have 2 modules waiting for installation.
    <span class="close is-small" data-type="close"></span>
</div>

Add classes is-error or is-success, is-warning, is-focus, and is-inverted to change the meaning and look of alerts.

You have 2 modules waiting for installation. Install
<div class="alert is-error">...</div>
You have 2 modules waiting for installation. Install
<div class="alert is-success">...</div>
You have 2 modules waiting for installation. Install
<div class="alert is-focus">...</div>
You have 2 modules waiting for installation. Install
<div class="alert is-inverted">...</div>

Events #

Event Description
open This event fires immediately when the open instance method is called.
opened This event is fired when the alert has been opened, will wait for CSS animation to complete.
close This event fires immediately when the close instance method is called.
closed This event is fired when the alert has been closed, 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: {
            alert: {
                closed: function(sender)
                {
                    console.log('Alert is closed.');
                }
            }
        }
    });
})(Kube);

Catch events from a specific alert

Set an ID for the alert:

<div class="alert" id="myalert" data-kube="alert">
    ...
    <span class="close is-small" data-type="close"></span>
</div>

Or set data-name attribute:

<div class="alert" data-name="myalert" data-kube="alert">
    ...
    <span class="close is-small" data-type="close"></span>
</div>

Catch events in your module by the specified ID or data-name:

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        // catch event
        onmessage: {
            alert: {
                closed: function(sender)
                {
                    if (sender._id === 'myalert')
                    {
                        console.log('Alert #myalert is closed.');
                    }
                }
            }
        }
    });
})(Kube);

Methods #

Method Description
close Manually closes an alert.
open Opens an alert if it has been closed.

You have 2 modules waiting for installation. Install

Use API inside modules

(function($K)
{
    $K.add('module', 'mymodule', {
        init: function(app, context)
        {
            this.app = app;
        },
        show: function()
        {
            // for all alerts on the page
            this.app.api('alert.close');

            // for specified alert
            this.app.api('alert.myalert.close');
        }
    });
})(Kube);

Use API from outside

// for all alerts on the page
<button onclick="$K.api('alert.close');">Close</button>

// for specified alert
<button onclick="$K.api('alert.myalert.close');">Close</button>