TP n°6 : Surcharger des gabarits et ajouter des librairies CSS et JS dans un module de Drupal

Drupal 8

TP n°6 : Surcharger des gabarits et ajouter des librairies CSS et JS dans un module de Drupal

Soumis par Antoine le ven 03/04/2020 - 15:22

Au cours de ce tp, vous allez créer un diaporama. Le but n'est évidemment pas de faire mieux que view slideshow, mais d'apprendre à surcharger des gabarits depuis un module et d'intégrer des bibliothèques CSS et JS

Objectifs pédagogiques

  • Surcharger des gabarits depuis un module
  • Intégrer des librairies à un module
  • Transmettre des variables php à un scrit JS

Missions

Vous devez créer un module qui génère un type de contenu appelé "Diapos" qui permet de diffuser des slideshows. Ce type de contient 3 champs :

  • un champ référence image qui peut contenir autant d'image que nécessaire et qui aura comme nom machine field_diapos
  • un champ body qui servira de description du diaporama et qui s'affichera sous le diaporama
  • un champ booléen défilement auto qui permet à l'administrateur de choisir si le diaporama doit défiler automatiquement. Ce champ ne s'affichera pas dans le diapo

Vous trouverez ci-dessous une petite démonstration du module

Les étapes

Tâches à réaliser Ressources utiles
1 Créer le squelette du module Créer un squelette de module avec Drush
2 Paramétrer son Drupal local pour faire du templating Configurer son environnement pour faire du templating
3 Créer le type de contenu dans l'interface graphique  
4 Exporter la config du type de contenu dans le module avec Drupal console Créer un type de contenu lors de l'installation 
5 Tenir compte du bug de drupal console en corrigeant le nom des fichiers pour enlever la double extension yml   
6 Supprimer le type contenu grâce à l'interface graphique  
7 Installer le module et vérifier que le type de contenu existe bien Installer et active run module avec Drush
8 Avec l'interface graphique, créer un type de contenu "Diapos" avec plusieurs images et une description et l'afficher  
9

Repérer grâce aux outils de développement de votre navigateur, le gabarit qui affiche le nœud et celui qui affiche le champ field_diapos.

Faites une copie de ces 2 gabarits dans le dossier templates de votre module.

Renommer ces gabarit en tp6--node.html.twig et tp6--field.html.twig 

Modifier un gabarit
10

Créer le fichier nommodule.module et créer la méthode nommodule_theme. Cette méthode doit générer les deux thèmes qui surchargent les gabarits du nœud et du champ avec les gabarits que vous avez créés.

Rajouter du texte dans les gabarit, faites un "drush cr" pour vérifier que c'est bien vos gabarits qui sont utilisés. Il faut vider le cache après chaque modification du fichier nommodule.theme.

Surcharger un gabarit
11 Dans le fichier tp6--node rajouter la classe diapos à la div qui entoure le nœud  
12

Dans le fichier tp---field repérer les 3 situations où le contenu est affiché. A chaque fois :

encadrer le contenu par une div avec la classe groupe_diapo

A l'intérieur de cette div mettre 2 div avec la classe "colonne". La première colonne est située avant le contenu, la div du contenu, la seconde après

A l'intérieur des div "colonne", mettre une div avec la classe "fleche" et l'attribut "data-sens" qui pourra avoir la valeur "gauche" ou "droite". Dans les div "fleche", ajouter une image de flèche. Encadrer cette l'image de la flèche gauche avec une condition qui ne l'affiche pas pour la première itération de la boucle. Faites la même chose avec l'image de la flèche droite pour la dernière itération.

Le code ajoute la classe "field_item" au "content". Rajouter la classe "diapo"

 
13

Créer le fichier libraries.yml, les répertoires css et js et les fichiers tp6.css et tp6.js. Déclarer une librairie nommée TP6 qui utilise les fichiers tp6.css et tp6.js

Dans le fichier css rajouter un background-color: red sur la classe diapo. Ajouter un console.log("lib diapo") dans le fichier js.

Attacher du js et du css à un module
14

Dans le fichier nommodule.module, ajouter le hook de prépocess du node diapo et charger la librairie tp6. 

Vider le cache et vérifier si la libraire est bien chargée en cherchant le background-color et le console.log

 
15

Dans le fichier css :

  • faites le nécessaire pour centrer les images, les flèches... La structure html permet de tout faire avec du flex
  • créer une classe cache qui donne une height:0 et un overflow:hidden

 

 
16

Dans le fichier js :

Récupérer toutes les div qui ont la classe "fleche" et celles qui ont la classe "groupe_diapo" avec queryselectorAll

  • Créer la fonction init(i) qui parcoure le tableau des "groupe_diapo" pour enlever la classe "cache" à la groupe_diapo" indiqué en argument et qui la rajoute à toutes les autres
  • Ajouter un événement "click" sur toutes les div qui ont la classe "fleche". Cet événement lance une fonction "clcifleche" qui
    • ajoute la classe "cache" au groupe_diapo parent de la flèche
    • enlève la classe "cache" au groupe_diapo suivant ou précédent en fonction de la valeur de l'attribut "data-sens" 
 
17

Dans le hook_preprocess du node diapo, récupérer la valeur du champs défilement auto et transmettez la à la librairie tp6. 

Après avoir vidé le cache, utiliser console log pour vérifier que la valeur du champ est bien transmise

Transmettre des variables php à des librairies JS
18

Dans le fichier js :

Si le champ défilement auto est égale à 1, initialiser un compteur à 0 et faire un setInterval qui :

  • lance la fonction init(compteur)
  • test si le compteur + 1 est égal à la taille du tableau des groupe_diapo
  • si oui, remet le compteur à 0
  • si non, incrémente le compteur de 1

 

 

 

Version