Fab_Blab
/
vCarousel
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Relecture des script + build.

master
Fabrice PENHOËT 1 year ago
parent
391465a54a
commit
1e7666c44c
5 changed files with 62 additions and 37 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      public/JS/example.app.js
  2. 27
      src/example.js
  3. 11
      src/example.ts
  4. 16
      src/vCarousel.js
  5. 16
      src/vCarousel.ts

29
public/JS/example.app.js
View File

File diff suppressed because one or more lines are too long

27
src/example.js
Unescape View 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);
}

11
src/example.ts
Unescape View File

@ -1,15 +1,15 @@
/// Exemple d'utilisation de vCarousel avec 3 vidéos
import { vCarousel } from "./vCarousel.ts";
import { vCarousel } from "./vCarousel";
try
{
// Liste des id des contenants des vidéos à afficher :
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
// Si un id est fourni par l'url, on affiche cette vidéo en premier :
let wantedVideo="";
if(window.location.hash!==undefined)
wantedVideo=window.location.hash.replace("#","");
vCarousel(videosContainers, wantedVideo);
vCarousel(videosContainers, window.location.hash.replace("#",""));
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 :
let selectLinks=document.querySelectorAll(".selectVideo");
@ -18,8 +18,7 @@ try
let link=<HTMLAnchorElement>selectLinks[i];
link.addEventListener("click", function(e)
{
wantedVideo=link.hash.replace("#","");
vCarousel(videosContainers, wantedVideo);
vCarousel(videosContainers, link.hash.replace("#",""));
});
}
}

16
src/vCarousel.js
Unescape View File

@ -1,6 +1,6 @@
"use strict";
/// 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.
exports.__esModule = true;
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.");
firstVideoId = "";
}
// Il doit rester au moins deux vidéos
// 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.");
@ -35,10 +35,10 @@ exports.vCarousel = function (vContainers, firstVideoId) {
var _loop_1 = function (i) {
var vContainer = realVContainers[i].containerElt;
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";
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 () {
vContainer.style.display = "none";
var nextVContainer, nextHash;
@ -51,13 +51,13 @@ exports.vCarousel = function (vContainers, firstVideoId) {
nextHash = realVContainers[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 (à revoir)
// 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.
window.location.assign("#" + nextHash);
});
};
// Tous les conteneurs sont cachés, sauf celui demandé
// La fin de lecture d'une vidéo provoque l'affichage du suivant
// 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++) {
_loop_1(i);
}

16
src/vCarousel.ts
Unescape View File

@ -1,5 +1,5 @@
/// 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.
export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
@ -36,22 +36,22 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
firstVideoId="";
}
// Il doit rester au moins deux vidéos
// Il doit rester au moins deux vidéos à faire tourner.
let nbVContainers=realVContainers.length;
if(nbVContainers < 2)
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
else
{
// Tous les conteneurs sont cachés, sauf celui demandé
// La fin de lecture d'une vidéo provoque l'affichage du suivant
// Tous les conteneurs sont cachés, sauf celui demandé.
// La fin de lecture d'une vidéo provoque son remplacement par la suivante.
for (let i = 0; i < nbVContainers; i++)
{
let vContainer=realVContainers[i].containerElt;
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";
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()
{
vContainer.style.display = "none";
@ -67,8 +67,8 @@ export const vCarousel = (vContainers:string[], firstVideoId="") : void =>
nextHash=realVContainers[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 (à revoir)
// 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.
window.location.assign("#"+nextHash);
});
}

Write Preview
Loading…
Cancel
Save