2021-04-08 12:41:47 +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 ( 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
{
// Carrousel 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 ,
} ) ;
// Liste des id des contenants des vidéos à faire tourner :
const videosContainers = [ "vFunanbule" , "vForgeron" , "vCircuit" ] ;
// 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-08 17:24:24 +02:00
vCarousel ( videosContainers , { firstVideoId :window.location.hash.replace ( "#" , "" ) } ) ;
2021-04-08 12:41:47 +02:00
selectFlickityForHash ( flktyCarousel , location . hash ) ;
}
else
2021-04-08 17:24:24 +02:00
vCarousel ( videosContainers , { firstVideoId : "" } ) ; // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
2021-04-08 12:41:47 +02:00
// 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-08 17:24:24 +02:00
vCarousel ( videosContainers , { firstVideoId :link.hash.replace ( "#" , "" ) , playFirstVideo :true , playNextVideos :true } ) ; // les vidéos successives sont lancées automatiquement
2021-04-08 12:41:47 +02:00
} ) ;
}
// 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 ) ;
}