How do you comfort a JavaScript bug ? You console it.<\/p>\n
Comment r\u00e9conforter un bug JavaScript ? On le console.
\n
\nHow do you comfort a JavaScript bug ? You console it.
\nComment r\u00e9conforter un bug JavaScript ? On le console.
\nEnvironnement de travail
\nAvant de parler de JavaScript, il est n\u00e9cessaire d’adapter son environnement de d\u00e9veloppement \u00e0 ce langage.
\nSur Firefox, l’outil de debug de base est Firebug. La console (d’o\u00f9 la vanne) permet de d\u00e9tecter imm\u00e9diatement les erreurs JS.
\nIl existe de nombreux tutos sur Firebug. Notamment celui d’Alsacr\u00e9ations, qui aborde les 3 fonctions principales de l’outil, inspection HTML, d\u00e9boggage CSS et d\u00e9boggage JavaScript.
\nIl existe aussi une version pour Chrome.
\nL’autre extension indispensable sur Firefox est Phoenix. A l’aide de cet outil, on peut voir d’un seul coup d’oeil tous les fichiers JS et CSS charg\u00e9s sur une page.
\nIntroduction
\nLe CMS Joomla utilise une vari\u00e9t\u00e9 de scripts JS, pour l’essentiel bas\u00e9s sur la librairie jQuery.
\nCette derni\u00e8re a progressivement remplac\u00e9 la librairie Mootools, qui a compl\u00e8tement disparu du Frontend, mais qui est maintenue pour certaines fonctionnalit\u00e9s en Backend.
\nLe \u00ab\u00a0framework\u00a0\u00bb Bootstrap a \u00e9t\u00e9 rajout\u00e9 r\u00e9cemment pour faciliter la mise en place d’\u00e9l\u00e9ments de design \u00ab\u00a0ready-made\u00a0\u00bb comme les grids, les boutons, les images, les formulaires, etc … Bootstrap comporte une partis JS (li\u00e9e \u00e0 jQuery) et une partie CSS.
\nMon but dans cet article est de pr\u00e9senter les diff\u00e9rentes mani\u00e8res d’inclure les fichiers JS dans Joomla en commen\u00e7ant par les m\u00e9thodes existantes.
\nJavaScript et CSS marchant de pair, j’aborderai aussi l’inclusion des fichiers CSS dans Joomla.
\nVous pouvez aussi vous r\u00e9f\u00e9rer \u00e0 ces articles de la documentation Joomla (en fran\u00e7ais) :<\/p>\n
Ajouter du JavaScript – Joomla! Documentation
\n Frameworks JavaScript – Joomla! Documentation
\n Ajouter du JavaScript et des CSS \u00e0 une page – Joomla! Documentation <\/p>\n
Les bases
\nEn g\u00e9n\u00e9ral, l’utilisateur de Joomla! commence \u00e0 se pr\u00e9occuper de JS quand :<\/p>\n
il y a un bug. Mon [enregistrement, slideshow, menu, etc, barrez les mentions inutiles] ne fonctionne pas
\nil veut int\u00e9grer son propre script super sympa qu’il a trouv\u00e9 sur le web<\/p>\n
D\u00e9bogguer et adapter des scripts JS peut \u00eatre compliqu\u00e9 si l’on ne comprend pas bien les bases de l’inclusion du JS dans Joomla.
\nLe JavaScript dans les templates
\nLe premier contact d’un utilisateur Joomla avec le JS et les CSS passe par les templates. Le template Protostar, qui est compris dans le package par d\u00e9faut d’une installation Joomal native, est une excellente d\u00e9mo pour faire les premiers pas.
\nJS
\nDans l’index.php, localis\u00e9 ici \/templates\/protostar\/index.php, ligne \u00b1 39
\n JHtml::_(‘bootstrap.framework’);
\nCette ligne int\u00e8gre toutes les d\u00e9pendances dont on a besoin en chargeant Jquery + Bootstrap. Elle assure aussi que jQuery n’est charg\u00e9 qu’une seule fois
\nLigne \u00b1 13
\n $doc = JFactory::getDocument();
\nCette ligne est n\u00e9cessaire pour charger les fichiers JS et CSS additionnels.
\nLigne \u00b1 40
\n $doc->addScript($this->baseurl . ‘\/templates\/’ . $this->template . ‘\/js\/template.js’);
\nCette ligne utilise l’API Joomla pour charger un fichier JS localis\u00e9 dans \/templates\/protostar\/js\/
\nCSS
\nLigne \u00b1 43
\n $doc->addStyleSheet($this->baseurl . ‘\/templates\/’ . $this->template . ‘\/css\/template.css’);
\n $doc->addStyleSheet($this->baseurl . ‘\/templates\/’ . $this->template . ‘\/css\/custom.css’);
\nCes lignes utilisent l’API Joomla pour charger un fichier template.css et un fichier custom.css localis\u00e9s dans \/templates\/protostar\/css\/.
\nJ’ai rajout\u00e9 un fichier custom.css qui n’existe pas par d\u00e9faut dans l’index.php du template Protostar pour montrer \u00e0 quel endroit on peut inclure des fichiers CSS personnalis\u00e9s.
\nEn r\u00e9sum\u00e9, la bonne m\u00e9thode pour l’inclusion de fichiers JS et CSS :
\n $doc = JFactory::getDocument();
\n $doc->addScript($this->baseurl . ‘\/templates\/’ . $this->template . ‘\/js\/template.js’);
\n $doc->addStyleSheet($this->baseurl . ‘\/templates\/’ . $this->template . ‘\/css\/template.css’);
\nImportant
\nOn peut toujours rajouter un fichier JS ou CSS via les m\u00e9thodes classiques, dans la balise \u00ab\u00a0head\u00a0\u00bb :
\nMais l’ordre dans lequel se chargent ces fichiers, JS ou CSS, est tr\u00e8s important.
\n Joomla doit ex\u00e9cuter les fichiers jQuery AVANT tout script d\u00e9pendant.
\nLes lois de l’HTML et donc des CSS, veulent que le dernier fichier CSS charg\u00e9 prend la pr\u00e9c\u00e9dente sur tous les autres.
\nLes d\u00e9veloppeurs de Joomla ont pris en compte ces principes et con\u00e7u l’inclusion des fichiers JS et CSS en cons\u00e9quence.
\nIl est donc fortement recommand\u00e9 d’adopter ces m\u00e9thodes.
\nNB : les templates des d\u00e9veloppeurs de templates r\u00e9put\u00e9s (RocketTheme, Joomlart, Yootheme, JoomlaShine, Gavick, etc …) prennent souvent des libert\u00e9s avec cette m\u00e9thode et chacun a sa mani\u00e8re de traiter le chargement des fichiers JS et CSS. On en parlera aussi dans un autre article.
\nPar ailleurs, ajouter un fichier JS ou CSS dans l’index.php du template alors qui lui ne ciblera qu’un module ou un composant est tr\u00e8s contre-productif car le-dit fichier sera charg\u00e9 sur toutes les pages, par d\u00e9finition. On va donc voir des alternatives \u00e0 cette m\u00e9thode.
\nLe JavaScript dans les extensions
\nNous savons qu’il faut \u00e9viter de modifier les fichiers natifs, et ceux des extensions tierces, \u00e0 cause des mises \u00e0 jour r\u00e9guli\u00e8res de Joomla, des templates et des extensions. Nous avons donc \u00e0 notre disposition les surcharges de templates, composants, modules.
\nJe pars du principes que les m\u00e9thodes de surcharges sont acquises (sinon voir cet article).
\n1 – La m\u00e9thode classique
\nOn peut toujours ajouter les fichiers JS ou CSS de la mani\u00e8re suivante, en respectant les chemins\/paths vers ces fichiers, que je placerai dans les dossiers \u00ab\u00a0css\u00a0\u00bb et \u00ab\u00a0js\u00a0\u00bb pour des raisons de coh\u00e9rence.
\nPrenons la surcharge d’un module \u00ab\u00a0custom\u00a0\u00bb, dans default.php, localis\u00e9 ici :
\n \/templates\/protostar\/html\/mod_custom\/default.php
\nInsertion des fichiers :
\n defined(‘_JEXEC’) or die;
\n\/\/insertion
\n$doc = JFactory::getDocument();
\n$doc->addStyleSheet(JURI::root().’templates\/protostar\/css\/mod_custom.css’);
\n$doc->addScript(JURI::root().’templates\/protostar\/js\/mod_custom.js’);
\nM\u00eame m\u00e9thode pour les composants, dont le com_content, qui g\u00e8re l’affichage des articles, cat\u00e9gories, page d’accueil.
\nIdem pour les plugins.
\nDans cette configuration, on \u00e9vite le chargement superflu et g\u00e9n\u00e9rateur de requ\u00eates inutiles en ciblant l’extension et seulement elle.
\nJe mettrai un b\u00e9mol sur les plugins, surchargeables, mais qui la plupart du temps, propagent tous les fichiers JS et CSS partout, sans possibilit\u00e9 de contr\u00f4le.
\n2 – La m\u00e9thode qui tue
\nDepuis la version 3.xx de Joomla, j’avais \u00e9t\u00e9 tr\u00e8s int\u00e9ress\u00e9e par cet article de Michael Babker, \u00ab\u00a0Use the media Folder, Allow Overridable Media\u00a0\u00bb, qui pr\u00e9sentait une nouvelle approche de l’insertion de fichiers JS et CSS, et des images li\u00e9es, cette fois-ci, dans le dossier \u00ab\u00a0media\u00a0\u00bb.
\nOn cr\u00e9e un dossier \u00ab\u00a0mes_styles\u00a0\u00bb dans le dossier \u00ab\u00a0media\u00a0\u00bb.
\nDans le dossier \u00ab\u00a0mes_styles\u00a0\u00bb, on cr\u00e9e un dossier \u00ab\u00a0css\u00a0\u00bb, un dossier \u00ab\u00a0images\u00a0\u00bb, un dossier \u00ab\u00a0js\u00a0\u00bb.
\nNB : le respect des minuscules est important pour le nommage de ces fichiers.
\nOn place les fichiers JS, CSS, et les images dans leurs dossiers respectifs. Et l\u00e0, bingo, plus besoin de se pr\u00e9occuper des chemins\/paths des fichiers, il suffit de rajouter dans notre surcharge du fichier default.php, dans mod_custom, localis\u00e9 ici : \/templates\/protostar\/html\/mod_custom\/default.php,
\n defined(‘_JEXEC’) or die;
\nJHtml::_(‘stylesheet’, ‘mes_styles\/macss1.css’, false, true);
\nJHtml::_(‘script’, ‘mes_styles\/monjs1.js’, false, true);
\nL’API Joomla ira alors chercher les fichiers \u00e0 cet endroit, cad le dossier \u00ab\u00a0media\/mes_styles\u00a0\u00bb. Cette m\u00e9thode fonctionne pour les surcharges de composants \u00e9galement. Elle fonctionne aussi dans les modules et les composants eux-m\u00eames. C’est celle utilis\u00e9e aujourd’hui par la plupart des d\u00e9veloppeurs d’extensions.
\nIMPORTANT
\nIl est toujours n\u00e9cessaire de v\u00e9rifier l’ordre de chargement des fichiers via le code source visible lors de l’affichage de la page.
\nUn exemple classique : le fichier JS est charg\u00e9 (et ex\u00e9cut\u00e9) avant les fichiers jQuery. C’est un probl\u00e8me si ce fichier est d\u00e9pendant de jQuery.
\nOn force alors le chargement de jQuery avec :
\n JHtml::_(‘jquery.framework’);
\nQui charge tous les fichiers jQuery n\u00e9cessaires. On aura donc :
\n defined(‘_JEXEC’) or die;
\nJHtml::_(‘jquery.framework’);
\nJHtml::_(‘stylesheet’, ‘mes_styles\/macss1.css’, false, true);
\nJHtml::_(‘script’, ‘mes_styles\/monjs1.js’, false, true);
\nL’objectif de cet article est de montrer que l’on peut rajouter des fichiers JS et CSS facilement et en \u00e9vitant au maximum les probl\u00e8mes de conflits, de fichiers mal plac\u00e9s, et ceux li\u00e9s aux mises \u00e0 jour de Joomla, des templates et des extensions.
\nJ’aborderai dans un autre article les cas sp\u00e9cifiques des templates \u00ab\u00a0framework\u00e9s\u00a0\u00bb comme ceux de Warp-Yootheme, Gantry-RocketTheme, Helix-Joomshaper ou PurityIII-Joomlart.
\nEnjoy !<\/p>\n","protected":false},"excerpt":{"rendered":"
How do you comfort a JavaScript bug ? You console it. Comment r\u00e9conforter un bug JavaScript ? On le console.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[13],"tags":[],"class_list":["post-456","post","type-post","status-publish","format-standard","hentry","category-archives"],"yoast_head":"\n