Fab_Blab/vCarousel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Ajout de la possibilité de choisir la première vidéo à afficher (navigation)

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-04-01 12:58:47 +02:00
parent 01c3750ba0
commit 04aacc83cf
5 changed files with 187 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
public/JS/example.app.js
View File

File diff suppressed because one or more lines are too long

13
public/index.html
View File

@ -2,7 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>vCarrousel (démo)</title> <title>vCarrousel (démo)</title>
<meta name="description" content="Page d'exemple pour le script vCarousel.">
<meta name="robots" content="noindex">
<script src="JS/example.app.js" defer></script> <script src="JS/example.app.js" defer></script>
</head> </head>
<body> <body>
@ -26,5 +28,14 @@
</video> </video>
<figcaption>Drôle de circuit !</figcaption> <figcaption>Drôle de circuit !</figcaption>
</figure> </figure>
<nav>
<h3>Au menu</h3>
<ul>
<li><a href="#vFunanbule" class="selectVideo">Le funanbule</a></li>
<li><a href="#vForgeron" class="selectVideo">Le forgeron</a></li>
<li><a href="#vCircuit" class="selectVideo">Le circuit</a></li>
</ul>
</nav>
<aside><p>Les courtes vidéos de cette page d'exemple ont été enregistrées le 11 août 2016 au <a href="https://www.poeteferrailleur.com/">Poète ferrailleur</a> à Lizio dans le Morbihan.</p></aside>
</body> </body>
</html> </html>

25
src/example.ts
View File

@ -1,14 +1,27 @@
/// 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.ts";
// Fournir ici la liste de contenants (div, figure...) des vidéos à faire défiler
// L'ordre est celui de défilement et peut être différent de celui de la page HTML
// La même vidéo peut même être listé plusieurs fois...
// La première entrée correspondant à la vidéo affichée au premier chargement de la page
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
try try
{ {
vCarousel(videosContainers); // Liste des id des contenants des vidéos à afficher :
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
// Si un id est fourni par l'url, on affiche cette vidéo en premier :
let wantedVideo="";
if(window.location.hash!==undefined)
wantedVideo=window.location.hash.replace("#","");
vCarousel(videosContainers, wantedVideo);
// 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];
link.addEventListener("click", function(e)
{
wantedVideo=link.hash.replace("#","");
vCarousel(videosContainers, wantedVideo);
});
}
} }
catch(e) catch(e)
{ {

68
src/vCarousel.js
View File

@ -1,44 +1,64 @@
"use strict"; "use strict";
/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel /// Le tableau n'est pas dédoublonné, pour reste 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.
exports.__esModule = true; exports.__esModule = true;
exports.vCarousel = void 0; exports.vCarousel = void 0;
exports.vCarousel = function (vContainers) { exports.vCarousel = function (vContainers, firstVideoId) {
// On commence par vérifier que les ids de conteneurs fournis sont correctes if (firstVideoId === void 0) { 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.
var realVContainers = []; var realVContainers = [];
for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) { for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) {
var container = vContainers_1[_i]; var containerId = vContainers_1[_i];
var checkContainerExist = document.getElementById(container); var checkContainerExist = document.getElementById(containerId);
if (checkContainerExist === null) // utiliser fonctionner empty() de wikilerni ? if (checkContainerExist === null)
console.error("Aucun élément HTML trouvé dans la page pour l'id " + container); console.error("Aucun élément HTML trouvé dans la page pour l'id fourni " + containerId);
else { else {
var checkVideoExist = document.querySelector("#" + container + " video"); // tester avec + plusieurs vidéos dans le conteneur var checkVideoExist = document.querySelector("#" + containerId + " video");
if (checkVideoExist === null) if (checkVideoExist === null)
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + container); console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + containerId);
else else
realVContainers.push({ idContainer: container, containerElt: checkContainerExist, videoElt: checkVideoExist }); realVContainers.push({ id: containerId, containerElt: checkContainerExist, videoElt: checkVideoExist });
} }
} }
var nbContainers = realVContainers.length; // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
if (nbContainers < 2) if (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.");
firstVideoId = "";
}
// Il doit rester au moins deux vidéos
var nbVContainers = realVContainers.length;
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 {
var _loop_1 = function (i) { var _loop_1 = function (i) {
var container = realVContainers[i].containerElt; var vContainer = realVContainers[i].containerElt;
var video = realVContainers[i].videoElt; var video = realVContainers[i].videoElt;
if (i !== 0) if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId == "" && i !== 0))
container.style.display = "none"; vContainer.style.display = "none";
else
vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage
video.addEventListener("ended", function () { video.addEventListener("ended", function () {
container.style.display = "none"; vContainer.style.display = "none";
var nextContainer; var nextVContainer, nextHash;
if (i < (nbContainers - 1)) if (i < (nbVContainers - 1)) {
nextContainer = realVContainers[i + 1].containerElt; nextVContainer = realVContainers[i + 1].containerElt;
else nextHash = realVContainers[i + 1].id;
nextContainer = realVContainers[0].containerElt; }
nextContainer.style.display = "block"; else {
nextVContainer = realVContainers[0].containerElt;
nextHash = realVContainers[0].id;
}
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
// Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre (à revoir)
window.location.assign("#" + nextHash);
}); });
}; };
for (var i = 0; i < nbContainers; i++) { // Tous les conteneurs sont cachés, sauf celui demandé
// La fin de lecture d'une vidéo provoque l'affichage du suivant
for (var i = 0; i < nbVContainers; i++) {
_loop_1(i); _loop_1(i);
} }
} }

71
src/vCarousel.ts
View File

@ -1,50 +1,75 @@
/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel /// Le tableau n'est pas dédoublonné, pour reste 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.
export const vCarousel = (vContainers:string[]) : void => export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
{ {
interface videoDOM interface videoDOM
{ {
id: string;
containerElt: HTMLElement; containerElt: HTMLElement;
videoElt: HTMLMediaElement; videoElt: HTMLMediaElement;
} }
// 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.
const realVContainers : videoDOM[] = []; const realVContainers : videoDOM[] = [];
for(let container of vContainers) for(let containerId of vContainers)
{ {
let checkContainerExist=document.getElementById(container); let checkContainerExist=document.getElementById(containerId);
if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ? if(checkContainerExist===null)
console.error("Aucun élément HTML trouvé dans la page pour l'id "+container); console.error("Aucun élément HTML trouvé dans la page pour l'id fourni "+containerId);
else else
{ {
let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+container+" video");// tester avec + plusieurs vidéos dans le conteneur let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+containerId+" video");
if(checkVideoExist===null) if(checkVideoExist===null)
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+container); console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+containerId);
else else
realVContainers.push({containerElt:checkContainerExist, videoElt: checkVideoExist}); realVContainers.push({id:containerId, containerElt:checkContainerExist, videoElt:checkVideoExist});
} }
} }
let nbContainers=realVContainers.length;
if(nbContainers < 2) // Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
if(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.");
firstVideoId="";
}
// Il doit rester au moins deux vidéos
let nbVContainers=realVContainers.length;
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
{ {
for (let i = 0; i < nbContainers; i++) // Tous les conteneurs sont cachés, sauf celui demandé
// La fin de lecture d'une vidéo provoque l'affichage du suivant
for (let i = 0; i < nbVContainers; i++)
{ {
let container=realVContainers[i].containerElt; let vContainer=realVContainers[i].containerElt;
let video=realVContainers[i].videoElt; let video=realVContainers[i].videoElt;
if(i!==0) if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId=="" && i!==0))
container.style.display = "none"; vContainer.style.display = "none";
else
vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage
video.addEventListener("ended", function() video.addEventListener("ended", function()
{ {
container.style.display = "none"; vContainer.style.display = "none";
let nextContainer: HTMLElement; let nextVContainer: HTMLElement, nextHash: string;
if(i < (nbContainers-1)) if(i < (nbVContainers-1))
nextContainer=realVContainers[i+1].containerElt; {
nextVContainer=realVContainers[i+1].containerElt;
nextHash=realVContainers[i+1].id;
}
else else
nextContainer=realVContainers[0].containerElt; {
nextContainer.style.display = "block"; nextVContainer=realVContainers[0].containerElt;
nextHash=realVContainers[0].id;
}
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
// Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre (à revoir)
window.location.assign("#"+nextHash);
}); });
} }
} }