Première version de vCarousel
This commit is contained in:
parent
1d5c06d364
commit
01c3750ba0
5285
package-lock.json
generated
Normal file
5285
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
package.json
Normal file
28
package.json
Normal 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
173
public/JS/example.app.js
Normal file
File diff suppressed because one or more lines are too long
30
public/index.html
Normal file
30
public/index.html
Normal 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
BIN
public/videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v
Normal file
Binary file not shown.
BIN
public/videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v
Normal file
BIN
public/videos/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v
Normal file
Binary file not shown.
BIN
public/videos/Lizio-Poete-Ferrailleur-forgeron.m4v
Normal file
BIN
public/videos/Lizio-Poete-Ferrailleur-forgeron.m4v
Normal file
Binary file not shown.
16
src/example.ts
Normal file
16
src/example.ts
Normal 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
45
src/vCarousel.js
Normal 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
51
src/vCarousel.ts
Normal 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
10
tsconfig.json
Normal 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
31
webpack.config.js
Normal 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")
|
||||||
|
},
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user