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

Relecture et évolutions des pages de démo.

Browse Source
This commit is contained in:
Fabrice PENHOËT 2022-01-18 17:58:25 +01:00
parent 3969bff238
commit a726ff51fe
4 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/flickity.html
View File

@ -13,7 +13,7 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1 id="title">vCarousel</h1> <h1 id="title">vCarousel</h1>
<p>Dans cet exemple vCarousel est associé à un carrousel d'images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l'affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement.</p> <p>Dans cet exemple vCarousel est associé à un carrousel d’images plus classique géré via <a href="https://flickity.metafizzy.co/" target="_blank" rel="noopener">Flickity</a> servant de menu pour choisir la première vidéo à visionner. Ensuite vCarousel enchaîne les vidéos et synchronise l’affichage de Flickity. La lecture de toutes les vidéos se lance automatiquement et le carrousel boucle à l’infini. <a href="./">Retour à l’exemple de base</a>.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls preload="metadata"> <video controls preload="metadata">

2
public/index.html
View File

@ -12,7 +12,7 @@
<body> <body>
<div id="videos"> <div id="videos">
<h1>vCarousel</h1> <h1>vCarousel</h1>
<p>Exemple d'utilisation simple : lorsqu'une vidéo se termine, la suivante la remplace, prête à être lancée. Lorsqu'une vidéo est sélectionnée dans le menu, sa lecture se lance automatiquement. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d'utilisation où vCarousel est associé à un carrousel d'images Flickity.</p> <p>Exemple d’utilisation simple : lorsqu’une vidéo se termine, la suivante la remplace et sa lecture est lancée, ceci jusqu’à ce que toutes les vidéos aient été parcourues. <a href="flickity.html">Cliquez-ici</a> pour voir un autre exemple d’utilisation où vCarousel est associé à un carrousel d’images Flickity.</p>
<figure id="vFunanbule"> <figure id="vFunanbule">
<video controls="controls" preload="metadata" width="800"> <video controls="controls" preload="metadata" width="800">

3
src/example.ts
View File

@ -12,13 +12,14 @@ try
if(window.location.hash !== undefined && window.location.hash !== "") if(window.location.hash !== undefined && window.location.hash !== "")
testvCarousel.firstVideoId=window.location.hash.replace("#",""); testvCarousel.firstVideoId=window.location.hash.replace("#","");
// On lance le carrousel : // On lance le carrousel :
testvCarousel.playNextVideos=true;
testvCarousel.run(); testvCarousel.run();
// 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");
for (let i = 0; i < selectLinks.length; i++) for (let i = 0; i < selectLinks.length; i++)
{ {
let link=<HTMLAnchorElement>selectLinks[i]; const link=<HTMLAnchorElement>selectLinks[i];
link.addEventListener("click", function(e) link.addEventListener("click", function(e)
{ {
testvCarousel.firstVideoId=link.hash.replace("#",""); testvCarousel.firstVideoId=link.hash.replace("#","");

9
src/exampleFlickity.ts
View File

@ -6,15 +6,15 @@ import { vCarousel } from "./vCarousel";
const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void => const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
{ {
let nb=0, find=false; let nb=0, find=false;
// On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash. // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
for(let cel of flickityCarousel.cells) for(const cel of flickityCarousel.cells)
{ {
let childrens = cel.element.childNodes; const childrens=cel.element.childNodes;
for (let i=0, c=childrens.length; i < c; i++) for (let i=0, c=childrens.length; i < c; i++)
{ {
if (childrens[i].nodeType === Node.ELEMENT_NODE) if (childrens[i].nodeType === Node.ELEMENT_NODE)
{ {
if(childrens[i].hash!=undefined && childrens[i].hash===urlHash) if(childrens[i].hash !== undefined && childrens[i].hash === urlHash)
{ {
flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html flickityCarousel.select(nb);// API Flickity : https://flickity.metafizzy.co/api.html
find=true; find=true;
@ -68,6 +68,7 @@ try
// ici on demande la lecture automatique de toutes les vidéos : // ici on demande la lecture automatique de toutes les vidéos :
testvCarousel.playFirstVideo=true; testvCarousel.playFirstVideo=true;
testvCarousel.playNextVideos=true; testvCarousel.playNextVideos=true;
testvCarousel.noStop=true;
testvCarousel.run(); testvCarousel.run();
}); });
} }