From a726ff51fe8cbde315e86aed129f31465f17c254 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= <fabrice@le-fab-lab.com>
Date: Tue, 18 Jan 2022 17:58:25 +0100
Subject: [PATCH] =?UTF-8?q?Relecture=20et=20=C3=A9volutions=20des=20pages?=
 =?UTF-8?q?=20de=20d=C3=A9mo.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/flickity.html   |  4 ++--
 public/index.html      |  2 +-
 src/example.ts         |  5 +++--
 src/exampleFlickity.ts | 21 +++++++++++----------
 4 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/public/flickity.html b/public/flickity.html
index 6c64b0c..c4e2333 100644
--- a/public/flickity.html
+++ b/public/flickity.html
@@ -13,8 +13,8 @@
 <body>
     <div id="videos">
         <h1 id="title">vCarousel</h1>
-        <p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement.</p>
-
+        <p>Dans cet exemple vCarousel est associé à un carrousel d’images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l’affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement et le carrousel boucle à l’infini. <a  href="./">Retour à l’exemple de base</a>.</p>
+        
         <figure id="vFunanbule">
             <video controls preload="metadata">
                 <source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
diff --git a/public/index.html b/public/index.html
index eccf549..294947b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,7 +12,7 @@
 <body>
     <div id="videos">
         <h1>vCarousel</h1>
-        <p>Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionnée dans le menu, sa lecture se lance automatiquement. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.</p>
+        <p>Exemple d’utilisation simple : lorsqu’une vidéo se termine, la suivante la remplace et sa lecture est lancée, ceci jusqu’à ce que toutes les vidéos aient été parcourues. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d’utilisation où vCarousel est associé à un carrousel d’images Flickity.</p>
 
         <figure id="vFunanbule">
             <video controls="controls" preload="metadata" width="800">
diff --git a/src/example.ts b/src/example.ts
index 7276c3e..6743291 100644
--- a/src/example.ts
+++ b/src/example.ts
@@ -9,16 +9,17 @@ try
     testvCarousel.vContainers=videosContainers;
     
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
-    if(window.location.hash!==undefined && window.location.hash!=="")
+    if(window.location.hash !== undefined && window.location.hash !== "")
         testvCarousel.firstVideoId=window.location.hash.replace("#","");
     // On lance le carrousel :
+    testvCarousel.playNextVideos=true;
     testvCarousel.run();
     
     // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
     let selectLinks=document.querySelectorAll(".selectVideo");
     for (let i = 0; i < selectLinks.length; i++)
     {
-        let link=<HTMLAnchorElement>selectLinks[i];
+        const link=<HTMLAnchorElement>selectLinks[i];
         link.addEventListener("click", function(e)
         {
             testvCarousel.firstVideoId=link.hash.replace("#","");
diff --git a/src/exampleFlickity.ts b/src/exampleFlickity.ts
index eaf1baa..d236f00 100644
--- a/src/exampleFlickity.ts
+++ b/src/exampleFlickity.ts
@@ -1,20 +1,20 @@
 // Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
-const Flickity = require("flickity");
+const Flickity=require("flickity");
 import { vCarousel } from "./vCarousel";
 
 // Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
 const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
 {
     let nb=0, find=false;
-    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
-    for(let cel of flickityCarousel.cells)
+    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
+    for(const cel of flickityCarousel.cells)
     {
-        let childrens = cel.element.childNodes;
-        for (let i = 0, c = childrens.length; i < c; i++)
+        const childrens=cel.element.childNodes;
+        for (let i=0, c=childrens.length; i < c; i++)
         {
             if (childrens[i].nodeType === Node.ELEMENT_NODE)
             {
-                if(childrens[i].hash!=undefined && childrens[i].hash===urlHash)
+                if(childrens[i].hash !== undefined && childrens[i].hash === urlHash)
                 {
                     flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
                     find=true;
@@ -24,15 +24,15 @@ const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
         }
         nb++;
     }
-    if(find===false)
+    if(find === false)
         console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
 }
 
 try
 {
     // Initialisation Flickity :
-    const imgCarousel = document.querySelector(".img-carousel");
-    const flktyCarousel = new Flickity(imgCarousel,
+    const imgCarousel=document.querySelector(".img-carousel");
+    const flktyCarousel=new Flickity(imgCarousel,
     {
       // options : https://flickity.metafizzy.co/options.html
       accessibility: true,
@@ -48,7 +48,7 @@ try
     testvCarousel.vContainers=videosContainers;
     
     // Si un id est fourni par l'url, on affiche cette vidéo en premier :
-    if(window.location.hash!==undefined && window.location.hash!=="")
+    if(window.location.hash !== undefined && window.location.hash !=="")
     {
         testvCarousel.firstVideoId=window.location.hash.replace("#","");
         selectFlickityForHash(flktyCarousel, location.hash);
@@ -68,6 +68,7 @@ try
             // ici on demande la lecture automatique de toutes les vidéos :
             testvCarousel.playFirstVideo=true;
             testvCarousel.playNextVideos=true;
+            testvCarousel.noStop=true;
             testvCarousel.run();
         });
     }
