Ajout possibilité de n'afficher aucune vidéo par défaut.

This commit is contained in:
Fabrice PENHOËT 2021-04-06 18:28:15 +02:00
parent 1e7666c44c
commit f7a58cf399
5 changed files with 27 additions and 23 deletions

File diff suppressed because one or more lines are too long

View File

@ -6,10 +6,10 @@ try {
// Liste des id des contenants des vidéos à afficher : // Liste des id des contenants des vidéos à afficher :
var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"]; var videosContainers_1 = ["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 :
if (window.location.hash !== undefined) if (window.location.hash !== undefined && window.location.hash !== "")
vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", "")); vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
else else
vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif 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
// 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 :
var selectLinks = document.querySelectorAll(".selectVideo"); var selectLinks = document.querySelectorAll(".selectVideo");
var _loop_1 = function (i) { var _loop_1 = function (i) {

View File

@ -6,10 +6,10 @@ 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 :
if(window.location.hash!==undefined) if(window.location.hash!==undefined && window.location.hash!=="")
vCarousel(videosContainers, window.location.hash.replace("#","")); vCarousel(videosContainers, window.location.hash.replace("#",""));
else else
vCarousel(videosContainers);// le deuxième paramètre est facultatif vCarousel(videosContainers);// le deuxième paramètre est facultatif sauf si on souhaite qu'une des vidéos soit affichée par défaut
// 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");

View File

@ -1,11 +1,12 @@
"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 rester 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 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.__esModule = true;
exports.vCarousel = void 0; exports.vCarousel = void 0;
exports.vCarousel = function (vContainers, firstVideoId) { exports.vCarousel = function (vContainers, firstVideoId) {
if (firstVideoId === void 0) { firstVideoId = ""; }
// On commence par vérifier que les ids de conteneurs fournis sont correctes. // 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. // C'est-à-dire qu'il s'agit bien d'éléments HTML contenant au moins une vidéo.
var realVContainers = []; var realVContainers = [];
@ -23,9 +24,9 @@ exports.vCarousel = function (vContainers, firstVideoId) {
} }
} }
// Si firstVideoId a été fourni, on vérifie aussi qu'il est valide. // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
if (firstVideoId !== "" && (realVContainers.findIndex(function (video) { return video.id === firstVideoId; }) === -1)) { if (firstVideoId !== undefined && firstVideoId !== "" && (realVContainers.findIndex(function (video) { return video.id === firstVideoId; }) === -1)) {
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 = undefined;
} }
// Il doit rester au moins deux vidéos à faire tourner. // Il doit rester au moins deux vidéos à faire tourner.
var nbVContainers = realVContainers.length; var nbVContainers = realVContainers.length;
@ -35,7 +36,7 @@ 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 !== undefined && realVContainers[i].id !== firstVideoId) || (firstVideoId === undefined && i !== 0) || firstVideoId === "")
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.

View File

@ -1,9 +1,11 @@
/// 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 rester 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 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
export const vCarousel = (vContainers:string[], firstVideoId="") : void => export const vCarousel = (vContainers:string[], firstVideoId?:string) : void =>
{ {
interface videoDOM interface videoDOM
{ {
id: string; id: string;
@ -30,10 +32,10 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
} }
// Si firstVideoId a été fourni, on vérifie aussi qu'il est valide. // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
if(firstVideoId!=="" && (realVContainers.findIndex(video => video.id === firstVideoId) === -1)) if(firstVideoId!==undefined && firstVideoId!=="" && (realVContainers.findIndex(video => video.id === firstVideoId) === -1))
{ {
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=undefined;
} }
// Il doit rester au moins deux vidéos à faire tourner. // Il doit rester au moins deux vidéos à faire tourner.
@ -48,7 +50,7 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
{ {
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!==undefined && realVContainers[i].id!==firstVideoId) || (firstVideoId===undefined && i!==0) || firstVideoId==="")
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.