vCarousel/src/exampleFlickity.ts

85 lines
3.2 KiB
TypeScript
Raw Normal View History

2021-04-29 17:40:20 +02:00
// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images 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(const cel of flickityCarousel.cells)
{
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)
{
flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
find=true;
break;
}
}
}
nb++;
}
if(find === false)
console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
}
try
{
2021-04-29 17:40:20 +02:00
// Initialisation Flickity :
const imgCarousel=document.querySelector(".img-carousel");
const flktyCarousel=new Flickity(imgCarousel,
{
// options : https://flickity.metafizzy.co/options.html
accessibility: true,
cellAlign: "center",
contain: true,
rightToLeft: true,
wrapAround: true,
});
2021-04-29 17:40:20 +02:00
// Initialisation vCarousel :
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
2021-04-29 17:40:20 +02:00
const testvCarousel=new vCarousel();
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 !=="")
{
2021-04-29 17:40:20 +02:00
testvCarousel.firstVideoId=window.location.hash.replace("#","");
selectFlickityForHash(flktyCarousel, location.hash);
}
else
2021-04-29 17:40:20 +02:00
testvCarousel.firstVideoId="";// dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
testvCarousel.run();
// Lorsque l'utilisateur clique sur une des images 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)
{
2021-04-29 17:40:20 +02:00
testvCarousel.firstVideoId=link.hash.replace("#","");
// ici on demande la lecture automatique de toutes les vidéos :
testvCarousel.playFirstVideo=true;
testvCarousel.playNextVideos=true;
testvCarousel.noStop=true;
2021-04-29 17:40:20 +02:00
testvCarousel.run();
});
}
// De même quand le hash change, on adapte l'item sélectionné de flickity
// Ceci permet de suivre le parcours des vidéos par vCarousel
window.addEventListener('hashchange', function()
{
selectFlickityForHash(flktyCarousel, location.hash);
});
}
catch(e)
{
console.error(e);
}