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

Relecture et évolutions des pages de démo.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2022-01-18 17:58:25 +01:00
parent 3969bff238
commit a726ff51fe
4 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/flickity.html
View File

@ -13,8 +13,8 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1 id="title">vCarousel</h1> <h1 id="title">vCarousel</h1>
<p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement.</p> <p>Dans cet exemple vCarousel est associé à un carrousel d’images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l’affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement et le carrousel boucle à l’infini. <a href="./">Retour à l’exemple de base</a>.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls preload="metadata"> <video controls preload="metadata">
<source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source> <source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>

2
public/index.html
View File

@ -12,7 +12,7 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1>vCarousel</h1> <h1>vCarousel</h1>
<p>Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionnée dans le menu, sa lecture se lance automatiquement. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.</p> <p>Exemple d’utilisation simple : lorsqu’une vidéo se termine, la suivante la remplace et sa lecture est lancée, ceci jusqu’à ce que toutes les vidéos aient été parcourues. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d’utilisation où vCarousel est associé à un carrousel d’images Flickity.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls="controls" preload="metadata" width="800"> <video controls="controls" preload="metadata" width="800">

5
src/example.ts
View File

@ -9,16 +9,17 @@ try
testvCarousel.vContainers=videosContainers; testvCarousel.vContainers=videosContainers;
// 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 && window.location.hash!=="") if(window.location.hash !== undefined && window.location.hash !== "")
testvCarousel.firstVideoId=window.location.hash.replace("#",""); testvCarousel.firstVideoId=window.location.hash.replace("#","");
// On lance le carrousel : // On lance le carrousel :
testvCarousel.playNextVideos=true;
testvCarousel.run(); testvCarousel.run();
// 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");
for (let i = 0; i < selectLinks.length; i++) for (let i = 0; i < selectLinks.length; i++)
{ {
let link=<HTMLAnchorElement>selectLinks[i]; const link=<HTMLAnchorElement>selectLinks[i];
link.addEventListener("click", function(e) link.addEventListener("click", function(e)
{ {
testvCarousel.firstVideoId=link.hash.replace("#",""); testvCarousel.firstVideoId=link.hash.replace("#","");

21
src/exampleFlickity.ts
View File

@ -1,20 +1,20 @@
// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity // Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
const Flickity = require("flickity"); const Flickity=require("flickity");
import { vCarousel } from "./vCarousel"; import { vCarousel } from "./vCarousel";
// Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url. // Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void => const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
{ {
let nb=0, find=false; let nb=0, find=false;
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash. // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
for(let cel of flickityCarousel.cells) for(const cel of flickityCarousel.cells)
{ {
let childrens = cel.element.childNodes; const childrens=cel.element.childNodes;
for (let i = 0, c = childrens.length; i < c; i++) for (let i=0, c=childrens.length; i < c; i++)
{ {
if (childrens[i].nodeType === Node.ELEMENT_NODE) if (childrens[i].nodeType === Node.ELEMENT_NODE)
{ {
if(childrens[i].hash!=undefined && childrens[i].hash===urlHash) if(childrens[i].hash !== undefined && childrens[i].hash === urlHash)
{ {
flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
find=true; find=true;
@ -24,15 +24,15 @@ const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
} }
nb++; nb++;
} }
if(find===false) if(find === false)
console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity."); console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
} }
try try
{ {
// Initialisation Flickity : // Initialisation Flickity :
const imgCarousel = document.querySelector(".img-carousel"); const imgCarousel=document.querySelector(".img-carousel");
const flktyCarousel = new Flickity(imgCarousel, const flktyCarousel=new Flickity(imgCarousel,
{ {
// options : https://flickity.metafizzy.co/options.html // options : https://flickity.metafizzy.co/options.html
accessibility: true, accessibility: true,
@ -48,7 +48,7 @@ try
testvCarousel.vContainers=videosContainers; testvCarousel.vContainers=videosContainers;
// 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 && window.location.hash!=="") if(window.location.hash !== undefined && window.location.hash !=="")
{ {
testvCarousel.firstVideoId=window.location.hash.replace("#",""); testvCarousel.firstVideoId=window.location.hash.replace("#","");
selectFlickityForHash(flktyCarousel, location.hash); selectFlickityForHash(flktyCarousel, location.hash);
@ -68,6 +68,7 @@ try
// ici on demande la lecture automatique de toutes les vidéos : // ici on demande la lecture automatique de toutes les vidéos :
testvCarousel.playFirstVideo=true; testvCarousel.playFirstVideo=true;
testvCarousel.playNextVideos=true; testvCarousel.playNextVideos=true;
testvCarousel.noStop=true;
testvCarousel.run(); testvCarousel.run();
}); });
} }