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>