Cas d’école : j’écris du code JS spécifique pour un bloc (un tag) donné, par exemple la pagination, et je souhaite l’inclure proprement afin :
- qu’il ne soit pas présent directement dans le template *.jsp du bloc (chemin :
/webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag) - qu’il soit plutôt déclaré dans un fichier séparé qui contient uniquement des directives JS propres à ce bloc (chemin :
/webroot/_ui/responsive/common/js/) - qu’il soit exécuté uniquement si une pagination est présente dans la page qui s’affiche dans le navigateur
Ajouter, dans le template de bloc, une classe qui servira à l’exécution des directives JS
Dans /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag :
|
1 2 3 |
<ul class="pagination js-spe-pagination"> <%-- markup et conditions servant à afficher ma pagination --%> </ul> |
Ici, on ajoute une classe js-spe-pagination.
Créer le fichier qui contiendra notre code JS spécifique
Dans /webroot/_ui/responsive/common/js/, créer un fichier acc.spe.pagination.js qui contient le code ci dessous :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ACC.spePagination = { _autoload: [ ['spePagination', $('.js-spe-pagination').length != 0], ], spePagination: function (){ ACC.spePagination.buildDropupPagination(); }, buildDropupPagination: function (){ $('.pagination-bar.bottom .js-spe-pagination').addClass('dropup'); } } |
- ligne 3: l'
_autoloadva définir qu’on exécute le code présent dans la fonctionspePaginationà la condition que la classe.js-spe-paginationsoit présente dans le DOM - ligne 1: l’ensemble du code JS spécifique relatif à notre pagination est encapsulé dans un namespace
ACC.spePaginationqu’on retrouve ensuite à chaque fois qu’on cherche à exécuter une fonction (spePagination: function (){ACC.spePagination.buildDropupPagination();}) - Attention: noter la présence de virgules lignes 3, 4 et 8 pour bien assurer la transition entre les différentes parties du code
Déclarer la nouvelle référence JS
Dans /webroot/WEB-INF/tags/responsive/template/javaScript.tag, ajouter :
|
1 |
<script type="text/javascript" src="${commonResourcePath}/js/acc.spe.pagination.js"></script> |
mais aussi dans web/webroot/WEB-INF/wro.xml.
Déclarer des variables (hors fonctions)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
ACC.spePagination = { _autoload: [ ['spePagination', $('.js-spe-pagination').length != 0], ], maVariable1 : $('.toto'), maVariable2 : $('.tutu'), spePagination: function (){ ACC.spePagination.buildDropupPagination(); }, buildDropupPagination: function (){ $('.pagination-bar.bottom .js-spe-pagination').addClass('dropup'); } } |
Starter kit :
Sample de code pour démarrer récupéré ici : /_ui/responsive/common/js/_autoload.js.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//################################################################ //#### Autoload //################################################################ ACC.sample={ _autoload: [ "samplefunction", ["somefunction", "some expression to test"] ["somefunction","some expression to test","elsefunction"] ], samplefunction:function(){ //... do some suff here, executed every time ... }, somefunction:function(){ //... do some suff here. if expression match ... }, elsefunction:function(){ //... do some suff here. if expression NOT match ... } } // sample expression: $(".js-storefinder-map").length != 0 |
Activer le mode « wro » (la concaténation des fichiers JS et CSS) :
Le mode « wro » permet de concaténer l’ensemble des fichiers JS du projet. Il faut déclarer les scripts dans deux fichiers distincts :
/webroot/WEB-INF/tags/responsive/template/javaScript.tag(pour le JS)\webroot\WEB-INF\tags\responsive\template\styleSheets.tag(pour le CSS)/webroot/WEB-INF/wro.xml
Pour le second, le chemin vers chaque ressource Js se déclare comme suit :
|
1 |
<js>/_ui/responsive/common/js/jquery.textarea_autosize.min.js</js> |
Pour tester sans passer par une modification de conf’ plus lourde :
Ne pas versionner de code avec l’exemple ci-dessous!
Dans le fichier /webroot/WEB-INF/tags/responsive/template/javaScript.tag ajouter le caractère ! dans <c:when test="${!wro4jEnabled}"> :
|
1 2 3 4 |
<c:when test="${!wro4jEnabled}"> <script type="text/javascript" src="${contextPath}/wro/all_responsive.js"></script> <script type="text/javascript" src="${contextPath}/wro/addons_responsive.js"></script> </c:when> |
où:
|
1 2 3 4 5 |
<%-- Minified JS (see "storefront.wro4j.enabled" in properties and group "naos_js" in wro.xml) --%> <%--c:when test="${wro4jEnabled}"--%> <c:when test="true"> <script type="text/javascript" src="/wro/naos_js.${wroHashes['/wro/naos_js.js']}.js"></script> </c:when> |
|
1 2 3 4 |
<%--c:when test="${wro4jEnabled && (cmsSite.uid eq aubertSiteUid)}"--%> <c:when test="true"> <link rel="stylesheet" type="text/css" media="all" href="/wro/naos_aub_css.${wroHashes['/wro/naos_aub_css.css']}.css"/> </c:when> |