vCarousel/src/vCarousel.js

125 lines
6.2 KiB
JavaScript
Raw Normal View History

2021-03-31 18:14:03 +02:00
"use strict";
2021-04-29 17:40:20 +02:00
Object.defineProperty(exports, "__esModule", { value: true });
2021-04-08 16:01:03 +02:00
exports.vCarousel = void 0;
2021-04-29 17:40:20 +02:00
var vCarousel = /** @class */ (function () {
function vCarousel() {
this._vContainers = [];
this._playFirstVideo = false;
this._playNextVideos = false;
this._noStop = false;
this.nbVContainers = 0;
2021-03-31 18:14:03 +02:00
}
2021-04-29 17:40:20 +02:00
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.");
2021-03-31 18:14:03 +02:00
var _loop_1 = function (i) {
2021-04-29 17:40:20 +02:00
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 {
2021-04-29 17:40:20 +02:00
// 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";
2021-04-29 17:40:20 +02:00
vCarousel.currentVideo = video;
if (vCarousel._playFirstVideo === true)
video.play();
}
nbTurn = 0;
2021-03-31 18:14:03 +02:00
video.addEventListener("ended", function () {
2021-04-29 17:40:20 +02:00
// 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;
2021-04-29 17:40:20 +02:00
if (i < (vCarousel.nbVContainers - 1)) {
nextVContainer = vCarousel._vContainers[i + 1].containerElt;
nextVideo = vCarousel._vContainers[i + 1].videoElt;
nextHash = vCarousel._vContainers[i + 1].id;
}
else {
2021-04-29 17:40:20 +02:00
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.
2021-04-29 17:40:20 +02:00
// Attention car cela peut provoquer un déplacement dans la page pour atteindre l'ancre.
window.location.assign("#" + nextHash);
2021-04-29 17:40:20 +02:00
if (vCarousel._playNextVideos === true)
nextVideo.play();
2021-04-29 17:40:20 +02:00
vCarousel.currentVideo = nextVideo;
nbTurn++;
}
2021-03-31 18:14:03 +02:00
});
};
var nbTurn;
2021-04-29 17:40:20 +02:00
for (var i = 0; i < vCarousel.nbVContainers; i++) {
2021-03-31 18:14:03 +02:00
_loop_1(i);
}
2021-04-29 17:40:20 +02:00
};
return vCarousel;
}());
exports.vCarousel = vCarousel;