wip #809 @4

diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js
index b0ba9855b0138ad1a9f2e665b0a3b8f3060c8381..9f11be0ad1df6d5cfb2163081066fdada2cf71ec 100644 (file)
--- a/js/libs/fluidbook/fluidbook.3dflip.js
+++ b/js/libs/fluidbook/fluidbook.3dflip.js
@@ -1,10 +1,6 @@
 function Fluidbook3DFlip(fluidbook) {
     this.fluidbook = fluidbook;
 
-    this.meshes = [];
-    this.mixers = [];
-    this.hemisphereLight = null;
-    this.pointLight = null;
     this.camera = null;
     this.scene = null;
     this.renderer = null;
@@ -12,16 +8,25 @@ function Fluidbook3DFlip(fluidbook) {
     this.action = null;
     this.clock = new THREE.Clock;
     this.mesh = null;
+    this.plane = null;
+    // Plane not displayed used for size calculations
+    this.sizePlane = null;
     this.loader = null;
     this.animation = null;
-    this.animationMixer = null;
     this._progressAnimation = 0;
     this._pageRotation = 0;
     this.ready = false;
     this.animationTime = parseFloat(this.fluidbook.datas.mobileTransitionDuration);
     this.textures = [];
 
+    // Performance settings
     this.lowPerf = this.fluidbook.support.android || this.fluidbook.support.iOS || this.fluidbook.support.IE > 0;
+    this.enableLight = !this.lowPerf;
+    this.enableShadow = !this.lowPerf && this.enableLight;
+    this.antialias = false;
+    this.qualityRatio = this.lowPerf ? 1 : 2;
+    this.triangles = this.lowPerf ? 2 : 5;
+    this.pixelRatio = window.devicePixelRatio * this.qualityRatio;
 
     this.jcontainer = $("#flip3dcontainer");
 
@@ -33,7 +38,6 @@ function Fluidbook3DFlip(fluidbook) {
     this.pi2 = Math.PI * 2;
     this.deg2rad = this.pi2 / 360;
 
-    var $this = this;
     this.init();
 }
 
@@ -53,32 +57,35 @@ Fluidbook3DFlip.prototype = {
 
         this.container = $(this.jcontainer).get(0);
         this.scene = new THREE.Scene();
-        this.scene.add(new THREE.AmbientLight(0xffffff, 1.5));
+        if (this.enableLight) {
+            this.scene.add(new THREE.AmbientLight(0xffffff, 1.5));
+        }
 
         var far = 24000;
         var near = 1000;
-        this.enableShadow = !this.lowPerf;
 
         this.camera = new THREE.PerspectiveCamera(20, 1, near, far);
         this.camera.zoom = 1;
         this.camera.position.z = 8873 * 2;
         this.camera.updateProjectionMatrix();
 
-        var lightIntensity = .30;
-        //
-        var light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1);
-        light.position.set(2000, 0, 1.72503 * 10000);
-        if (this.enableShadow) {
-            light.castShadow = true;
-            light.shadow.mapSize.width = 2048;  // default
-            light.shadow.mapSize.height = 2048; // default
-            light.shadow.camera.near = near;
-            light.shadow.camera.far = far;
-            light.shadow.bias = -0.0075;
-            light.shadow.radius = 3;
-        }
+        if (this.enableLight) {
+            var lightIntensity = .30;
+            //
+            var light = new THREE.SpotLight(0xffffff, lightIntensity, 0, 1);
+            light.position.set(2000, 0, 1.72503 * 10000);
+            if (this.enableShadow) {
+                light.castShadow = true;
+                light.shadow.mapSize.width = 2048;  // default
+                light.shadow.mapSize.height = 2048; // default
+                light.shadow.camera.near = near;
+                light.shadow.camera.far = far;
+                light.shadow.bias = -0.0075;
+                light.shadow.radius = 3;
+            }
 
-        this.scene.add(light);
+            this.scene.add(light);
+        }
 
         if (this.enableShadow) {
             var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale * 2, this.fluidbook.datas.height * this.geometryScale, 1, 1, true);
@@ -94,26 +101,35 @@ Fluidbook3DFlip.prototype = {
             this.scene.add(this.shadowPlane);
         }
 
-        var triangles = 6;
-        if (this.lowPerf) {
-            triangles = 2;
-        }
-
-        var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, Math.round(triangles * 5), Math.round(triangles), true);
+        var geometry = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, Math.round(this.triangles * 5), Math.round(this.triangles), true);
         var geometry2 = geometry.clone();
+        var geometry3 = new THREE.PlaneGeometry(this.fluidbook.datas.width * this.geometryScale, this.fluidbook.datas.height * this.geometryScale, 1, 1, true);
         geometry.merge(geometry2, new THREE.Matrix4().makeRotationY(Math.PI), 1);
 
         var roughness = 0.8;
-        this.textures = [
-            new THREE.MeshStandardMaterial({side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}),
-            new THREE.MeshStandardMaterial({side: THREE.FrontSide, overdraw: 0.5, roughness: roughness}),
-        ];
+
+        if (this.enableLight) {
+            this.textures = [
+                new THREE.MeshStandardMaterial({side: THREE.FrontSide, roughness: roughness}),
+                new THREE.MeshStandardMaterial({side: THREE.FrontSide, roughness: roughness}),
+            ];
+        } else {
+            this.textures = [
+                new THREE.MeshBasicMaterial({side: THREE.FrontSide}),
+                new THREE.MeshBasicMaterial({side: THREE.FrontSide}),
+            ];
+        }
         geometry.translate(this.fluidbook.datas.width * this.geometryScale * 0.5, 0, 0);
 
         this.plane = new THREE.Mesh(geometry, this.textures);
         this.plane.castShadow = this.enableShadow;
         this.plane.receiveShadow = false;
 
+        this.sizePlane = new THREE.Mesh(geometry3);
+        this.sizePlane.castShadow = this.sizePlane.receiveShadow = false;
+        this.sizePlane.visible=false;
+
+        this.scene.add(this.sizePlane);
         this.scene.add(this.plane);
 
         this.modifier = new ModifierStack(this.plane);
@@ -122,19 +138,14 @@ Fluidbook3DFlip.prototype = {
         this.modifier.reset();
         this.modifier.addModifier(this.bend);
 
-        this.renderer = new THREE.WebGLRenderer({antialias: !this.lowPerf, alpha: true});
+        this.renderer = new THREE.WebGLRenderer({antialias: this.antialias, alpha: true});
         if (this.enableShadow) {
             this.renderer.shadowMap.enabled = true;
             this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
         }
 
-        var qualityRatio = 1.5;
-        if (this.lowPerf) {
-            qualityRatio = 1.2;
-        }
-
         this.renderer.setClearColor(0x000000, 0);
-        this.renderer.setPixelRatio(window.devicePixelRatio * qualityRatio);
+        this.renderer.setPixelRatio(this.pixelRatio);
         this.renderer.setSize(this.pw, this.ph);
         this.container.appendChild(this.renderer.domElement);
 
@@ -279,10 +290,10 @@ Fluidbook3DFlip.prototype = {
             if (this.turnRunning) {
                 $("#flip3dcontainer").show();
             } else {
-                // $("#flip3dcontainer").hide();
+                $("#flip3dcontainer").hide();
             }
         } else {
-            //$("#flip3dcontainer").hide();
+            $("#flip3dcontainer").hide();
         }
     },
 
@@ -307,13 +318,14 @@ Fluidbook3DFlip.prototype = {
         if (this._progressAnimation != 0 && this._progressAnimation != 1) {
             return;
         }
+
         this.camera.updateProjectionMatrix();
         var bookBox = $("#currentDoublePage").get(0).getBoundingClientRect();
 
-        this.plane.scale.x = this.plane.scale.y = 1;
+        this.sizePlane.scale.x = this.sizePlane.scale.y = 1;
 
-        for (var i = 0; i < 100; i++) {
-            var bbox = new THREE.Box3().setFromObject(this.plane);
+        for (var i = 0; i < 5; i++) {
+            var bbox = new THREE.Box3().setFromObject(this.sizePlane);
             var min = this.to2D(bbox.min);
             var max = this.to2D(bbox.max);
 
@@ -330,15 +342,15 @@ Fluidbook3DFlip.prototype = {
 
             var s = (bookBox.width / 2) / rect.width;
 
-            this.plane.scale.x *= s;
-            this.plane.scale.y *= s;
-            this.plane.rotateX(0);
+            this.sizePlane.scale.x *= s;
+            this.sizePlane.scale.y *= s;
+            this.sizePlane.rotateX(0);
             if (this.enableShadow) {
-                this.shadowPlane.scale.x = this.plane.scale.x;
-                this.shadowPlane.scale.y = this.plane.scale.y;
+                this.shadowPlane.scale.x = this.sizePlane.scale.x;
+                this.shadowPlane.scale.y = this.sizePlane.scale.y;
             }
 
-            bbox = new THREE.Box3().setFromObject(this.plane);
+            bbox = new THREE.Box3().setFromObject(this.sizePlane);
             min = this.to2D(bbox.min);
             max = this.to2D(bbox.max);
             rect = {
@@ -348,10 +360,17 @@ Fluidbook3DFlip.prototype = {
                 height: Math.abs(min.y - max.y)
             };
 
-            this.plane.translateY(rect.y - bookBox.top);
+            this.sizePlane.translateY(rect.y - bookBox.top);
         }
+
+
+        this.plane.position.y = this.sizePlane.position.y;
+        this.plane.scale.x = this.sizePlane.scale.x;
+        this.plane.scale.y = this.sizePlane.scale.y;
         if (this.enableShadow) {
-            this.shadowPlane.position.y = this.plane.position.y;
+            this.shadowPlane.scale.x = this.sizePlane.scale.x;
+            this.shadowPlane.scale.y = this.sizePlane.scale.y;
+            this.shadowPlane.position.y = this.sizePlane.position.y;
             this.shadowPlane.rotateX(0);
         }
     },

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 7f885a6e5b6ed4bdf51d99544f21bfa4a71d0bd6..1197a66f3b82b2a6947c8d9f294430dc9ff394ca 100644 (file)
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -23,6 +23,12 @@ Fluidbook.BOTTOM = 9;
 
 Fluidbook.prototype = {
     init: function (datas) {
+
+        this.flags = {};
+        this.networkPause = false;
+        this.networkPauseTimeout = null;
+        this.networkPauseQueue = [];
+
         this.datas = datas;
         this.junk = datas.cacheDate;
         if (this.datas.landingPage != undefined && this.datas.landingPage != '') {
@@ -99,7 +105,6 @@ Fluidbook.prototype = {
         this.pagetransitions = new FluidbookPageTransition(this);
         this.stats = new FluidbookStats(this);
         this.stats.track(10);
-        this.flags = {};
 
         this.initTheme();
         this.initKeyboardShortcuts();
@@ -421,7 +426,6 @@ Fluidbook.prototype = {
     },
 
 
-
     reloadCurrentPage: function () {
         this.pageTransition(this.currentPage);
     },
@@ -922,4 +926,36 @@ Fluidbook.prototype = {
         });
         return res;
     },
+
+    pauseNetwork: function (during) {
+        this.networkPause = true;
+        clearTimeout(this.networkPauseTimeout);
+        var $this = this;
+        this.networkPauseTimeout = setTimeout(function () {
+            $this.networkPause = false;
+            $this.flushNetworkQueue();
+        }, during + 500)
+    },
+
+    executeWhenNetwork: function (f) {
+        if (this.networkPause) {
+            this.networkPauseQueue.push(f);
+            return;
+        }
+        f();
+    },
+
+    flushNetworkQueue: function () {
+        if (this.networkPauseQueue.length === 0 || this.networkPause) {
+            return;
+        }
+
+        var f = this.networkPauseQueue.shift();
+        f();
+
+        var $this = this;
+        setTimeout(function () {
+            $this.flushNetworkQueue();
+        }, 100);
+    },
 }

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 4223f353795f1b362de4de9ff62d4fe90af4ffba..f06fbe085affd72f2b4fe6be854c1e27f8f0dd2a 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -31,13 +31,14 @@ FluidbookLoader.prototype = {
 
         var $callback = callback;
         var $page = $pages.shift();
-        if ($page > this.fluidbook.getMaxPage() || $page < 1) {
+
+        if ($page == undefined || $page == 'undefined' || $page > this.fluidbook.getMaxPage() || $page < 1) {
             callback();
+            return;
         }
         this._preloadPage($page, function () {
             $this.preloadPagesBeforeTransition($pages, $callback);
         });
-
     },
 
     arePreloadedPages: function (pages) {
@@ -54,15 +55,14 @@ FluidbookLoader.prototype = {
         if (this.toPreload.length == 0) {
             return;
         }
-
         var $this = this;
-        var callback = function () {
-            $this.preloadPages();
-        };
-
-        var preloadingPage = this.toPreload.shift();
-
-        this._preloadPage(preloadingPage, callback);
+        this.fluidbook.executeWhenNetwork(function () {
+            var callback = function () {
+                $this.preloadPages();
+            };
+            var preloadingPage = $this.toPreload.shift();
+            $this._preloadPage(preloadingPage, callback);
+        }, 0, 1000);
     },
 
     _preloadPage: function (page, callback) {
@@ -96,11 +96,11 @@ FluidbookLoader.prototype = {
             return;
         }
 
-        var numPreloadAfter = 5;
-        var numPreloadBefore = 2;
+        var numPreloadAfter = 8;
+        var numPreloadBefore = 4;
         if (this.fluidbook.resize.orientation == 'portrait') {
-            numPreloadAfter = 3;
-            numPreloadBefore = 1;
+            numPreloadAfter = 4;
+            numPreloadBefore = 2;
         }
         var max = Math.min(page + numPreloadAfter, this.fluidbook.getMaxPage());
         var min = Math.max(1, page - numPreloadBefore);
@@ -146,6 +146,11 @@ FluidbookLoader.prototype = {
         }
     },
     loadPage: function (pageNr, doublePage, position, callback) {
+        if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
+
         // Si une page de gauche existe déjà dans la double page, on la retire
         $(doublePage).find('.' + position).each(function () {
             if ($(this).attr('id') != 'page_' + pageNr || pageNr == 0) {
@@ -243,6 +248,10 @@ FluidbookLoader.prototype = {
         });
     },
     _loadBackground: function (page, callback) {
+        if (page <= 0 || page > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         if (this.backgrounds[page] != undefined) {
             callback();
         } else {
@@ -257,6 +266,10 @@ FluidbookLoader.prototype = {
         }
     },
     __loadBackground: function (page, callback) {
+        if (page <= 0 || page > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         var url = this.getBackgroundURL(page);
         if (url == false) {
             callback();
@@ -265,6 +278,10 @@ FluidbookLoader.prototype = {
         this.backgrounds[page] = this.loadImage(url, null, null, null, callback);
     },
     _loadTexture: function (page, callback) {
+        if (page <= 0 || page > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         if (this.textures[page] != undefined) {
             callback();
         } else {
@@ -273,6 +290,10 @@ FluidbookLoader.prototype = {
     },
 
     __loadTexture: function (page, callback) {
+        if (page <= 0 || page > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         var url = this.getTextureURL(page);
         if (url == false) {
             callback();
@@ -282,7 +303,10 @@ FluidbookLoader.prototype = {
     },
 
     loadTexts: function (pageNr, callback) {
-
+        if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         if (this.getVersionToLoad(pageNr) == 'raster') {
             callback();
             return;
@@ -301,6 +325,10 @@ FluidbookLoader.prototype = {
         }
     },
     _loadTexts: function (pageNr, callback) {
+        if (pageNr <= 0 || pageNr > this.fluidbook.datas.pages) {
+            callback();
+            return;
+        }
         // var w = this.fluidbook.datas.width / 0.75;
         // var h = this.fluidbook.datas.height / 0.75;
         this.texts[pageNr] = this.loadImage(this.getTextsURL(pageNr), null, null, 'image/svg+xml', callback);

diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js
index 313c4e68f61e7133925dc596f68a5da91d3b446b..fe749e0d8d564048cbf2d9703c6944a4ed80bd51 100644 (file)
--- a/js/libs/fluidbook/fluidbook.pagetransitions.js
+++ b/js/libs/fluidbook/fluidbook.pagetransitions.js
@@ -66,6 +66,7 @@ FluidbookPageTransition.prototype = {
             $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () {
                 $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.flip, true, function () {
                     $this.beforeTransition(pageNr, 3, turning);
+                    $this.fluidbook.pauseNetwork(2000);
                     $(doublePage).addClass(turning.nextFromClass + 'end').one($this.fluidbook.support.getTransitionEndEvent(), function () {
                         if ($this.transitionning == false) {
                             return;
@@ -104,6 +105,7 @@ FluidbookPageTransition.prototype = {
             $this.flip3d.prepareTurn(turning, function () {
                 $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () {
                     $this.beforeTransition(pageNr, 3, turning);
+                    $this.fluidbook.pauseNetwork(2000);
                     $this.flip3d.playTurn(turning.dir, function () {
                         $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.end, true, function () {
                             $this.afterTransition(pageNr);
@@ -219,6 +221,7 @@ FluidbookPageTransition.prototype = {
         }
         this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () {
             $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () {
+                $this.fluidbook.pauseNetwork(2000);
                 $this.beforeTransition(pageNr, 2, turning);
                 $("#currentDoublePage").addClass('_2d').addClass('axis_' + $this.transitionAxis).addClass(turning.currentToClass);
                 $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function (event) {
@@ -247,6 +250,7 @@ FluidbookPageTransition.prototype = {
         }
         this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () {
             $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () {
+                $this.fluidbook.pauseNetwork(2000);
                 $this.beforeTransition(pageNr, 2, turning);
                 $("#currentDoublePage").addClass('axis_' + $this.transitionAxis).addClass('_2d').addClass(turning.currentToClass);
                 $(doublePage).removeClass(turning.nextFromClass).one($this.fluidbook.support.getTransitionEndEvent(), function () {

diff --git a/js/libs/fluidbook/fluidbook.stats.js b/js/libs/fluidbook/fluidbook.stats.js
index 2b6732bdeadc966175a7b5ac7a9425ce5dbe1a77..92d11f08db9bb122203d3cade331dcfa9cae8762 100644 (file)
--- a/js/libs/fluidbook/fluidbook.stats.js
+++ b/js/libs/fluidbook/fluidbook.stats.js
@@ -137,24 +137,30 @@ FluidbookStats.prototype = {
             extra = '';\r
         }\r
 \r
-        $.ajax({\r
-            url: 'https://stats.fluidbook.com/stats2.php',\r
-            type: 'GET',\r
-            data: {\r
-                id: this.id,\r
-                vid: this.vid,\r
-                type: type,\r
-                page: page,\r
-                str: extra,\r
-                time: new Date().getTime()\r
-            },\r
-            success: function () {\r
+        var $this = this;\r
+        setTimeout(function () {\r
+            $this.fluidbook.executeWhenNetwork(function () {\r
+                $.ajax({\r
+                    url: 'https://stats.fluidbook.com/stats2.php',\r
+                    type: 'GET',\r
+                    data: {\r
+                        id: $this.id,\r
+                        vid: $this.vid,\r
+                        type: type,\r
+                        page: page,\r
+                        str: extra,\r
+                        time: new Date().getTime()\r
+                    },\r
+                    success: function () {\r
 \r
-            },\r
-            error: function () {\r
+                    },\r
+                    error: function () {\r
+\r
+                    }\r
+                });\r
+            });\r
+        }, 500);\r
 \r
-            }\r
-        });\r
     }\r
     ,\r
 };\r