Mise à jour des dépendances du projet.

Ajout option forçant le mode production lors de la compilation du projet
Nouvelle compilation en JS.*
2022-02-14 15:14:46 +01:00 · 2022-02-14 15:10:17 +01:00 · 2022-01-18 18:22:58 +01:00 · 2022-01-18 18:20:07 +01:00 · 2022-01-18 18:16:31 +01:00 · 2022-01-18 18:15:33 +01:00
17 changed files with 544 additions and 4746 deletions
--- a/karma.conf.js
+++ b/karma.conf.js
@ -12,7 +12,9 @@ module.exports = function(config) {
    frameworks: ["jasmine", "karma-typescript"],

    // list of files / patterns to load in the browser
-    files: [ "src/vCarousel.ts", "tests/*.ts" ],
+    files: [ "src/vCarousel.ts", "tests/*.ts", { pattern: 'public/videos/*', watched: true, included: false, served: true } ],
+
+    proxies: { "/videos/": "http://localhost:9876/base/public/videos/" },

    // list of files / patterns to exclude
    exclude: [
@ -45,7 +47,7 @@ module.exports = function(config) {

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-    browsers: ['Firefox', 'Chromium'],
+    browsers: ['FirefoxHeadless', 'ChromiumHeadless'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
  "main": "./src/vCarousel.ts",
  "scripts": {
    "test": "karma start",
-    "build": "webpack",
+    "build": "webpack --mode production",
    "start": "webpack-dev-server"
  },
  "repository": {
--- a/public/JS/example.app.js
+++ b/public/JS/example.app.js
--- a/public/JS/exampleFlickity.app.js
+++ b/public/JS/exampleFlickity.app.js
--- a/public/JS/exampleFlickity.app.js.LICENSE.txt
+++ b/public/JS/exampleFlickity.app.js.LICENSE.txt
@ -0,0 +1,28 @@
+/*!
+ * Flickity v2.3.0
+ * Touch, responsive, flickable carousels
+ *
+ * Licensed GPLv3 for open source use
+ * or Flickity Commercial License for commercial use
+ *
+ * https://flickity.metafizzy.co
+ * Copyright 2015-2021 Metafizzy
+ */
+
+/*!
+ * Unidragger v2.4.0
+ * Draggable base class
+ * MIT license
+ */
+
+/*!
+ * Unipointer v2.4.0
+ * base class for doing one thing with pointer event
+ * MIT license
+ */
+
+/*!
+ * getSize v2.0.3
+ * measure size of elements
+ * MIT license
+ */
--- a/public/flickity.html
+++ b/public/flickity.html
@ -13,8 +13,8 @@
 <body>
    <div id="videos">
        <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">
            <video controls preload="metadata">
                <source src="videos/Lizio-Poete-Ferrailleur-clownfunanbule.m4v" type="video/mp4"></source>
--- a/public/index.html
+++ b/public/index.html
@ -12,7 +12,7 @@
 <body>
    <div id="videos">
        <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">
            <video controls="controls" preload="metadata" width="800">
--- a/src/build/errors.js
+++ b/src/build/errors.js
@ -0,0 +1,8 @@
+"use strict";
+module.exports =
+    {
+        elementNotFound: "Aucun élément HTML trouvé dans la page pour l'id : ",
+        videoNotFound: "Aucune balise vidéo trouvée dans l'élément HTML ayant comme id : ",
+        need2Videos: "Il vous faut fournir au moins deux conteneurs de vidéo valides pour pouvoir lancer le carrousel.",
+        needVideosProvided: "vCarousel ne peut être lancé sans avoir fourni les vidéos concernées."
+    };
--- a/src/build/example.js
+++ b/src/build/example.js
@ -5,6 +5,7 @@ try {
    testvCarousel_1.vContainers = videosContainers;
    if (window.location.hash !== undefined && window.location.hash !== "")
        testvCarousel_1.firstVideoId = window.location.hash.replace("#", "");
+    testvCarousel_1.playNextVideos = true;
    testvCarousel_1.run();
    var selectLinks = document.querySelectorAll(".selectVideo");
    var _loop_1 = function (i) {
--- a/src/build/exampleFlickity.js
+++ b/src/build/exampleFlickity.js
@ -7,7 +7,7 @@ var selectFlickityForHash = function (flickityCarousel, urlHash) {
        var childrens = cel.element.childNodes;
        for (var i = 0, c = childrens.length; i < c; i++) {
            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);
                    find = true;
                    break;
@ -45,6 +45,7 @@ try {
            testvCarousel_1.firstVideoId = link.hash.replace("#", "");
            testvCarousel_1.playFirstVideo = true;
            testvCarousel_1.playNextVideos = true;
+            testvCarousel_1.noStop = true;
            testvCarousel_1.run();
        });
    };
--- a/src/build/vCarousel.js
+++ b/src/build/vCarousel.js
@ -84,12 +84,12 @@ var vCarousel = (function () {
                    vCarousel._currentVideo.pause();
                vContainer.style.display = "block";
                vCarousel._currentVideo = video;
-                if (vCarousel._playFirstVideo === true)
+                if (vCarousel._playFirstVideo)
                    video.play();
            }
            nbTurn = 0;
            video.addEventListener("ended", function () {
-                if (nbTurn < (vCarousel.nbVContainers - 1) || vCarousel._noStop === true) {
+                if (nbTurn < (vCarousel.nbVContainers - 1) || vCarousel._noStop) {
                    vContainer.style.display = "none";
                    var nextVContainer = void 0, nextVideo = void 0, nextHash = void 0, nextOne = 0;
                    if (i < (vCarousel.nbVContainers - 1))
@ -99,8 +99,9 @@ var vCarousel = (function () {
                    nextHash = vCarousel._vContainers[nextOne].id;
                    nextVContainer.style.display = "block";
                    vCarousel._currentVideo = nextVideo;
+                    nextVideo.currentTime = 0;
                    window.location.assign("#" + nextHash);
-                    if (vCarousel._playNextVideos === true)
+                    if (vCarousel._playNextVideos)
                        nextVideo.play();
                    nbTurn++;
                }
--- a/src/example.ts
+++ b/src/example.ts
@ -9,16 +9,17 @@ try
    testvCarousel.vContainers=videosContainers;
    
    // Si un id est fourni par l'url, on affiche cette vidéo en premier :
-    if(window.location.hash!==undefined && window.location.hash!=="")
+    if(window.location.hash !== undefined && window.location.hash !== "")
        testvCarousel.firstVideoId=window.location.hash.replace("#","");
    // On lance le carrousel :
+    testvCarousel.playNextVideos=true;
    testvCarousel.run();
    
    // Dans le cas où l'utilisateur clique pour sélectionner une vidéo à afficher, on actualise l'affichage :
    let selectLinks=document.querySelectorAll(".selectVideo");
    for (let i = 0; i < selectLinks.length; i++)
    {
-        let link=<HTMLAnchorElement>selectLinks[i];
+        const link=<HTMLAnchorElement>selectLinks[i];
        link.addEventListener("click", function(e)
        {
            testvCarousel.firstVideoId=link.hash.replace("#","");
--- a/src/exampleFlickity.ts
+++ b/src/exampleFlickity.ts
@ -1,20 +1,20 @@
 // Exemple d'utilisation de vCarousel avec 3 vidéos, proposées via un carrousel d'images Flickity
-const Flickity = require("flickity");
+const Flickity=require("flickity");
 import { vCarousel } from "./vCarousel";

 // Cette fonction sert à synchroniser si besoin l'image sélectionnée dans le carrousel Flickity avec le hash de l'url.
 const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
 {
    let nb=0, find=false;
-    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash.
-    for(let cel of flickityCarousel.cells)
+    // On parcourt les items du carrousel pour trouver celui contenant le lien vers ce hash :
+    for(const cel of flickityCarousel.cells)
    {
-        let childrens = cel.element.childNodes;
-        for (let i = 0, c = childrens.length; i < c; i++)
+        const childrens=cel.element.childNodes;
+        for (let i=0, c=childrens.length; i < c; i++)
        {
            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
                    find=true;
@ -24,15 +24,15 @@ const selectFlickityForHash = (flickityCarousel:any, urlHash:string) : void =>
        }
        nb++;
    }
-    if(find===false)
+    if(find === false)
        console.error("L'ancre fournie par l'url n'a pas été trouvée dans le carrousel Flickity.");
 }

 try
 {
    // Initialisation Flickity :
-    const imgCarousel = document.querySelector(".img-carousel");
-    const flktyCarousel = new Flickity(imgCarousel,
+    const imgCarousel=document.querySelector(".img-carousel");
+    const flktyCarousel=new Flickity(imgCarousel,
    {
      // options : https://flickity.metafizzy.co/options.html
      accessibility: true,
@ -48,7 +48,7 @@ try
    testvCarousel.vContainers=videosContainers;
    
    // Si un id est fourni par l'url, on affiche cette vidéo en premier :
-    if(window.location.hash!==undefined && window.location.hash!=="")
+    if(window.location.hash !== undefined && window.location.hash !=="")
    {
        testvCarousel.firstVideoId=window.location.hash.replace("#","");
        selectFlickityForHash(flktyCarousel, location.hash);
@ -68,6 +68,7 @@ try
            // ici on demande la lecture automatique de toutes les vidéos :
            testvCarousel.playFirstVideo=true;
            testvCarousel.playNextVideos=true;
+            testvCarousel.noStop=true;
            testvCarousel.run();
        });
    }
--- a/tests/vCarouselSpec.ts
+++ b/tests/vCarouselSpec.ts
@ -4,7 +4,7 @@ const errors=require("../src/errors.js");
 describe("vCarousel", () =>
 {
    let vCarouselTest : vCarousel;
-    const videosWebDir="https://forge.chapril.org/Fab_Blab/vCarousel/src/branch/master/public/videos";
+    const videosWebDir="hhttp://localhost:9876/videos";
    const fixture="<div id='fixture'><figure id='noVideo'></figure><figure id='video1'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-clownfunanbule.m4v' type='video/mp4'></source></video></figure><figure id='video2'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-forgeron.m4v' type='video/mp4'></source></video></figure><figure id='video3'><video controls='controls' preload='metadata'><source src='"+videosWebDir+"/Lizio-Poete-Ferrailleur-drole-de-circuit.m4v' type='video/mp4'></source></video></div>";

    beforeEach(() =>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -11,6 +11,6 @@
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
  },
-    "include": ["src/*.ts"],
+    "include": ["src/*", "src/demo/*"],
    "exclude": ["src/build"]
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -3,7 +3,6 @@ const path = require('path');
 module.exports =
 {
  mode: "development",
-  devtool: "inline-source-map",
  entry:
  {
    example: "./src/example.ts",
Author	SHA1	Message	Date
Fabrice PENHOËT	ca998a0eb0	Mise à jour des dépendances du projet.	2022-02-14 15:14:46 +01:00
Fabrice PENHOËT	c00ddb007b	Ajout option forçant le mode production lors de la compilation du projet	2022-02-14 15:10:17 +01:00
Fabrice PENHOËT	d7e9ec4dbe	Nouvelle compilation en JS.*	2022-01-18 18:22:58 +01:00
Fabrice PENHOËT	b68429a419	Suppression inline-source-map de la configuration de webpack pour alléger fichiers compilés.	2022-01-18 18:20:07 +01:00
Fabrice PENHOËT	b4216d9626	Passage au mode strict pour TypeScript.	2022-01-18 18:16:31 +01:00
Fabrice PENHOËT	da9277ca53	Revue configuration karma.js, notamment pour chargement local des vidéos pour les tests + test dans version headless des navigateurs.	2022-01-18 18:15:33 +01:00
Fabrice PENHOËT	a726ff51fe	Relecture et évolutions des pages de démo.	2022-01-18 17:58:25 +01:00