Comment ajouter du Javascript dans Drupal 7

Il est parfois utile d'ajouter un peu de javascript à une page pour améliorer le UX. J'ai cru que ce serait facile. Mais non. En outre, c'est différent selon qu'on est dans Drupal 6 ou Drupal 7. Prenons un exemple. Que diriez-vous d'un javascript qui permet de révéler ou masquer un ou plusieurs paragraphes dans un tiroir? Vous trouverez de nombreux exemples en effectuant une recherche sur Google. Voici celui que j'ai retenu et légèrement adapté pour les besoins du tutoriel. Le code html qui suit devrait vous permettre d'en comprendre le fonctionnement.
<script type="text/javascript">
    $(document).ready(function(){
      $(".toggler").click(function(){
        $(this).next().slideToggle("slow");
        return false;
      }).next().hide();
    });
</script>
    
<p class="toggler" style="cursor:pointer;">Révéler/Masquer le paragraphe suivant.</p>
<div>
    Ce paragraphe est initialement caché. Quand on clique sur le lien, tout le contenu de la DIV qui suit apparaîtra à condition qu'on lui assigne la classe "toggler" (i.e. basculer).
</div>

Procédure Drupal 6

À l'époque de Drupal 6, il suffisait à peu près de coller le javascript et le html dans le champ Corps (Body) d'un Article pour que ça fonctionne. Enfin presque, il y avait bien entendu quelques pré-requis.
  • Aller à admin/settings/filters/2 (les paramètres du format Full HTML) et désactiver HTML filter
  • Mettre le format du champ Corps (Body) à Full HTML
  • Désactiver le texte riche
  • Copier-coller le code, sauvegarder

Procédure Drupal 7

Dans Drupal 7 les balises <script></script> et tout ce qu'elles contiennent est supprimé par le système pour des raisons de sécurité. Il y a sans doute des façons de contourner la chose comme je l'ai fait ci-dessus pour Drupal 6 (un hack s'il en est un) mais ce n'est vraiment pas recommandé. Alors, comment procède-t-on? Dans le cas qui nous concerne, une première approche, parfaitement acceptable celle-là, consiste à intégrer la fonction javascript dans un gabarit du thème. L'avantage de cette approche c'est que le javascript sera alors disponibles pour tous les noeuds du même type e.g. Article.

Par exemple : cliquez ici pour Révéler ou Masquer les paragraphes suivants...

J'utilise le thème Antonelli, un sous-thème à largeur fluide de Bartik. Dans le répertoire du thème (sites/all/themes/antonelli), il n'y a aucun gabarit. Dans ce genre de situation, c'est vers le thème parent qu'il faut se tourner. Dans le répertoire de Bartik (sites/all/themes/bartik), sous templates, il n'y a pas de gabarit qui soit spécifique aux noeuds créés avec le type de contenu Article. Par contre, on trouve node.tpl.php, un gabarit générique qui est appliqué à tous les noeuds. Nous allons utiliser ce dernier pour créer un gabarit pour tous les noeuds Article. Voici comment procéder :
  • Dupliquez node.tpl.php et renommez-le node--article.tpl.php
  • Ouvrez-le dans votre éditeur de texte favori
  • Insérez les balises <script></script> au-dessus de la première ligne de HTML
  • Le javascript doit ensuite être enveloppé dans une fonction de fermeture jQuery
  • Finalement, il est plus avantageux de faire appel aux Drupal behaviors que d'utiliser document.ready()
<script type="text/javascript">
    (function($) {
      Drupal.behaviors.customToggler = {
        attach: function(context, settings) {
          // votre code javascript
        }
      };
    }) (jQuery);
</script>
  • Sauvegardez le nouveau gabarit dans le répertoire templates de votre thème. Dans le cas présent, sous sites/all/themes/antonelli/templates.
  • Pour charger votre nouveau gabarit en mémoire, vous devez soit enregistrer la configuration de votre thème (admin/appearance/settings/antonelli) ou vider les caches de Drupal.
En bout de ligne, voici un aperçu de node--article.tpl.php.
...

 * @see template_preprocess()
 * @see template_preprocess_node()
 * @see template_process()
 */
?>

<script type="text/javascript">
    (function($) {
       Drupal.behaviors.customToggler = {
         attach: function(context, settings){
            $(".toggler", context).once('custom-toggler').click(function(){
              $(this).next().slideToggle("slow");
              return false;
            }).next().hide();
          }
        };
    })(jQuery);
</script>

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

...

Prêt pour un peu de magie?

  • Créez un nouvel article
  • Assurez-vous que le format du champ Corps (Body) est à Full HTML
  • Désactivez le texte riche
  • Ajoutez le code qui suit (le CSS est optionnel)
<style type="text/css">
  p.toggler:hover {
    color:#008000;
  }
</style>

<p class="toggler" style="cursor:pointer;">Révéler/Masquer le paragraphe suivant.</p>
<div>
    Ce paragraphe est initialement caché. Quand on clique sur le lien, tout le contenu de la DIV qui suit apparaîtra à condition qu'on lui assigne la classe "toggler" (i.e. basculer).
</div>
Enregistrez et puis cliquez sur Révéler/Masquer jusqu'à ce que vous soyez complètement repu.

Ajouter un commentaire

Plain text

  • Aucune balise HTML autorisée.
  • Les adresses de pages web et de courriels sont transformées en liens automatiquement.
  • Les lignes et les paragraphes vont à la ligne automatiquement.
Actualiser Type the characters you see in this picture. Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.