Nouveau build des fichiers

This commit is contained in:
Fabrice PENHOËT 2021-04-08 16:01:03 +02:00
parent d669f2fdd0
commit 2b30484173
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

View File

@ -1,15 +1,15 @@
"use strict"; "use strict";
exports.__esModule = true; exports.__esModule = true;
/// Exemple d'utilisation de vCarousel avec 3 vidéos /// Exemple d'utilisation simple de vCarousel avec 3 vidéos
var vCarousel_1 = require("./vCarousel"); var vCarousel_1 = require("./vCarousel");
try { try {
// Liste des id des contenants des vidéos à afficher : // Liste des id des contenants des vidéos à faire tourner :
var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"]; var videosContainers_1 = ["vFunanbule", "vForgeron", "vCircuit"];
// Si un id est fourni par l'url, on affiche cette vidéo en premier : // Si un id est fourni par l'url, on affiche cette vidéo en premier :
if (window.location.hash !== undefined && window.location.hash !== "") if (window.location.hash !== undefined && window.location.hash !== "")
vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", "")); vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
else else
vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif sauf si on souhaite qu'une des vidéos soit affichée par défaut vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif, sauf si on souhaite qu'une vidéo autre que la première soit affichée par défaut
// Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage : // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
var selectLinks = document.querySelectorAll(".selectVideo"); var selectLinks = document.querySelectorAll(".selectVideo");
var _loop_1 = function (i) { var _loop_1 = function (i) {

66
src/exampleFlickity.js Normal file
View File

@ -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);
}

View File

@ -1,11 +1,12 @@
"use strict"; "use strict";
exports.__esModule = true;
exports.vCarousel = void 0;
var Flickity = require("flickity");
/// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement. /// La fonction vCarousel reçoit un tableau d'ids des conteneurs HTML des vidéos à afficher successivement.
/// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel. /// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel.
/// On peut éventuellement fournir l'id du conteneur de la première vidéo à afficher lors de l'appel /// On peut éventuellement fournir l'id du conteneur de la première vidéo à afficher lors de l'appel
/// Ou encore indiqué qu'aucune ne doit être affichée sans action en passant une chaîne vide /// Ou encore indiqué qu'aucune ne doit être affichée sans action en passant une chaîne vide
/// Par défaut la première vidéo de la liste sera affichée /// Par défaut la première vidéo de la liste sera affichée
exports.__esModule = true;
exports.vCarousel = void 0;
exports.vCarousel = function (vContainers, firstVideoId) { exports.vCarousel = function (vContainers, firstVideoId) {
// On commence par vérifier que les ids de conteneurs fournis sont correctes. // On commence par vérifier que les ids de conteneurs fournis sont correctes.
// C'est-à-dire qu'il s'agit bien d'éléments HTML contenant au moins une vidéo. // C'est-à-dire qu'il s'agit bien d'éléments HTML contenant au moins une vidéo.