84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
// 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(let cel of flickityCarousel.cells)
|
|
{
|
|
let 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
|
|
{
|
|
// 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,
|
|
});
|
|
|
|
// Initialisation vCarousel :
|
|
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
|
|
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!=="")
|
|
{
|
|
testvCarousel.firstVideoId=window.location.hash.replace("#","");
|
|
selectFlickityForHash(flktyCarousel, location.hash);
|
|
}
|
|
else
|
|
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)
|
|
{
|
|
testvCarousel.firstVideoId=link.hash.replace("#","");
|
|
// ici on demande la lecture automatique de toutes les vidéos :
|
|
testvCarousel.playFirstVideo=true;
|
|
testvCarousel.playNextVideo=true;
|
|
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);
|
|
} |