Relecture des script + build.

This commit is contained in:
Fabrice PENHOËT 2021-04-01 17:20:09 +02:00
parent 391465a54a
commit 1e7666c44c
5 changed files with 62 additions and 37 deletions

File diff suppressed because one or more lines are too long

27
src/example.js Normal file
View File

@ -0,0 +1,27 @@
"use strict";
exports.__esModule = true;
/// Exemple d'utilisation de vCarousel avec 3 vidéos
var vCarousel_1 = require("./vCarousel");
try {
// Liste des id des contenants des vidéos à afficher :
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)
vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
else
vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif
// 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) {
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);
}
}
catch (e) {
console.error(e);
}

View File

@ -1,15 +1,15 @@
/// Exemple d'utilisation de vCarousel avec 3 vidéos /// Exemple d'utilisation de vCarousel avec 3 vidéos
import { vCarousel } from "./vCarousel.ts"; import { vCarousel } from "./vCarousel";
try try
{ {
// Liste des id des contenants des vidéos à afficher : // Liste des id des contenants des vidéos à afficher :
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"]; const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
// Si un id est fourni par l'url, on affiche cette vidéo en premier : // Si un id est fourni par l'url, on affiche cette vidéo en premier :
let wantedVideo="";
if(window.location.hash!==undefined) if(window.location.hash!==undefined)
wantedVideo=window.location.hash.replace("#",""); vCarousel(videosContainers, window.location.hash.replace("#",""));
vCarousel(videosContainers, wantedVideo); else
vCarousel(videosContainers);// le deuxième paramètre est facultatif
// Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage : // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
let selectLinks=document.querySelectorAll(".selectVideo"); let selectLinks=document.querySelectorAll(".selectVideo");
@ -18,8 +18,7 @@ try
let link=<HTMLAnchorElement>selectLinks[i]; let link=<HTMLAnchorElement>selectLinks[i];
link.addEventListener("click", function(e) link.addEventListener("click", function(e)
{ {
wantedVideo=link.hash.replace("#",""); vCarousel(videosContainers, link.hash.replace("#",""));
vCarousel(videosContainers, wantedVideo);
}); });
} }
} }

View File

@ -1,6 +1,6 @@
"use strict"; "use strict";
/// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement. /// 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 reste libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel /// 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 de la première vidéo à afficher. /// On peut éventuellement fournir l'id de la première vidéo à afficher.
exports.__esModule = true; exports.__esModule = true;
exports.vCarousel = void 0; exports.vCarousel = void 0;
@ -27,7 +27,7 @@ exports.vCarousel = function (vContainers, firstVideoId) {
console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide."); console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide.");
firstVideoId = ""; firstVideoId = "";
} }
// Il doit rester au moins deux vidéos // Il doit rester au moins deux vidéos à faire tourner.
var nbVContainers = realVContainers.length; var nbVContainers = realVContainers.length;
if (nbVContainers < 2) if (nbVContainers < 2)
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel."); console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
@ -35,10 +35,10 @@ exports.vCarousel = function (vContainers, firstVideoId) {
var _loop_1 = function (i) { var _loop_1 = function (i) {
var vContainer = realVContainers[i].containerElt; var vContainer = realVContainers[i].containerElt;
var video = realVContainers[i].videoElt; var video = realVContainers[i].videoElt;
if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId == "" && i !== 0)) if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId === "" && i !== 0))
vContainer.style.display = "none"; vContainer.style.display = "none";
else else
vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage.
video.addEventListener("ended", function () { video.addEventListener("ended", function () {
vContainer.style.display = "none"; vContainer.style.display = "none";
var nextVContainer, nextHash; var nextVContainer, nextHash;
@ -51,13 +51,13 @@ exports.vCarousel = function (vContainers, firstVideoId) {
nextHash = realVContainers[0].id; nextHash = realVContainers[0].id;
} }
nextVContainer.style.display = "block"; nextVContainer.style.display = "block";
// On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée // 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 la première fois pour atteindre l'ancre (à revoir) // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
window.location.assign("#" + nextHash); window.location.assign("#" + nextHash);
}); });
}; };
// Tous les conteneurs sont cachés, sauf celui demandé // Tous les conteneurs sont cachés, sauf celui demandé.
// La fin de lecture d'une vidéo provoque l'affichage du suivant // La fin de lecture d'une vidéo provoque son remplacement par la suivante.
for (var i = 0; i < nbVContainers; i++) { for (var i = 0; i < nbVContainers; i++) {
_loop_1(i); _loop_1(i);
} }

View File

@ -1,5 +1,5 @@
/// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement. /// 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 reste libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel /// 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 de la première vidéo à afficher. /// On peut éventuellement fournir l'id de la première vidéo à afficher.
export const vCarousel = (vContainers:string[], firstVideoId="") : void => export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
@ -36,22 +36,22 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
firstVideoId=""; firstVideoId="";
} }
// Il doit rester au moins deux vidéos // Il doit rester au moins deux vidéos à faire tourner.
let nbVContainers=realVContainers.length; let nbVContainers=realVContainers.length;
if(nbVContainers < 2) if(nbVContainers < 2)
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel."); console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
else else
{ {
// Tous les conteneurs sont cachés, sauf celui demandé // Tous les conteneurs sont cachés, sauf celui demandé.
// La fin de lecture d'une vidéo provoque l'affichage du suivant // La fin de lecture d'une vidéo provoque son remplacement par la suivante.
for (let i = 0; i < nbVContainers; i++) for (let i = 0; i < nbVContainers; i++)
{ {
let vContainer=realVContainers[i].containerElt; let vContainer=realVContainers[i].containerElt;
let video=realVContainers[i].videoElt; let video=realVContainers[i].videoElt;
if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId=="" && i!==0)) if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId==="" && i!==0))
vContainer.style.display = "none"; vContainer.style.display = "none";
else else
vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage.
video.addEventListener("ended", function() video.addEventListener("ended", function()
{ {
vContainer.style.display = "none"; vContainer.style.display = "none";
@ -67,8 +67,8 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
nextHash=realVContainers[0].id; nextHash=realVContainers[0].id;
} }
nextVContainer.style.display = "block"; nextVContainer.style.display = "block";
// On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée // 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 la première fois pour atteindre l'ancre (à revoir) // Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
window.location.assign("#"+nextHash); window.location.assign("#"+nextHash);
}); });
} }