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

Première version de vCarousel

Browse Source
This commit is contained in:
Fabrice PENHOËT 2021-03-31 18:14:03 +02:00
parent 1d5c06d364
commit 01c3750ba0
12 changed files with 5669 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5285
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

28
package.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "vCarousel",
"version": "0.1.0",
"description": "Video carousel, a new video appears when the previous one finishes playing.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "https://forge.chapril.org/Fab_Blab/vCarousel"
},
"keywords": [
"carousel",
"video"
],
"author": "Fabrice PENHOËT",
"license": "GPL-3.0-or-later",
"devDependencies": {
"ts-loader": "^8.1.0",
"typescript": "^4.2.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
}
}

173
public/JS/example.app.js Normal file
View File

File diff suppressed because one or more lines are too long

30
public/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vCarrousel (démo)</title>
<script src="JS/example.app.js" defer></script>
</head>
<body>
<h1 id="title">vCarrousel</h1>
<p>Les vidéos qui défilent</p>
<figure id="vFunanbule">
<video poster="" controls="controls" width="500">
<source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
</video>
<figcaption>Un clown funanbule !</figcaption>
</figure>
<figure id="vForgeron">
<video poster="" controls="controls" width="500">
<source src="videos/Lizio-Poete-Ferrailleur-forgeron.m4v" type="video/mp4"></source>
</video>
<figcaption>Il faut forger pour devenir forgeron !</figcaption>
</figure>
<figure id="vCircuit">
<video poster="" controls="controls" width="500">
<source src="videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v" type="video/mp4"></source>
</video>
<figcaption>Drôle de circuit !</figcaption>
</figure>
</body>
</html>

BIN
public/videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v Normal file
View File

Binary file not shown.

BIN
public/videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v Normal file
View File

Binary file not shown.

BIN
public/videos/Lizio-Poete-Ferrailleur-forgeron.m4v Normal file
View File

Binary file not shown.

16
src/example.ts Normal file
View File

@ -0,0 +1,16 @@
/// Exemple d'utilisation de vCarousel avec 3 vidéos
import { vCarousel } from "./vCarousel.ts";
// Fournir ici la liste de contenants (div, figure...) des vidéos à faire défiler
// L'ordre est celui de défilement et peut être différent de celui de la page HTML
// La même vidéo peut même être listé plusieurs fois...
// La première entrée correspondant à la vidéo affichée au premier chargement de la page
const videosContainers=["vFunanbule", "vForgeron", "vCircuit"];
try
{
vCarousel(videosContainers);
}
catch(e)
{
console.error(e);
}

45
src/vCarousel.js Normal file
View File

@ -0,0 +1,45 @@
"use strict";
/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel
exports.__esModule = true;
exports.vCarousel = void 0;
exports.vCarousel = function (vContainers) {
// On commence par vérifier que les ids de conteneurs fournis sont correctes
var realVContainers = [];
for (var _i = 0, vContainers_1 = vContainers; _i < vContainers_1.length; _i++) {
var container = vContainers_1[_i];
var checkContainerExist = document.getElementById(container);
if (checkContainerExist === null) // utiliser fonctionner empty() de wikilerni ?
console.error("Aucun élément HTML trouvé dans la page pour l'id " + container);
else {
var checkVideoExist = document.querySelector("#" + container + " video"); // tester avec + plusieurs vidéos dans le conteneur
if (checkVideoExist === null)
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id " + container);
else
realVContainers.push({ idContainer: container, containerElt: checkContainerExist, videoElt: checkVideoExist });
}
}
var nbContainers = realVContainers.length;
if (nbContainers < 2)
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
else {
var _loop_1 = function (i) {
var container = realVContainers[i].containerElt;
var video = realVContainers[i].videoElt;
if (i !== 0)
container.style.display = "none";
video.addEventListener("ended", function () {
container.style.display = "none";
var nextContainer;
if (i < (nbContainers - 1))
nextContainer = realVContainers[i + 1].containerElt;
else
nextContainer = realVContainers[0].containerElt;
nextContainer.style.display = "block";
});
};
for (var i = 0; i < nbContainers; i++) {
_loop_1(i);
}
}
};

51
src/vCarousel.ts Normal file
View File

@ -0,0 +1,51 @@
/// La fonction reçoit un tableau d'ids de conteneurs contenant les vidéos à afficher successivement
/// Attention : les vidéos à afficher ne sont pas dédoublonnées, car on peut souhaiter afficher plusieurs fois la même vidéo durant un tour du carrousel
export const vCarousel = (vContainers:string[]) : void =>
{
interface videoDOM
{
containerElt: HTMLElement;
videoElt: HTMLMediaElement;
}
// On commence par vérifier que les ids de conteneurs fournis sont correctes
const realVContainers : videoDOM[] = [];
for(let container of vContainers)
{
let checkContainerExist=document.getElementById(container);
if(checkContainerExist===null)// utiliser fonctionner empty() de wikilerni ?
console.error("Aucun élément HTML trouvé dans la page pour l'id "+container);
else
{
let checkVideoExist=<HTMLMediaElement>document.querySelector("#"+container+" video");// tester avec + plusieurs vidéos dans le conteneur
if(checkVideoExist===null)
console.error("Aucune balise vidéo trouvée dans l'élément HTML ayant comme id "+container);
else
realVContainers.push({containerElt:checkContainerExist, videoElt: checkVideoExist});
}
}
let nbContainers=realVContainers.length;
if(nbContainers < 2)
console.error("Il faut fournir au moins deux conteneurs valides pour faire tourner le carrousel.");
else
{
for (let i = 0; i < nbContainers; i++)
{
let container=realVContainers[i].containerElt;
let video=realVContainers[i].videoElt;
if(i!==0)
container.style.display = "none";
video.addEventListener("ended", function()
{
container.style.display = "none";
let nextContainer: HTMLElement;
if(i < (nbContainers-1))
nextContainer=realVContainers[i+1].containerElt;
else
nextContainer=realVContainers[0].containerElt;
nextContainer.style.display = "block";
});
}
}
}

10
tsconfig.json Normal file
View File

@ -0,0 +1,10 @@
{
"compilerOptions": {
"outDir": "./public/JS",
"noImplicitAny": true,
"module": "es6",
"target": "es5", // compilation en JS compatible ES5
"jsx": "react",
"allowJs": true
}
}

31
webpack.config.js Normal file
View File

@ -0,0 +1,31 @@
const path = require('path');
module.exports =
{
mode: "development",
devtool: "inline-source-map",
entry:
{
example: "./src/example.ts"
},
output:
{
filename: "./JS/[name].app.js",
path: path.resolve(__dirname, "public")
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
],
},
devServer: {
contentBase: path.join(__dirname, "public")
},
};