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’;

    <span class="hljs-comment">// default settings</span>
    <span class="hljs-keyword">this</span>.defaults = {
        mysetting: <span class="hljs-literal">true</span>
    };

    <span class="hljs-comment">// Parent Constructor</span>
    Kube.apply(<span class="hljs-keyword">this</span>, <span class="hljs-built_in">arguments</span>);

    <span class="hljs-comment">// Initialization</span>
    <span class="hljs-keyword">this</span>.start();
};

<span class="hljs-comment">// Functionality</span>
Kube.Myplugin.prototype = {
    start: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
    </span>{
        <span class="hljs-comment">// plugin element</span>
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.$element);

        <span class="hljs-comment">// call options</span>
        <span class="hljs-built_in">console</span>.log(<span class="hljs-keyword">this</span>.opts.mysetting);

        <span class="hljs-comment">// call methods</span>
        <span class="hljs-keyword">this</span>.method();
    },
    method: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)
    </span>{
        <span class="hljs-comment">// do something...</span>

        <span class="hljs-comment">// callback</span>
        <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>);

        <span class="hljs-comment">// callback with arguments</span>
        <span class="hljs-keyword">this</span>.callback(<span class="hljs-string">'show'</span>, value1, value2);
    }
};

<span class="hljs-comment">// Inheritance</span>
Kube.Myplugin.inherits(Kube);

<span class="hljs-comment">// Plugin</span>
Kube.Plugin.create(<span class="hljs-string">'Myplugin'</span>);
Kube.Plugin.autoload(<span class="hljs-string">'Myplugin'</span>);


}(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);

<span class="hljs-comment">// call plugin method</span>
<span class="hljs-keyword">this</span>.method();


});
</script>