A quick tutorial on how you can create your own WET plugin.
Use a barbone plugin container like:
/**
* @title WET-BOEW Barebone plugin container
* @overview Plugin contained to show an example of how to create your custom WET plugin
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @duboisp
*/
( function( $, window, wb ) {
"use strict";
/*
* Variable and function definitions.
* These are global to the plugin - meaning that they will be initialized once per page,
* not once per instance of plugin on the page. So, this is a good place to define
* variables that are common to all instances of the plugin on a page.
*/
var componentName = "wb-barebone",
selector = "." + componentName,
initEvent = "wb-init" + selector,
$document = wb.doc,
/**
* @method init
* @param {jQuery Event} event Event that triggered the function call
*/
init = function( event ) {
// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
$elm;
if ( elm ) {
$elm = $( elm );
// ... Do the plugin initialisation
// Identify that initialization has completed
wb.ready( $elm, componentName );
}
};
// Add your plugin event handler
$document.on( "name.of.your.event", selector, function() {
//... your code here ...
} );
// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );
// Add the timer poke to initialize the plugin
wb.add( selector );
} )( jQuery, window, wb );var componentName = "wb-barebone",// ... Do the plugin initialisation// Add your plugin event handler$elm.trigger( "name.of.your.event", mydata );. The mydata parameter is optional.Here a plugin sample that append the word "Hello World" to any element that contain the class wb-helloworld on the page the plugin is loaded.
/**
* @title WET-BOEW Hello world plugin
* @overview Plugin contained to show an example of how to create your custom WET plugin
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @duboisp
*/
( function( $, window, wb ) {
"use strict";
/*
* Variable and function definitions.
* These are global to the plugin - meaning that they will be initialized once per page,
* not once per instance of plugin on the page. So, this is a good place to define
* variables that are common to all instances of the plugin on a page.
*/
var componentName = "wb-helloworld",
selector = "." + componentName,
initEvent = "wb-init" + selector,
$document = wb.doc,
/**
* @method init
* @param {jQuery Event} event Event that triggered the function call
*/
init = function( event ) {
// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
$elm;
if ( elm ) {
$elm = $( elm );
// ... Do the plugin initialisation
// Call my custom event
$elm.trigger( "name.of.your.event" );
// Identify that initialization has completed
wb.ready( $elm, componentName );
}
};
// Add your plugin event handler
$document.on( "name.of.your.event", selector, function( event ) {
var elm = event.currentTarget,
$elm = $( elm );
$elm.append( "Hello World" );
} );
// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );
// Add the timer poke to initialize the plugin
wb.add( selector );
} )( jQuery, window, wb );var componentName = "wb-helloworld",$elm.trigger( "name.of.your.event" );$elm.append("Hello World");As most plugins needs settings, the following code sample will show you how to support multiple way on how editor and developer will be able to configure your plugin.
/**
* @title WET-BOEW Hello world plugin
* @overview Plugin contained to show an example of how to create your custom WET plugin
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
* @author @duboisp
*/
( function( $, window, wb ) {
"use strict";
/*
* Variable and function definitions.
* These are global to the plugin - meaning that they will be initialized once per page,
* not once per instance of plugin on the page. So, this is a good place to define
* variables that are common to all instances of the plugin on a page.
*/
var componentName = "wb-helloworld",
selector = "." + componentName,
initEvent = "wb-init" + selector,
$document = wb.doc,
defaults = {},
/**
* @method init
* @param {jQuery Event} event Event that triggered the function call
*/
init = function( event ) {
// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var elm = wb.init( event, componentName, selector ),
$elm,
settings;
if ( elm ) {
$elm = $( elm );
// ... Do the plugin initialisation
// Get the plugin JSON configuration set on attribute data-wb-helloworld
settings = $.extend(
true,
{},
defaults,
window[ componentName ],
wb.getData( $elm, componentName )
);
// Call my custom event
$elm.trigger( "name.of.your.event", settings );
// Identify that initialization has completed
wb.ready( $elm, componentName );
}
};
// Add your plugin event handler
$document.on( "name.of.your.event", selector, function( event, data ) {
var elm = event.currentTarget,
$elm = $( elm );
$elm.append( "Hello World" );
if ( data && data.domore ) {
$elm.prepend( "Do more" );
}
} );
// Bind the init event of the plugin
$document.on( "timerpoke.wb " + initEvent, selector, init );
// Add the timer poke to initialize the plugin
wb.add( selector );
} )( jQuery, window, wb );defaults = {}settings;settings = $.extend(true,{},defaults,window[ componentName ],window['wb-helloworld'] = {};wb.getData( $elm, componentName )data-wb-helloworld$elm.trigger( "name.of.your.event", settings );function( event, data ) {if ( data && data.domore ) {Example 1
Example 2 (inside a span)
Example 3 with configuration
<p class="wb-helloworld">Example 1</p>
<p>Example 2 (<span class="wb-helloworld">inside a span</span>)</p>
<p class="wb-helloworld" data-wb-helloworld='{ "domore": true }'>Example 3 with configuration</p>Please note to have your plugin working with WET you will needs to add your script after WET (wet-boew.js) in the HTML.
The non-documented WET core includes a lot of utilities function re-used by several plugins.
Such as the function wb.getId() from which we can get an unique id that are not conflicting with any other elements. Or the array defined at wb.drawColours that is about a color sequence to use in order to maintain a good contrast, as used by the chart and graph and the geomap. Take a look at the WET core source code to find others useful function.
The loading of third party plugin is done by using Modernizer. You can explorer other plugin that implement is like the tables plugins.