2021-04-08 16:01:03 +02:00
"use strict" ;
exports . _ _esModule = true ;
/// Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
var Flickity = require ( "flickity" ) ;
var vCarousel _1 = require ( "./vCarousel" ) ;
// Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
var selectFlickityForHash = function ( flickityCarousel , urlHash ) {
var nb = 0 , find = false ;
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
for ( var _i = 0 , _a = flickityCarousel . cells ; _i < _a . length ; _i ++ ) {
var cel = _a [ _i ] ;
var childrens = cel . element . childNodes ;
for ( var 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 :
var imgCarousel = document . querySelector ( ".img-carousel" ) ;
var flktyCarousel _1 = 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 :
var videosContainers _1 = [ "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 _1 . vCarousel ( videosContainers _1 , { firstVideoId : window . location . hash . replace ( "#" , "" ) } ) ;
2021-04-08 16:01:03 +02:00
selectFlickityForHash ( flktyCarousel _1 , location . hash ) ;
}
else
2021-04-08 17:24:24 +02:00
vCarousel _1 . vCarousel ( videosContainers _1 , { 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 16:01:03 +02:00
// Lorsque l'utilisateur clique sur une des images pour sélectionner une vidéo à afficher, on actualise l'affichage :
var selectLinks = document . querySelectorAll ( ".selectVideo" ) ;
var _loop _1 = function ( i ) {
var link = selectLinks [ i ] ;
link . addEventListener ( "click" , function ( e ) {
2021-04-08 17:24:24 +02:00
vCarousel _1 . vCarousel ( videosContainers _1 , { firstVideoId : link . hash . replace ( "#" , "" ) , playFirstVideo : true , playNextVideos : true } ) ; // les vidéos successives sont lancées automatiquement
2021-04-08 16:01:03 +02:00
} ) ;
} ;
for ( var i = 0 ; i < selectLinks . length ; i ++ ) {
_loop _1 ( i ) ;
}
// 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 _1 , location . hash ) ;
} ) ;
}
catch ( e ) {
console . error ( e ) ;
}