12 changed files with 5669 additions and 0 deletions
@ -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