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>
<head>
<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>
</head>
<body>
@ -26,5 +28,14 @@
</video>
<figcaption>Drôle de circuit !</figcaption>
</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>
</html>

25
src/example.ts
View File

@ -1,14 +1,27 @@
/// Exemple d'utilisation de vCarousel avec 3 vidéos
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
{
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)
{

68
src/vCarousel.js
View File

@ -1,44 +1,64 @@
"use strict";
/// La fonction reçoit un tableau d'ids de conteneurs contenant les 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
/// 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
/// On peut éventuellement fournir l'id de la première vidéo à afficher.
exports.__esModule = true;
exports.vCarousel = void 0;
exports.vCarousel = function (vContainers) {
// On commence par vérifier que les ids de conteneurs fournis sont correctes
exports.vCarousel = function (vContainers, firstVideoId) {
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 = [];
for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) {
var container = vContainers_1[_i];
var checkContainerExist = document.getElementById(container);
if (checkContainerExist === null) // utiliser fonctionner empty() de wikilerni ?
console.error("Aucun élément HTML trouvé dans la page pour l'id " + container);
var containerId = vContainers_1[_i];
var checkContainerExist = document.getElementById(containerId);
if (checkContainerExist === null)
console.error("Aucun élément HTML trouvé dans la page pour l'id fourni " + containerId);
else {
var checkVideoExist = document.querySelector("#" + container + " video"); // tester avec + plusieurs vidéos dans le conteneur
var checkVideoExist = document.querySelector("#" + containerId + " video");
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
realVContainers.push({ idContainer: container, containerElt: checkContainerExist, videoElt: checkVideoExist });
realVContainers.push({ id: containerId, containerElt: checkContainerExist, videoElt: checkVideoExist });
}
}
var nbContainers = realVContainers.length;
if (nbContainers < 2)
// Si firstVideoId a été fourni, on vérifie aussi qu'il est valide.
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.");
else {
var _loop_1 = function (i) {
var container = realVContainers[i].containerElt;
var vContainer = realVContainers[i].containerElt;
var video = realVContainers[i].videoElt;
if (i !== 0)
container.style.display = "none";
if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId == "" && i !== 0))
vContainer.style.display = "none";
else
vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage
video.addEventListener("ended", function () {
container.style.display = "none";
var nextContainer;
if (i < (nbContainers - 1))
nextContainer = realVContainers[i + 1].containerElt;
else
nextContainer = realVContainers[0].containerElt;
nextContainer.style.display = "block";
vContainer.style.display = "none";
var nextVContainer, nextHash;
if (i < (nbVContainers - 1)) {
nextVContainer = realVContainers[i + 1].containerElt;
nextHash = realVContainers[i + 1].id;
}
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);
}
}

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
/// 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
/// 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
/// 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
{
id: string;
containerElt: HTMLElement;
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[] = [];
for(let container of vContainers)
for(let containerId of vContainers)
{
let checkContainerExist=document.getElementById(container);
if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ?
console.error("Aucun élément HTML trouvé dans la page pour l'id "+container);
let checkContainerExist=document.getElementById(containerId);
if(checkContainerExist===null)
console.error("Aucun élément HTML trouvé dans la page pour l'id fourni "+containerId);
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)
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
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.");
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;
if(i!==0)
container.style.display = "none";
if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId=="" && i!==0))
vContainer.style.display = "none";
else
vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage
video.addEventListener("ended", function()
{
container.style.display = "none";
let nextContainer: HTMLElement;
if(i < (nbContainers-1))
nextContainer=realVContainers[i+1].containerElt;
vContainer.style.display = "none";
let nextVContainer: HTMLElement, nextHash: string;
if(i < (nbVContainers-1))
{
nextVContainer=realVContainers[i+1].containerElt;
nextHash=realVContainers[i+1].id;
}
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);
});
}
}