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

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

master
Fabrice PENHOËT 1 year ago
parent
01c3750ba0
commit
04aacc83cf
5 changed files with 187 additions and 85 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      public/JS/example.app.js
  2. 13
      public/index.html
  3. 25
      src/example.ts
  4. 68
      src/vCarousel.js
  5. 71
      src/vCarousel.ts

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

File diff suppressed because one or more lines are too long

13
public/index.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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);
});
}
}

Write Preview
Loading…
Cancel
Save