Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Hello world plugin example and fix #7788
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| --- | ||
| { | ||
| "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 ) { | ||
| "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, | ||
| settings; | ||
This comment has been minimized.
Sorry, something went wrong. |
||
|
|
||
| if ( elm ) { | ||
| $elm = $( elm ); | ||
|
|
||
| // ... Do the plugin initialisation | ||
|
|
||
| // Get the plugin JSON configuration set on attribute data-wb-helloworld | ||
| settings = wb.getData( $elm, componentName ); | ||
This comment has been minimized.
Sorry, something went wrong. 
LaurentGoderre
Member
|
||
|
|
||
| // 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 );</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> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| --- | ||
| { | ||
| "title": "Exemple de plugiciel, Bonjour le monde", | ||
| "language": "fr", | ||
| "category": "Autre", | ||
| "categoryfile": "other", | ||
| "description": "Un tutoriel rapide sur commment créer votre plugiciel BOEW.", | ||
| "altLangPrefix": "helloworld", | ||
| "dateModified": "2016-12-06" | ||
| } | ||
| --- | ||
| <div class="wb-prettify all-pre hide"></div> | ||
|
|
||
| <section> | ||
| <h2>But</h2> | ||
| <p>Apprendre à comment créer son propre plugiciel BOEW.</p> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Exemples pratiques</h2> | ||
| <ul> | ||
| <li><a href="../../../demos/helloworld/helloworld-fr.html">Exemple français</a></li> | ||
| <li><a href="../../../demos/helloworld/helloworld-en.html" hreflang="en">Exemple anglais</a></li> | ||
| </ul> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Code source de <code>bonjour.js</code></h2> | ||
| <pre><code>/** | ||
| * @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></pre> | ||
| </section> | ||
|
|
||
| <section> | ||
| <h2>Code source</h2> | ||
| <p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/other/helloworld">Code source pour Bonjour le monde sur GitHub</a></p> | ||
| </section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /** | ||
| * @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 ); |
Oops, something went wrong.
Should add a
defaults = {},here