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.

<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".

<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.

<div class="alert is-error">...</div>

<div class="alert is-success">...</div>

<div class="alert is-focus">...</div>

<div class="alert is-inverted">...</div>

Events

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

Close Open

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>