Ajouter un script

De nombreuses bibliothèques Jquery  sont présentes en natif dans l'architecture de Drupal 8.
Cependant, leur mise en oeuvre dans mon site n'a pas été intuitive pour  plusieurs raisons :

• la documentation en français sur la question  est très rare ;
• la documentation en anglais n'est pas adaptée pour un développeur amateur ;

Ces notes restituent donc les étapes à suivre pour utiliser un script JS dans un site sous D8.

NB1 : Pour clarifier ces notes, je suppose dans la suite de ce billet que le thème sur lequel nous travaillons se nomme dh. Les fichiers seront donc stockés dans le répertoire custom/dh.
NB2 : revoir l'organisation des fichiers d'un thème

1. adapter le fichier dh.info.yml présent dans themes/custom/dh (ou "dh" est à remplacer par le nom de votre thème) ;
2. adapter le fichier dh.libraries.yml présent dans ce même répertoire ;
3. créer votre fichier script.js
4. décocher "agréger les fichiers javascript" de la page /admin/config/development/performance ; enregistrer cette modification ;
5. vider les caches (depuis cette même page) ;
6. re-cocher "agréger les fichiers javascript".

le fichier dh.info.yml doit comporter dans sa section libraries la  ligne - dh/global-scripts où global-scripts est une section du fichier des librairies

Pour un complément sur le fichier de libraries

name: dh
type: theme
description: 'mon theme drupal 8 '
package: dh
core: 8.x

libraries:
    - dh/global-styling
    - dh/global-scripts

base theme: classy

logo: images/dhsite.gif

screenshot: screenshot.png

regions:
  header: Header
  content: Content
  help: Help
  breadcrumb: Breadcrumb
  page_top: 'Page top'
  page_bottom: 'Page bottom'
  highlighted: Highlighted  
  featured: Featured
  sidebar_first: 'Left sidebar'
  sidebar_second: 'Right sidebar'  
  footer: Footer

Ajouter la section global-scripts (cf. dh.info.yml) et ses 2 sous-sections : js et dependencies.

• la section js indique le nom et l'emplacement du script. Dans mon exemple :
  • il se nomme script.js
  • il se trouve dans le dossier "custom/dh/js" ( rappel : dh est le nom du thème)
• la section "dependencies" liste les bibliothèques utiles à l'exécution du script dhv3.js
  • dans mon exemple celles-ci figurent dans le coeur de drupal (dossier "core" du site)

global-styling:
  css:
    component:
      css/style.css: {}
      css/dhv3-sf.css: {}

global-scripts:
  js:
    js/script.js: {}

  dependencies:
    - core/jquery
    - core/jquery.ui

Dans ce fichier figureront les instructions permettant de styliser nos pages de manière dynamique.

En dehors de Drupal, un script qui utilise des fonctions d'une bibliothèque jQuery débute par

$(function(){
   ....
});

dans l'environnement D8, votre script doit débuter par

(function ($) {
  Drupal.behaviors.dh = {
    attach: function (context, settings) {
      ......
    }
  };
})(jQuery);

Pour des plus amples informations sur Drupal.behaviors, cliquez ici.

Le script suivant

• colore en rouge le contenu des balises <h1>
• colore en rouge les éléments du DOM de classe .book-navigation
• affiche le texte "et oui, ca marche" dans la console des outils de développement web des navigateurs.

(function ($) {
  Drupal.behaviors.dhv3 = {
    attach: function (context, settings) {
      $('h1').css('color','red');
      $('.book-navigation', context).css('color','red');
      console.info ('et oui, ca marche...');
    }
  };
})(jQuery);