parent
21d7e82264
commit
67aecd77db
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,82 +1,124 @@
|
||||
"use strict";
|
||||
exports.__esModule = true;
|
||||
Object.defineProperty(exports, "__esModule", { value: 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.
|
||||
/// Le tableau n'est pas dédoublonné, pour rester libre d'afficher plusieurs fois la même vidéo durant un tour du carrousel.
|
||||
/// Plusieurs options sont possibles :
|
||||
/// - firstVideoId est une chaîne permettant de fournir l'id du conteneur de la première vidéo à afficher lors de l'appel. Par défaut la première vidéo de la liste sera affichée. Si on passe une chaîne vide, aucune ne sera affichée.
|
||||
/// - playFirstVideo et playNextVideos demandent de lancer automatiquement la lecture respectivement de la vidéo demandée et de celles automatiquement chargée par la fonction. Ce n'est pas le cas par défaut et peut être bloqué par le navigateur.
|
||||
/// - noStop permet de demander à ce que les vidéos continuent à tourner même quand toutes ont été affichées. Par défaut, le carrousel s'arrête.
|
||||
exports.vCarousel = function (vContainers, opts) {
|
||||
if (opts === void 0) { opts = {}; }
|
||||
// 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.
|
||||
var realVContainers = [];
|
||||
for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) {
|
||||
var containerId = vContainers_1[_i];
|
||||
var checkContainerExist = document.getElementById(containerId);
|
||||
if (checkContainerExist === null)
|
||||
console.error("Aucun élément HTML trouvé dans la page pour l'id fourni " + containerId);
|
||||
else {
|
||||
var checkVideoExist = document.querySelector("#" + containerId + " video");
|
||||
if (checkVideoExist === null)
|
||||
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + containerId);
|
||||
else
|
||||
realVContainers.push({ id: containerId, containerElt: checkContainerExist, videoElt: checkVideoExist });
|
||||
}
|
||||
var vCarousel = /** @class */ (function () {
|
||||
function vCarousel() {
|
||||
this._vContainers = [];
|
||||
this._playFirstVideo = false;
|
||||
this._playNextVideos = false;
|
||||
this._noStop = false;
|
||||
this.nbVContainers = 0;
|
||||
}
|
||||
// Si opts.firstVideoId a été fourni, on vérifie aussi qu'il est valide.
|
||||
if (opts.firstVideoId !== undefined && opts.firstVideoId !== "" && (realVContainers.findIndex(function (video) { return video.id === opts.firstVideoId; }) === -1)) {
|
||||
console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + opts.firstVideoId + "), mais il n'est pas valide.");
|
||||
opts.firstVideoId = undefined;
|
||||
}
|
||||
// Il doit rester au moins deux vidéos à faire tourner.
|
||||
var nbVContainers = realVContainers.length;
|
||||
if (nbVContainers < 2)
|
||||
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
||||
else {
|
||||
Object.defineProperty(vCarousel.prototype, "vContainers", {
|
||||
// Les ids reçus doivent correspondre à des éléments HTML contenant une vidéo.
|
||||
set: function (vContainersIds) {
|
||||
for (var _i = 0, vContainersIds_1 = vContainersIds; _i < vContainersIds_1.length; _i++) {
|
||||
var containerId = vContainersIds_1[_i];
|
||||
var checkContainerExist = document.getElementById(containerId);
|
||||
if (checkContainerExist === null)
|
||||
throw new Error("Aucun élément HTML trouvé dans la page pour l'id " + containerId + ".");
|
||||
else {
|
||||
var checkVideoExist = document.querySelector("#" + containerId + " video");
|
||||
if (checkVideoExist === null)
|
||||
throw new Error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + containerId + ".");
|
||||
else
|
||||
this._vContainers.push({ id: containerId, containerElt: checkContainerExist, videoElt: checkVideoExist });
|
||||
}
|
||||
}
|
||||
// Il faut au moins 2 vidéos à faire tourner.
|
||||
this.nbVContainers = this._vContainers.length;
|
||||
if (this.nbVContainers < 2)
|
||||
throw new Error("Il faut fournir au moins deux conteneurs de vidéo pour pouvoir faire tourner le carrousel.");
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(vCarousel.prototype, "firstVideoId", {
|
||||
// Si this._firstVideoId a été fourni, on vérifie qu'il est présent dans la liste des conteneurs de vidéos.
|
||||
set: function (firstVideo) {
|
||||
if (firstVideo !== "" && this._vContainers.findIndex(function (video) { return video.id === firstVideo; }) === -1)
|
||||
console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + this._firstVideoId + "), mais il n'est pas valide.");
|
||||
else
|
||||
this._firstVideoId = firstVideo;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(vCarousel.prototype, "playFirstVideo", {
|
||||
set: function (playFirstVideo) {
|
||||
this._playFirstVideo = playFirstVideo;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(vCarousel.prototype, "playNextVideo", {
|
||||
set: function (playNextVideo) {
|
||||
this._playNextVideos = playNextVideo;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
Object.defineProperty(vCarousel.prototype, "noStop", {
|
||||
set: function (noStop) {
|
||||
this._noStop = noStop;
|
||||
},
|
||||
enumerable: false,
|
||||
configurable: true
|
||||
});
|
||||
vCarousel.prototype.run = function () {
|
||||
var vCarousel = this; // évite les confusions avec le "this" des événements.
|
||||
if (vCarousel.nbVContainers < 2) // dans le cas où on lancerait run() sans passer par le setter.
|
||||
throw new Error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
||||
var _loop_1 = function (i) {
|
||||
var vContainer = realVContainers[i].containerElt;
|
||||
var video = realVContainers[i].videoElt;
|
||||
if ((opts.firstVideoId !== undefined && realVContainers[i].id !== opts.firstVideoId) || (opts.firstVideoId === undefined && i !== 0) || opts.firstVideoId === "")
|
||||
var vContainer = vCarousel._vContainers[i].containerElt;
|
||||
var video = vCarousel._vContainers[i].videoElt;
|
||||
if ((vCarousel._firstVideoId !== undefined && vCarousel._vContainers[i].id !== vCarousel._firstVideoId) || (vCarousel._firstVideoId === undefined && i !== 0) || vCarousel._firstVideoId === "")
|
||||
vContainer.style.display = "none";
|
||||
else {
|
||||
// Si une vidéo est déjà visible et en cours de lecture, je la stoppe et remets à 0
|
||||
// Sinon elle risque de continuer à être lue tout en étant cachée.
|
||||
if (vCarousel.currentVideo !== undefined && !vCarousel.currentVideo.paused) {
|
||||
vCarousel.currentVideo.pause();
|
||||
vCarousel.currentVideo.currentTime = 0;
|
||||
}
|
||||
// J'affiche la première vidéo et j'essaye de la lancer, si cela est demandé
|
||||
vContainer.style.display = "block";
|
||||
if (opts.firstVideoId !== undefined && opts.playFirstVideo === true)
|
||||
vCarousel.currentVideo = video;
|
||||
if (vCarousel._playFirstVideo === true)
|
||||
video.play();
|
||||
}
|
||||
nbTurn = 0;
|
||||
video.addEventListener("ended", function () {
|
||||
// Sauf si demandé en option, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois.
|
||||
if (nbTurn < (nbVContainers - 1) || opts.noStop === true) {
|
||||
// Sauf si demandé, le carrousel s'arrête lorsque toutes les vidéos ont été affichées une fois.
|
||||
if (nbTurn < (vCarousel.nbVContainers - 1) || vCarousel._noStop === true) {
|
||||
vContainer.style.display = "none";
|
||||
var nextVContainer = void 0, nextVideo = void 0, nextHash = void 0;
|
||||
if (i < (nbVContainers - 1)) {
|
||||
nextVContainer = realVContainers[i + 1].containerElt;
|
||||
nextVideo = realVContainers[i + 1].videoElt;
|
||||
nextHash = realVContainers[i + 1].id;
|
||||
if (i < (vCarousel.nbVContainers - 1)) {
|
||||
nextVContainer = vCarousel._vContainers[i + 1].containerElt;
|
||||
nextVideo = vCarousel._vContainers[i + 1].videoElt;
|
||||
nextHash = vCarousel._vContainers[i + 1].id;
|
||||
}
|
||||
else {
|
||||
nextVContainer = realVContainers[0].containerElt;
|
||||
nextVideo = realVContainers[0].videoElt;
|
||||
nextHash = realVContainers[0].id;
|
||||
nextVContainer = vCarousel._vContainers[0].containerElt;
|
||||
nextVideo = vCarousel._vContainers[0].videoElt;
|
||||
nextHash = vCarousel._vContainers[0].id;
|
||||
}
|
||||
nextVContainer.style.display = "block";
|
||||
// On adapte l'ancre de l'url de manière à ce qu'elle soit cohérente avec la vidéo affichée.
|
||||
// Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
|
||||
// Attention car cela peut provoquer un déplacement dans la page pour atteindre l'ancre.
|
||||
window.location.assign("#" + nextHash);
|
||||
if (opts.playNextVideos === true)
|
||||
if (vCarousel._playNextVideos === true)
|
||||
nextVideo.play();
|
||||
vCarousel.currentVideo = nextVideo;
|
||||
nbTurn++;
|
||||
}
|
||||
});
|
||||
};
|
||||
var nbTurn;
|
||||
// Tous les conteneurs sont cachés, sauf celui demandé.
|
||||
// La fin de lecture d'une vidéo provoque son remplacement par la suivante.
|
||||
for (var i = 0; i < nbVContainers; i++) {
|
||||
for (var i = 0; i < vCarousel.nbVContainers; i++) {
|
||||
_loop_1(i);
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
return vCarousel;
|
||||
}());
|
||||
exports.vCarousel = vCarousel;
|
||||
|
||||
Loading…
Reference in new issue