+++ title = "Custom Plugins" description = "Flexible and extensible way to add custom features" weight = 20 draft = false toc = true bref = "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>