Custom Plugins

Kube has a lot to offer in terms of extensibility and flexibility, and plugins are the way of doing incredible things without bloating the core. With plugins, you can extend existing features, make them more interactive, or you can crate completely new functionality..

Plugin Template

Here's what a generic plugin looks like. This template gives an overall idea of what you can do with plugins in Kube. Feel free to use this one as a boilerplate for your custom plugins.

(function(Kube)
{
    Kube.Myplugin = function(element, options)
    {
        this.namespace = 'myplugin';

        // default settings
        this.defaults = {
            mysetting: true
        };

        // Parent Constructor
        Kube.apply(this, arguments);

        // Initialization
        this.start();
    };

    // Functionality
    Kube.Myplugin.prototype = {
        start: function()
        {
            // plugin element
            console.log(this.$element);

            // call options
            console.log(this.opts.mysetting);

            // call methods
            this.method();
        },
        method: function()
        {
            // do something...

            // callback
            this.callback('show');

            // callback with arguments
            this.callback('show', value1, value2);
        }
    };

    // Inheritance
    Kube.Myplugin.inherits(Kube);

    // Plugin
    Kube.Plugin.create('Myplugin');
    Kube.Plugin.autoload('Myplugin');

}(Kube));

Call

Calling a plugin is very easy, just add the data-component with the name of your plugin and it will start automatic.

<div data-component="myplugin"></div>

Or call manually

<div id="my-element"></div>

<script>
$('#my-element').myplugin();
</script>

Callbacks

Kube plugins can react on events with callbacks. Whenever you need your plugin to do something in response to an action or an event, just use a callback.

<div id="myplugin" data-component="myplugin"></div>

<script>
$('#myplugin').on('show.myplugin', function()
{
// do something...
});
</script>

All plugin methods and variables are available within the plugin via this:

<script>
$('#myplugin').on('show.myplugin', function()
{
    // plugin element
    console.log(this.$element);

    // call plugin method
    this.method();

});
</script>