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

2
public/flickity.html
View File

@ -13,7 +13,7 @@
<body>
<div id="videos">
<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">
<video controls preload="metadata">

2
public/index.html
View File

@ -12,7 +12,7 @@
<body>
<div id="videos">
<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">
<video controls="controls" preload="metadata" width="800">

5
src/example.ts
View File

@ -9,16 +9,17 @@ try
testvCarousel.vContainers=videosContainers;
// 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("#","");
// On lance le carrousel :
testvCarousel.playNextVideos=true;
testvCarousel.run();
// 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];
const link=<HTMLAnchorElement>selectLinks[i];
link.addEventListener("click", function(e)
{
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
const Flickity = require("flickity");
const Flickity=require("flickity");
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.
const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
{
let nb=0, find=false;
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
for(let cel of flickityCarousel.cells)
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
for(const cel of flickityCarousel.cells)
{
let childrens = cel.element.childNodes;
for (let i = 0, c = childrens.length; i < c; i++)
const childrens=cel.element.childNodes;
for (let i=0, c=childrens.length; i < c; i++)
{
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
find=true;
@ -24,15 +24,15 @@ const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
}
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.");
}
try
{
// Initialisation Flickity :
const imgCarousel = document.querySelector(".img-carousel");
const flktyCarousel = new Flickity(imgCarousel,
const imgCarousel=document.querySelector(".img-carousel");
const flktyCarousel=new Flickity(imgCarousel,
{
// options : https://flickity.metafizzy.co/options.html
accessibility: true,
@ -48,7 +48,7 @@ try
testvCarousel.vContainers=videosContainers;
// 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("#","");
selectFlickityForHash(flktyCarousel, location.hash);
@ -68,6 +68,7 @@ try
// ici on demande la lecture automatique de toutes les vidéos :
testvCarousel.playFirstVideo=true;
testvCarousel.playNextVideos=true;
testvCarousel.noStop=true;
testvCarousel.run();
});
}