---
{
	"title": "Hello world",
	"language": "en",
	"category": "Other",
	"categoryfile": "other",
	"description": "A quick tutorial on how you can create your own WET plugin.",
	"altLangPrefix": "helloworld",
	"dateModified": "2016-12-06"
}
---
<div class="wb-prettify all-pre hide"></div>

<section>
	<h2>Purpose</h2>
	<p>Learn on how to create a simple plugin for WET</p>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/helloworld/helloworld-en.html">English example</a></li>
		<li><a href="../../../demos/helloworld/helloworld-fr.html" hreflang="fr">French example</a></li>
	</ul>
</section>

<section>
	<h2>Source code of <code>helloworld.js</code></h2>
<pre><code>/**
 * @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 ) {
&quot;use strict&quot;;

/*
 * 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 = &quot;wb-helloworld&quot;,
	selector = &quot;.&quot; + componentName,
	initEvent = &quot;wb-init&quot; + 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,
			settings;

		if ( elm ) {
			$elm = $( elm );

			// ... Do the plugin initialisation

			// Get the plugin JSON configuration set on attribute data-wb-helloworld
			settings = wb.getData( $elm, componentName );

			// Call my custom event
			$elm.trigger( &quot;name.of.your.event&quot;, settings );

			// Identify that initialization has completed
			wb.ready( $elm, componentName );
		}
	};

// Add your plugin event handler
$document.on( &quot;name.of.your.event&quot;, selector, function( event, data ) {
	var elm = event.currentTarget,
		$elm = $( elm );

	$elm.append( &quot;Hello World&quot; );

	if ( data &amp;&amp; data.domore ) {
		$elm.prepend( &quot;Do more&quot; );
	}
} );

// Bind the init event of the plugin
$document.on( &quot;timerpoke.wb &quot; + initEvent, selector, init );

// Add the timer poke to initialize the plugin
wb.add( selector );

} )( jQuery, window, wb );</code></pre>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/other/helloworld">Hello world source code on GitHub</a></p>
</section>
