From 56c852aca5e2c984b0b3e37711eab5dcb389f509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fabrice=20PENHO=C3=8BT?= Date: Tue, 18 Jan 2022 16:51:12 +0100 Subject: [PATCH] =?UTF-8?q?Relecture=20+=20=C3=A9volutions=20mineures=20du?= =?UTF-8?q?=20code.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/vCarousel.ts | 50 ++++++++++++++++----------------- tests/vCarouselSpec.ts | 64 +++++++++++++++++++++--------------------- 2 files changed, 57 insertions(+), 57 deletions(-) diff --git a/src/vCarousel.ts b/src/vCarousel.ts index 27f5978..61b4a2e 100644 --- a/src/vCarousel.ts +++ b/src/vCarousel.ts @@ -1,10 +1,10 @@ const errors=require("./errors.js"); -// La classe vCarousel est instanciée en recevant 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. +// La classe vCarousel est instanciée en recevant un tableau contenant les ids des conteneurs HTML des vidéos à afficher successivement. +// Le tableau n'est pas dédoublonné, de manière à rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel. // Plusieurs options sont possibles : // - firstVideoId est une chaîne permettant de fournir l'id du conteneur de la première vidéo à afficher lors de l'appel. Par défaut la première vidéo de la liste sera affichée. Si on passe une chaîne vide, aucune ne sera affichée. -// - playFirstVideo et playNextVideos demandent de lancer automatiquement la lecture respectivement de la vidéo demandée et de celles automatiquement chargée par la fonction. Ce n'est pas le cas par défaut et peut être bloqué par le navigateur. +// - playFirstVideo et playNextVideos demandent de lancer automatiquement la lecture, respectivement de la première vidéo demandée et de celles ensuite chargées. Ce n'est pas le cas par défaut et peut être bloqué par le navigateur. // - noStop permet de demander à ce que les vidéos continuent à tourner, même quand toutes ont été affichées. Par défaut, le carrousel s'arrête. interface videoDOM { @@ -23,33 +23,33 @@ export class vCarousel private nbVContainers: number = 0; private _currentVideo: HTMLMediaElement|undefined = undefined; - // Les ids reçus doivent correspondre à des éléments HTML contenant une vidéo. + // Les ids reçus doivent correspondre à des éléments HTML contenant une vidéo : set vContainers(vContainersIds: string[]) { - for(let containerId of vContainersIds) + for(const containerId of vContainersIds) { - let checkContainerExist=document.getElementById(containerId); + const checkContainerExist=document.getElementById(containerId); if(checkContainerExist === null) throw new Error(errors.elementNotFound+containerId); else { - let checkVideoExist=document.querySelector("#"+containerId+" video"); + const checkVideoExist=document.querySelector("#"+containerId+" video"); if(checkVideoExist === null) throw new Error(errors.videoNotFound+containerId); else this._vContainers.push({id:containerId, containerElt:checkContainerExist, videoElt:checkVideoExist}); } } - // Il faut au moins 2 vidéos à faire tourner. + // Il faut au moins 2 vidéos à faire tourner : this.nbVContainers=this._vContainers.length; if(this.nbVContainers < 2) throw new Error(errors.need2Videos); } - // Si this._firstVideoId a été fourni, on vérifie qu'il est présent dans la liste des conteneurs de vidéos. + // this._firstVideoId doit être résent dans la liste des conteneurs de vidéos : set firstVideoId(firstVideo: string|undefined) { - if((firstVideo!==undefined && firstVideo!=="" && this._vContainers.findIndex(video => video.id === firstVideo) !== -1) || ( firstVideo==="")) + if((firstVideo !== undefined && firstVideo !== "" && this._vContainers.findIndex(video => video.id === firstVideo) !== -1) || ( firstVideo === "")) this._firstVideoId=firstVideo; } @@ -81,47 +81,47 @@ export class vCarousel public run(): void { const vCarousel=this; // évite les confusions avec le "this" des événements plus bas. - if(vCarousel.nbVContainers < 2) + if(vCarousel.nbVContainers < 2) // permet en fait de tester que le setter vContainers a bien été appelé throw new Error(errors.needVideosProvided); for (let i = 0; i < vCarousel.nbVContainers; i++) { - let vContainer=vCarousel._vContainers[i].containerElt; - let video=vCarousel._vContainers[i].videoElt; - if((vCarousel._firstVideoId!==undefined && vCarousel._vContainers[i].id!==vCarousel._firstVideoId) || (vCarousel._firstVideoId===undefined && i!==0) || vCarousel._firstVideoId==="") - vContainer.style.display = "none"; + const vContainer=vCarousel._vContainers[i].containerElt; + const video=vCarousel._vContainers[i].videoElt; + if((vCarousel._firstVideoId !== undefined && vCarousel._vContainers[i].id !== vCarousel._firstVideoId) || (vCarousel._firstVideoId === undefined && i !== 0) || vCarousel._firstVideoId === "") + vContainer.style.display="none"; else { // Si une vidéo est déjà visible et en cours de lecture, je la stoppe // Sinon elle risque de continuer à être lue tout en étant cachée. - if(vCarousel._currentVideo!==undefined && !vCarousel._currentVideo.paused) + if(vCarousel._currentVideo !== undefined && ! vCarousel._currentVideo.paused) vCarousel._currentVideo.pause(); - // J'affiche la première vidéo et j'essaye de la lancer, si cela est demandé - vContainer.style.display = "block"; + // On affiche la première vidéo et essaye de la lancer, si cela est demandé : + vContainer.style.display="block"; vCarousel._currentVideo=video; - if(vCarousel._playFirstVideo===true) + if(vCarousel._playFirstVideo) video.play(); } var nbTurn=0; video.addEventListener("ended", function() { - // Sauf si demandé, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois. - if(nbTurn < (vCarousel.nbVContainers-1) || vCarousel._noStop===true) + // Sauf si demandé, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois : + if(nbTurn < (vCarousel.nbVContainers-1) || vCarousel._noStop) { - vContainer.style.display = "none"; + vContainer.style.display="none"; let nextVContainer: HTMLElement, nextVideo: HTMLMediaElement, nextHash: string, nextOne=0; if(i < (vCarousel.nbVContainers-1)) nextOne=i+1; nextVContainer=vCarousel._vContainers[nextOne].containerElt; nextVideo=vCarousel._vContainers[nextOne].videoElt; nextHash=vCarousel._vContainers[nextOne].id; - nextVContainer.style.display = "block"; + nextVContainer.style.display="block"; vCarousel._currentVideo=nextVideo; // On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée. // Attention car cela peut provoquer un déplacement dans la page pour atteindre l'ancre. window.location.assign("#"+nextHash); - // On essaye de lancer la vidéo, si demandé. - if(vCarousel._playNextVideos===true) + // On essaye de lancer la vidéo, si demandé : + if(vCarousel._playNextVideos) nextVideo.play(); nbTurn++; } diff --git a/tests/vCarouselSpec.ts b/tests/vCarouselSpec.ts index c7b0e33..3c3b9dc 100644 --- a/tests/vCarouselSpec.ts +++ b/tests/vCarouselSpec.ts @@ -1,62 +1,62 @@ import { vCarousel } from "../src/vCarousel"; const errors=require("../src/errors.js"); -describe("vCarousel", function() +describe("vCarousel", () => { let vCarouselTest : vCarousel; const videosWebDir="https://forge.chapril.org/Fab_Blab/vCarousel/src/branch/master/public/videos"; const fixture="
"; - beforeEach(function() + beforeEach(() => { vCarouselTest=new vCarousel(); document.body.insertAdjacentHTML('afterbegin', fixture); }); - afterEach(function() + afterEach(() => { document.body.removeChild(document.getElementById('fixture')); }); - it("Should be an instance of vCarousel", function() + it("Doit être une instance de vCarousel", () => { expect(vCarouselTest).toBeInstanceOf(vCarousel); }); - describe("Setting vCarousel", function() + describe("Configuration de vCarousel", () => { - it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML existants.", function() + it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML existants.", () => { - expect(function() { return vCarouselTest.vContainers=["dontExistId","video1","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId"); - expect(function() { return vCarouselTest.vContainers=["video1","dontExistId","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId"); - expect(function() { return vCarouselTest.vContainers=["video1","video2","dontExistId"]; }).toThrowError(errors.elementNotFound+"dontExistId"); + expect(() => { return vCarouselTest.vContainers=["dontExistId","video1","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId"); + expect(() => { return vCarouselTest.vContainers=["video1","dontExistId","video2"]; }).toThrowError(errors.elementNotFound+"dontExistId"); + expect(() => { return vCarouselTest.vContainers=["video1","video2","dontExistId"]; }).toThrowError(errors.elementNotFound+"dontExistId"); }); - it("Doit générer une erreur si tous les ids passés ne correspondent pas à des éléments HTML contenant une balise