Nouveau build des fichiers

src/example.js

@@ -1,15 +1,15 @@
 "use strict";
 exports.__esModule = true;
-/// Exemple d'utilisation de vCarousel avec 3 vidéos
+/// Exemple d'utilisation simple de vCarousel avec 3 vidéos
 var vCarousel_1 = require("./vCarousel");
 try {
-    // Liste des id des contenants des vidéos à afficher : 
+    // Liste des id des contenants des vidéos à faire tourner : 
     var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"];
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
     if (window.location.hash !== undefined && window.location.hash !== "")
         vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
     else
-        vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif sauf si on souhaite qu'une des vidéos soit affichée par défaut
+        vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif, sauf si on souhaite qu'une vidéo autre que la première soit affichée par défaut
     // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
     var selectLinks = document.querySelectorAll(".selectVideo");
     var _loop_1 = function (i) {

src/exampleFlickity.js

@@ -0,0 +1,66 @@
+"use strict";
+exports.__esModule = true;
+/// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
+var Flickity = require("flickity");
+var vCarousel_1 = require("./vCarousel");
+// Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
+var selectFlickityForHash = function (flickityCarousel, urlHash) {
+    var nb = 0, find = false;
+    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
+    for (var _i = 0, _a = flickityCarousel.cells; _i < _a.length; _i++) {
+        var cel = _a[_i];
+        var childrens = cel.element.childNodes;
+        for (var i = 0, c = childrens.length; i < c; i++) {
+            if (childrens[i].nodeType === Node.ELEMENT_NODE) {
+                if (childrens[i].hash != undefined && childrens[i].hash === urlHash) {
+                    flickityCarousel.select(nb); // API Flickity : https://flickity.metafizzy.co/api.html
+                    find = true;
+                    break;
+                }
+            }
+        }
+        nb++;
+    }
+    if (find === false)
+        console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
+};
+try {
+    // Carrousel Flickity :
+    var imgCarousel = document.querySelector(".img-carousel");
+    var flktyCarousel_1 = new Flickity(imgCarousel, {
+        // options : https://flickity.metafizzy.co/options.html
+        accessibility: true,
+        cellAlign: "center",
+        contain: true,
+        rightToLeft: true,
+        wrapAround: true
+    });
+    // Liste des id des contenants des vidéos à faire tourner : 
+    var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"];
+    // Si un id est fourni par l'url, on affiche cette vidéo en premier :
+    if (window.location.hash !== undefined && window.location.hash !== "") {
+        vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
+        selectFlickityForHash(flktyCarousel_1, location.hash);
+    }
+    else
+        vCarousel_1.vCarousel(videosContainers_1, ""); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
+    // Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
+    var selectLinks = document.querySelectorAll(".selectVideo");
+    var _loop_1 = function (i) {
+        var link = selectLinks[i];
+        link.addEventListener("click", function (e) {
+            vCarousel_1.vCarousel(videosContainers_1, link.hash.replace("#", ""));
+        });
+    };
+    for (var i = 0; i < selectLinks.length; i++) {
+        _loop_1(i);
+    }
+    // De même quand le hash change, on adapte l'item sélectionné de flickity
+    // Ceci permet de suivre le parcours des vidéos par vCarousel
+    window.addEventListener('hashchange', function () {
+        selectFlickityForHash(flktyCarousel_1, location.hash);
+    });
+}
+catch (e) {
+    console.error(e);
+}

src/vCarousel.js

@@ -1,11 +1,12 @@
 "use strict";
+exports.__esModule = true;
+exports.vCarousel = void 0;
+var Flickity = require("flickity");
 /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
 /// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel.
 /// On peut éventuellement fournir l'id du conteneur de la première vidéo à afficher lors de l'appel
 /// Ou encore indiqué qu'aucune ne doit être affichée sans action en passant une chaîne vide
 /// Par défaut la première vidéo de la liste sera affichée
-exports.__esModule = true;
-exports.vCarousel = void 0;
 exports.vCarousel = function (vContainers, firstVideoId) {
     // On commence par vérifier que les ids de conteneurs fournis sont correctes.
     // C'est-à-dire qu'il s'agit bien d'éléments HTML contenant au moins une vidéo.