LIFWEB - TP2 - Gallerie DOM

L’environnement de développement standard pour cette UE est un OS Linux, l’éditeur VSCode, Node.js 18.x ou supérieur, et le navigateur Firefox.

Pour ce deuxième TP, on utilisera un éditeur, un terminal, et Firefox.

Comme pour les autres TPs, s’appuyer sur les documentations de référence : https://javascript.info/ et https://developer.mozilla.org/en-US/docs/Web/JavaScript.

Il est recommandé d’utiliser l’extension https://ritwickdey.github.io/vscode-live-server/ (VSCode, Open-VSX) et de choisir qu’elle ouvre la page dans un navigateur en navigation privée (option liveServer.settings.CustomBrowser).

Important : Quand des liens vers des fichiers sont fournis dans le TP, enregistrez les sur votre compte en faisant clic-droit Save Link As… / Enregistrer sous….

On donne les fichiers de départs suivants :

• pokemon-gallery.html, à compléter lors du TP
• pokemon-gallery.js, chargé par le précédent, à compléter lors du TP
• pokemon-data.js, chargé par le précédent, contient le jeu de données décrivant les decks de pokemons
• pokemon-gallery.css, fichier CSS à compléter lors du TP

Quand on indique dynamiquement, on entend en JS en manipulant le DOM, pas en éditant les sources des HTML ou CSS.

Exercice 0 (PRÉPARATION) : manipulation du CSS via les dev tools

Un CSS minimal est fournit ci-dessus, dans l’inspecteur de votre navigateur, manipulez les règles CSS pour tester leur effet.

Vous pouvez par exemple modifier la couleur de fond du titre, ou la hauteur du div associé.

Exercice 1 : DOM et Événements

La sélection d’un deck de pokemon dans le menu déroulant doit déclencher l’affichage de son nom en titre.

Ajouter un handler au menu déroulant pour qu’il modifie le titre de la page (l’élément id=deck-title).

L’événement doit :

1. Récupérer la valeur sélectionnée
2. Mettre à jour le titre du deck dans #deck-title

Le fichier pokemon-data.js contient le jeu de données décrivant les decks de pokemons. Ce dernier est stocké dans une variable globale nommée decks qui contient un tableau constitué de 3 decks.

Dans pokemon-gallery.js la variable decks sera accessible à tout moment.

Exercice 2 : Affichage de la galerie

Créer dynamiquement les cartes Pokémon qui affichent le nom, le type et l’image du pokemon.

Chaque carte sera dans un div de classe pokemon-card, une première définition du style de cette classe est déjà donné dans le CSS.

Utiliser les propriétés de Flexbox pour avoir un rendu proche de celui ci-dessous.

Ajouter un effet de survol hover sur la carte dans le fichier CSS qui va aggrandir la carte quand on passe la souris dessus.

Exercice 3 : Navigation dans la galerie

Créer une classe selected qui corresponde à la carte pokemon sélectionnée. En appuyant sur ← ou → la carte sélectionnée sera changée. Utiliser un handler sur les keyevents comme dans le TP précédent.

Ajouter une règle CSS qui applique une bordure différente à la carte sélectionnée, et l’aggrandisse légèrement.

Exercice 4 : Transformations de la galerie

Traiter de façon différenciée les cartes pour qu’elle s’affichent différement. La gallerie intermédiaire ressemblera à celle-ci :

Pour se faire deux approches sont possibles l’une en CSS, l’autre en Javascript. L’approche CSS a l’avantage de ne pas toucher à la structure du DOM et d’éviter des calculs, elle est préférable à la manipulation avec du JS.

Pour l’approche CSS, utiliser les sélecteurs de “frères et soeur” (siblings) pour appliquer leur appliquer un traitement spécial. Voir cet article d’Alsacréations en français, et celui ci de Stefan Judis en anglais (mieux illustré).

Pour démarrer, modifier la couleur de fond des cartes (les éléments de class pokemon-card)):

• La carte suivant celle sélectionnée aura un fond vert. Le combinateur de voisin direct Next sibling pourra être utilisé.
• Les cartes suivants celle-ci auront toutes un fond vert clair. Le combinateur de voisins suivants Subsequent sibling pourra être utilisé.
• La carte précédent celle sélectionnée sera bleue et celle d’après en bleu clair. Leur sélection est plus complexe car CSS n’offre pas de combinateur “Previous sibling”. Nous allons devoir utiliser une pseudo règle :has. On sélectionne tous les éléments de classe .pokemon-card, et on applique une pseudo règle à tous les éléments précédents pour qu’ils soient bleu clair, on crée ensuite une autre règle pour ne sélectionner que l’élement précédent celui sélectionné avec :has de nouveau.

Pour rappel les règles CSS s’appliquent dans leur ordre de déclaration dans le fichier, en permuttant l’ordre des règles il est possible “d’écraser” une règle précédemment définie.

Exercice 5 : Simplification de la galerie

N’afficher maintenant que trois cartes à la fois : la sélectionnée, la précédente et la suivante. Comme sur l’image suivante :

En s’appuyant sur les règles de l’exercice 4 (les sélecteurs ne changeront pas) définir des règles CSS pour que:

1. Les cartes juste avant et juste après selected soient tournées de 10 degrés.
2. Les autres cartes seront masquées avec visibility:collapse

Exercice 6 (BONUS) : Alternative JS

Répliquer les exercices 4 et 5 avec du javascript pour n’avoir à tout moment que 3 cartes dans le DOM de la page (plus besoin de visibility:collapse).

Pour cela on crée trois cartes qui correspondent aux élément à afficher, lorsqu’on appui sur une flèche, on supprime les cartes du DOM et on insère de nouvelles cartes dans le DOM.

Le CSS peut être grandement simplifié.

Exercice 7 (BONUS) : Template

Pour regrouper l’image et ses boutons, on créera certainement un <div> avec quatre enfants. Plutôt que de créer ces éléments directement avec l’API DOM, on peut transformer ce conteneur en <template> que l’on ajoutera au HTML. Pour chaque nouvelle image, on clonera alors ce modèle comme suit :

const template = document.querySelector("#pokemon-card-template");
const $cardRoot = template.content.cloneNode(true);
/* traitement sur les enfants de $cardRoot */
$gallery.append($cardRoot);

⚠️ Dans l’exemple $cardRootest un HTMLTemplateElement dont l’attribut HTMLTemplateElement.content (MDN) est un DocumentFragment (MDN) dont seuls les enfants sont ajoutés au DOM.