5 changed files with 7993 additions and 9 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,66 @@
|
||||
"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 !== "") { |
||||
vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", "")); |
||||
selectFlickityForHash(flktyCarousel_1, location.hash); |
||||
} |
||||
else |
||||
vCarousel_1.vCarousel(videosContainers_1, ""); // dans cet exemple, on cache toutes les vidéos avant que l'utilisateur ne fasse son choix dans le carrousel d'images.
|
||||
// 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) { |
||||
vCarousel_1.vCarousel(videosContainers_1, link.hash.replace("#", "")); |
||||
}); |
||||
}; |
||||
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); |
||||
} |
Loading…
Reference in new issue