Première version de vCarousel
This commit is contained in:
parent
1d5c06d364
commit
01c3750ba0
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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";
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"outDir": "./public/JS",
|
||||
"noImplicitAny": true,
|
||||
"module": "es6",
|
||||
"target": "es5", // compilation en JS compatible ES5
|
||||
"jsx": "react",
|
||||
"allowJs": true
|
||||
}
|
||||
}
|
||||
|
|
@ -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