Relecture des script + build.
This commit is contained in:
parent
391465a54a
commit
1e7666c44c
File diff suppressed because one or more lines are too long
27
src/example.js
Normal file
27
src/example.js
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
"use strict";
|
||||||
|
exports.__esModule = true;
|
||||||
|
/// Exemple d'utilisation de vCarousel avec 3 vidéos
|
||||||
|
var vCarousel_1 = require("./vCarousel");
|
||||||
|
try {
|
||||||
|
// Liste des id des contenants des vidéos à afficher :
|
||||||
|
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)
|
||||||
|
vCarousel_1.vCarousel(videosContainers_1, window.location.hash.replace("#", ""));
|
||||||
|
else
|
||||||
|
vCarousel_1.vCarousel(videosContainers_1); // le deuxième paramètre est facultatif
|
||||||
|
// Dans le cas où l'utilisateur clique 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
console.error(e);
|
||||||
|
}
|
@ -1,15 +1,15 @@
|
|||||||
/// Exemple d'utilisation de vCarousel avec 3 vidéos
|
/// Exemple d'utilisation de vCarousel avec 3 vidéos
|
||||||
import { vCarousel } from "./vCarousel.ts";
|
import { vCarousel } from "./vCarousel";
|
||||||
|
|
||||||
try
|
try
|
||||||
{
|
{
|
||||||
// Liste des id des contenants des vidéos à afficher :
|
// Liste des id des contenants des vidéos à afficher :
|
||||||
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
|
const videosContainers=["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 :
|
||||||
let wantedVideo="";
|
|
||||||
if(window.location.hash!==undefined)
|
if(window.location.hash!==undefined)
|
||||||
wantedVideo=window.location.hash.replace("#","");
|
vCarousel(videosContainers, window.location.hash.replace("#",""));
|
||||||
vCarousel(videosContainers, wantedVideo);
|
else
|
||||||
|
vCarousel(videosContainers);// le deuxième paramètre est facultatif
|
||||||
|
|
||||||
// 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 :
|
||||||
let selectLinks=document.querySelectorAll(".selectVideo");
|
let selectLinks=document.querySelectorAll(".selectVideo");
|
||||||
@ -18,8 +18,7 @@ try
|
|||||||
let link=<HTMLAnchorElement>selectLinks[i];
|
let link=<HTMLAnchorElement>selectLinks[i];
|
||||||
link.addEventListener("click", function(e)
|
link.addEventListener("click", function(e)
|
||||||
{
|
{
|
||||||
wantedVideo=link.hash.replace("#","");
|
vCarousel(videosContainers, link.hash.replace("#",""));
|
||||||
vCarousel(videosContainers, wantedVideo);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
/// 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 reste 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 de la première vidéo à afficher.
|
/// On peut éventuellement fournir l'id de la première vidéo à afficher.
|
||||||
exports.__esModule = true;
|
exports.__esModule = true;
|
||||||
exports.vCarousel = void 0;
|
exports.vCarousel = void 0;
|
||||||
@ -27,7 +27,7 @@ exports.vCarousel = function (vContainers, firstVideoId) {
|
|||||||
console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide.");
|
console.error("Vous avez fourni l'id de la vidéo à afficher en premier (" + firstVideoId + "), mais il n'est pas valide.");
|
||||||
firstVideoId = "";
|
firstVideoId = "";
|
||||||
}
|
}
|
||||||
// Il doit rester au moins deux vidéos
|
// Il doit rester au moins deux vidéos à faire tourner.
|
||||||
var nbVContainers = realVContainers.length;
|
var nbVContainers = realVContainers.length;
|
||||||
if (nbVContainers < 2)
|
if (nbVContainers < 2)
|
||||||
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
||||||
@ -35,10 +35,10 @@ exports.vCarousel = function (vContainers, firstVideoId) {
|
|||||||
var _loop_1 = function (i) {
|
var _loop_1 = function (i) {
|
||||||
var vContainer = realVContainers[i].containerElt;
|
var vContainer = realVContainers[i].containerElt;
|
||||||
var video = realVContainers[i].videoElt;
|
var video = realVContainers[i].videoElt;
|
||||||
if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId == "" && i !== 0))
|
if ((firstVideoId !== "" && realVContainers[i].id !== firstVideoId) || (firstVideoId === "" && i !== 0))
|
||||||
vContainer.style.display = "none";
|
vContainer.style.display = "none";
|
||||||
else
|
else
|
||||||
vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage
|
vContainer.style.display = "block"; // nécessaire dans le cas d'un réaffichage.
|
||||||
video.addEventListener("ended", function () {
|
video.addEventListener("ended", function () {
|
||||||
vContainer.style.display = "none";
|
vContainer.style.display = "none";
|
||||||
var nextVContainer, nextHash;
|
var nextVContainer, nextHash;
|
||||||
@ -51,13 +51,13 @@ exports.vCarousel = function (vContainers, firstVideoId) {
|
|||||||
nextHash = realVContainers[0].id;
|
nextHash = realVContainers[0].id;
|
||||||
}
|
}
|
||||||
nextVContainer.style.display = "block";
|
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
|
// 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 (à revoir)
|
// Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
|
||||||
window.location.assign("#" + nextHash);
|
window.location.assign("#" + nextHash);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
// Tous les conteneurs sont cachés, sauf celui demandé
|
// Tous les conteneurs sont cachés, sauf celui demandé.
|
||||||
// La fin de lecture d'une vidéo provoque l'affichage du suivant
|
// 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 < nbVContainers; i++) {
|
||||||
_loop_1(i);
|
_loop_1(i);
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
/// 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 reste 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 de la première vidéo à afficher.
|
/// On peut éventuellement fournir l'id de la première vidéo à afficher.
|
||||||
|
|
||||||
export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
|
export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
|
||||||
@ -36,22 +36,22 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
|
|||||||
firstVideoId="";
|
firstVideoId="";
|
||||||
}
|
}
|
||||||
|
|
||||||
// Il doit rester au moins deux vidéos
|
// Il doit rester au moins deux vidéos à faire tourner.
|
||||||
let nbVContainers=realVContainers.length;
|
let nbVContainers=realVContainers.length;
|
||||||
if(nbVContainers < 2)
|
if(nbVContainers < 2)
|
||||||
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
// Tous les conteneurs sont cachés, sauf celui demandé
|
// Tous les conteneurs sont cachés, sauf celui demandé.
|
||||||
// La fin de lecture d'une vidéo provoque l'affichage du suivant
|
// La fin de lecture d'une vidéo provoque son remplacement par la suivante.
|
||||||
for (let i = 0; i < nbVContainers; i++)
|
for (let i = 0; i < nbVContainers; i++)
|
||||||
{
|
{
|
||||||
let vContainer=realVContainers[i].containerElt;
|
let vContainer=realVContainers[i].containerElt;
|
||||||
let video=realVContainers[i].videoElt;
|
let video=realVContainers[i].videoElt;
|
||||||
if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId=="" && i!==0))
|
if((firstVideoId!=="" && realVContainers[i].id!==firstVideoId) || (firstVideoId==="" && i!==0))
|
||||||
vContainer.style.display = "none";
|
vContainer.style.display = "none";
|
||||||
else
|
else
|
||||||
vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage
|
vContainer.style.display = "block";// nécessaire dans le cas d'un réaffichage.
|
||||||
video.addEventListener("ended", function()
|
video.addEventListener("ended", function()
|
||||||
{
|
{
|
||||||
vContainer.style.display = "none";
|
vContainer.style.display = "none";
|
||||||
@ -67,8 +67,8 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
|
|||||||
nextHash=realVContainers[0].id;
|
nextHash=realVContainers[0].id;
|
||||||
}
|
}
|
||||||
nextVContainer.style.display = "block";
|
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
|
// 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 (à revoir)
|
// Attention car cela peut provoquer un déplacement dans la page la première fois pour atteindre l'ancre.
|
||||||
window.location.assign("#"+nextHash);
|
window.location.assign("#"+nextHash);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user