Exemple de plugiciel, Bonjour le monde

But

Apprendre à comment créer son propre plugiciel BOEW.

Exemples pratiques

• Exemple français
• Exemple anglais

Code source de bonjour.js

/**
 * @title WET-BOEW Plugiciel bonjour le monde
 * @overview Plugiciel démontrant un example de comment créer votre propre plugiciel BOEW personalisé
 * @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";

/*
 * Définition de variable et de fonction.
 * Ceux-ci sont généraux au plugiciel - cela veux dire qu'ils seront initialisé une fois par page,
 * et non à chaque fois que le plugiciel sera instancié sur la page. Donc, ici c'est un bon endroit
 * enfin de définir des variables qui sont communes à toutes les instance du plugiciel sur la page.
 */
var nomComposant = "wb-bonjour",
	selecteur = "." + nomComposant,
	initEvent = "wb-init" + selecteur,
	$document = wb.doc,

	/**
	 * @method init
	 * @param {jQuery Event} event L'object événement lors du déclanchement de la fonction
	 */
	init = function( event ) {

		// Début de l'initialisation
		// retourne un objet DOM = procéder avec l'initialisation
		// retourne undefined = ne pas procéder avec l'initialisation (ex., il est déjà initialisé)
		var elm = wb.init( event, nomComposant, selecteur ),
			$elm,
			parametres;

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

			// ... Faire l'initialisation du plugiciel

			// Obtenir les paramètres JSON du plugiciel tel que définie par l'attribut data-wb-bonjour
			parametres = wb.getData( $elm, nomComposant );

			// Appel d'un événement personalisé
			$elm.trigger( "nom.de.votre.evenement", parametres );

			// Annonce que l'initialisation de l'instance a été complélté
			wb.ready( $elm, nomComposant );
		}
	};

// Ajouter votre code pour gérer les événement de votre plugiciel
$document.on( "nom.de.votre.evenement", selecteur, function( evenenment, donnee ) {
	var elm = evenenment.currentTarget,
		$elm = $( elm );

	$elm.append( "Bonjour le monde" );

	if ( donnee && donnee.surpassetoi ) {
		$elm.prepend( "Surpasse toi" );
	}
} );

// Liaison à l'événement init du plugiciel
$document.on( "timerpoke.wb " + initEvent, selecteur, init );

// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );

} )( jQuery, window, wb );

Code source

Code source pour Bonjour le monde sur GitHub