Un tutoriel rapide sur commment créer votre plugiciel BOEW.
Voici un plugiciel conteneur squelettique:
/**
* @title WET-BOEW Plugiciel conteneur squelettique
* @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-squelette",
selecteur = "." + nomComposant,
initEvenement = "wb-init" + selecteur,
$document = wb.doc,
/**
* @method init
* @param {jQuery Evenement} Evenement L'object événement lors du déclanchement de la fonction
*/
init = function( Evenement ) {
// 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( Evenement, nomComposant, selecteur ),
$elm;
if ( elm ) {
$elm = $( elm );
// ... Faire l'initialisation du plugiciel
// 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() {
//... votre code ici ...
} );
// Liaison à l'événement init du plugiciel
$document.on( "timerpoke.wb " + initEvenement, selecteur, init );
// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );
} )( jQuery, window, wb );var nomComposant = "wb-squelette",// ... Faire l'initialisation du plugiciel// Ajouter votre code pour gérer les événement de votre plugiciel$elm.trigger( "nom.de.votre.evenement", mesdonnee );. Le paramètre mesdonnee est optionel.Cet example de plugiciel ajoute le texte "Bonjour le monde" à tout éléments qui contient la classe wb-bonjour pour la page duquel le plugiciel est chargé.
/**
* @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,
initEvenement = "wb-init" + selecteur,
$document = wb.doc,
/**
* @method init
* @param {jQuery Evenement} Evenement L'object événement lors du déclanchement de la fonction
*/
init = function( Evenement ) {
// 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( Evenement, nomComposant, selecteur ),
$elm;
if ( elm ) {
$elm = $( elm );
// ... Faire l'initialisation du plugiciel
// Appel d'un événement personalisé
$elm.trigger( "nom.de.votre.evenement" );
// 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 ) {
var elm = evenenment.currentTarget,
$elm = $( elm );
$elm.append( "Bonjour le monde" );
} );
// Liaison à l'événement init du plugiciel
$document.on( "timerpoke.wb " + initEvenement, selecteur, init );
// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );
} )( jQuery, window, wb );var nomComposant = "wb-bonjour",$elm.trigger( "nom.de.votre.evenement" );$elm.append("Bonjour le monde");La pluspars des plugiciels ont besoin de paramétrage, l'exemple de code suivant démontre comment supporté plusieurs avenue différente afin de géré des paramètrages définie par l'éditeur et le développeur.
/**
* @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,
initEvenement = "wb-init" + selecteur,
$document = wb.doc,
defauts = {},
/**
* @method init
* @param {jQuery Evenement} Evenement L'object événement lors du déclanchement de la fonction
*/
init = function( Evenement ) {
// 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( Evenement, 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 = $.extend(
true,
{},
defauts,
window[ nomComposant ],
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 " + initEvenement, selecteur, init );
// Ajouter notre poke pour que l'initialisation des instances
wb.add( selecteur );
} )( jQuery, window, wb );defauts = {}parametres;parametres = $.extend(true,{},defauts,window[ nomComposant ],window['wb-bonjour'] = {};wb.getData( $elm, nomComposant )data-wb-bonjour et transforme le résultat en un objet JSON.$elm.trigger( "nom.de.votre.evenement", parametres );function( evenenment, donnee ) {if ( donnee && donnee.surpassetoi ) {Exemple 1
Exemple 2 (à l'intérieur d'un span)
Exemple 3 avec paramètre
<p class="wb-bonjour">Exemple 1</p>
<p>Exemple 2 (<span class="wb-bonjour">à l'intérieur d'un span</span>)</p>
<p class="wb-bonjour" data-wb-bonjour='{ "surpassetoi": true }'>Exemple 3 avec paramètre</p>Noter que pour que vous puissez utiliser votre propre plugiciel dans la BOEW, vous devriez ajouter votre script après celui de la BOEW (wet-boew.js) dans le code HTML.
Le coeur non documenté de la BOEW contient plusieurs fonction utilitaire trè utile à plusieurs.
Tel que la fonction wb.getId() permet d'obtenir un identifiant unique qui n'entrera pas en conflit avec les autres éléments sur la page. Ou le tableau disponible par wb.drawColours définie une séquence de couleur à utiliser afin de maintenir un bon contraste, tel qu'utilisé par les graphiques et le géomap. Explorer le code source du coeur de la BOEW afin de découvrir plusieurs autres fonction utilitaire.
Le chargement de plugiciel tierce se fait à l'aide de Modernizer. Vous pouvez explorer des plugiciels qui l'utilise tel que l'amélioration de tableau de donnée.
Soumetter une requête sur Github (en anglais seulement, mais les questions peuvent être posés en français)