From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 20 Aug 2018 16:16:13 +0000 (+0200)
Subject: wip #809 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7bd8fac6eda360c22dd4707e6c95797add290c53;p=fluidbook-html5.git

wip #809 @3
---

diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js
index 1fb45897..a68e711f 100644
--- a/js/libs/fluidbook/fluidbook.3dflip.js
+++ b/js/libs/fluidbook/fluidbook.3dflip.js
@@ -201,6 +201,8 @@ Fluidbook3DFlip.prototype = {
 
     prepareTurn: function (turning, callback) {
         var $this = this;
+        this.disposeTextures();
+
         this.prepareTexture(turning.flip[1], function (t1) {
             $this.prepareTexture(turning.flip[0], function (t2) {
                 $this.texturesLoaded(t1, t2, callback);
@@ -209,8 +211,12 @@ Fluidbook3DFlip.prototype = {
     },
 
     texturesLoaded: function (t1, t2, callback) {
-        this.textures[0].map = t1;
-        this.textures[1].map = t2;
+        if (t1 != null) {
+            this.textures[0].map = t1;
+        }
+        if (t2 != null) {
+            this.textures[1].map = t2;
+        }
 
         this.textures[0].needsUpdate = true;
         this.textures[1].needsUpdate = true;
@@ -229,15 +235,21 @@ Fluidbook3DFlip.prototype = {
         }
     },
 
-    prepareTexture: function (page, callback) {
-        this.disposeTextures();
+    // prepareTexture: function (page, callback) {
+    //     this.disposeTextures();
+    //
+    //     var $this = this;
+    //     this.fluidbook.loader.loadTexture(page, function () {
+    //         var texture = new THREE.Texture($this.fluidbook.loader.getTexture(page));
+    //         texture.needsUpdate = true;
+    //         callback(texture);
+    //     });
+    // },
 
-        var $this = this;
-        this.fluidbook.loader.loadTexture(page, function () {
-            var texture = new THREE.Texture($this.fluidbook.loader.getTexture(page));
-            texture.needsUpdate = true;
-            callback(texture);
-        });
+    prepareTexture: function (page, callback) {
+        var texture = new THREE.Texture(this.fluidbook.loader.getTexture(page));
+        texture.needsUpdate = true;
+        callback(texture);
     },
 
     playTurn: function (dir, callback) {
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 1197a66f..c83e96d8 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -108,6 +108,7 @@ Fluidbook.prototype = {
 
         this.initTheme();
         this.initKeyboardShortcuts();
+        this.initLoading();
     },
 
     setMaxPage: function (p) {
@@ -143,12 +144,15 @@ Fluidbook.prototype = {
         } else {
             $('html').addClass('menu-default');
         }
-
-        this.initLoading();
     },
     initLoading: function () {
         $("#loader").append(getSpriteIcon('interface-loader'));
         this.displayLoader();
+        var $this = this;
+        this.loader.preloadStart(function () {
+            console.log('preload done');
+            $this.ready();
+        });
     },
     reloadErrorImages: function () {
         $('img').each(function () {
@@ -156,7 +160,6 @@ Fluidbook.prototype = {
         });
     },
     initKeyboardShortcuts: function () {
-
         // General keyboard shortcuts
         key('home', this.goFirstPage.bind(this));
         key('end', this.goLastPage.bind(this));
@@ -194,33 +197,32 @@ Fluidbook.prototype = {
         }
 
         $(this).trigger('fluidbook.splash.hide');
-
     },
 
-    onReady: function (callback) {
-        if (this.isReady) {
-            callback();
-        } else {
-            $(this).on('fluidbook.ready', function () {
-                callback();
-            });
-        }
-    },
     ready: function () {
         if (this.isReady) {
             return;
         }
         this.isReady = true;
+
         $("#main").css('display', 'block');
         this.nav = new FluidbookNav(this);
         this.interface = new FluidbookInterface(this);
         this.slider = new FluidbookSlider(this);
         this.help = new FluidbookHelp(this);
         this.help.displayAtStartup();
+
+        // Trigger a resize
         resize();
+
+        // Trigger ready event
         $(this).trigger('fluidbookready');
         $(this).trigger('fluidbook.ready');
+
+        // Initial address handling
+        this.changeAddress();
     },
+
     loadPlugins: function () {
         $.each(this.datas.plugins, function (k, plugin) {
             try {
diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index d0610d11..ae2dfb53 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -6,9 +6,18 @@ function FluidbookLoader(fluidbook) {
     this.links = [];
     this.toPreload = [];
     this.imagesErrors = [];
+    this.shadeLeft = null;
+    this.shadeRight = null;
+
+    this.init();
 }
 
 FluidbookLoader.prototype = {
+    init: function () {
+        this.shadeLeft = this.loadImage('images/shadows/pages/left.png');
+        this.shadeRight = this.loadImage('images/shadows/pages/right.png');
+    },
+
     getVersionToLoad: function (page) {
         if (this.fluidbook.vectorTexts) {
             if (this.fluidbook.datas.vectorPages.indexOf(page) >= 0) {
@@ -21,6 +30,10 @@ FluidbookLoader.prototype = {
         return 'raster';
     },
 
+    preloadStart: function (callback) {
+        this.toPreload = [1, 2, 3, 4, 5];
+        this.preloadPages(callback);
+    },
 
     preloadPagesBeforeTransition: function (pages, callback) {
         var $this = this;
@@ -52,18 +65,28 @@ FluidbookLoader.prototype = {
         return true;
     },
 
-    preloadPages: function () {
+    preloadPages: function (cb) {
+        if (cb === undefined) {
+            cb = function () {
+            };
+        }
         if (this.toPreload.length == 0) {
+            cb();
             return;
         }
         var $this = this;
         this.fluidbook.executeWhenNetwork(function () {
+            var preloadingPage = $this.toPreload.shift();
             var callback = function () {
-                $this.preloadPages();
+                if ($this.toPreload.length === 0) {
+                    cb();
+                } else {
+                    $this.preloadPages(cb);
+                }
             };
-            var preloadingPage = $this.toPreload.shift();
+
             $this._preloadPage(preloadingPage, callback);
-        }, 0, 1000);
+        });
     },
 
     _preloadPage: function (page, callback) {
@@ -120,7 +143,7 @@ FluidbookLoader.prototype = {
     },
     cleanPreloaded: function () {
         for (var i = 1; i <= this.fluidbook.getMaxPage(); i++) {
-            if (this.backgrounds[i] != undefined && this.toPreload.indexOf(i) == -1) {
+            if (this.backgrounds[i] !== undefined && this.toPreload.indexOf(i) === -1) {
                 this.deletePage(i);
             }
         }
@@ -237,11 +260,6 @@ FluidbookLoader.prototype = {
         return 'data/background/' + this.fluidbook.support.resolution + '/' + prefix + page + '.jpg';
     },
 
-    getTextureURL: function (page) {
-        var prefix = 't';
-        return 'data/background/150/' + prefix + page + '.jpg';
-    },
-
     getTextsURL: function (page) {
         return 'data/contents/p' + page + '.svg';
     },
@@ -300,16 +318,50 @@ FluidbookLoader.prototype = {
             callback();
             return;
         }
-        var url = this.getTextureURL(page);
-        if (url == false) {
+
+        var d = 1024;
+        var c = document.getElementById("pscanvas");
+        c.width = d;
+        c.height = d;
+        var ctx = c.getContext("2d");
+        ctx.clearRect(0, 0, d, d);
+
+        // Draw background
+        ctx.drawImage(this.backgrounds[page].get(0), 0, 0, d, d);
+        // Draw the texts if necessary
+        if (this.getVersionToLoad(page) === 'textasvector') {
+            ctx.drawImage(this.texts[page].get(0), 0, 0, d, d);
+        }
+
+        // Draw the shadow if necessary
+        if (this.fluidbook.datas.shadeAlpha > 0) {
+            var sw = 1024 / 3;
+            var s, x;
+            if (page % 2 === 0) {
+                // Left
+                s = this.shadeLeft;
+                x = 1024 - sw;
+            } else {
+                // Right
+                s = this.shadeRight;
+                x = 0;
+            }
+            ctx.globalAlpha = this.fluidbook.datas.shadeAlpha / 100;
+            ctx.drawImage(s.get(0), x, 0, sw, d);
+            ctx.globalAlpha = 1;
+        }
+
+        var i = new Image();
+        i.onload = function () {
             callback();
-            return false;
         }
-        this.textures[page] = this.loadImage(url, null, null, null, callback);
+        i.src = c.toDataURL("image/png");
+
+        this.textures[page] = i;
     },
 
     getTexture: function (page) {
-        return this.textures[page].get(0);
+        return this.textures[page];
     },
 
     loadTexts: function (pageNr, callback) {
diff --git a/js/main.js b/js/main.js
index bf85ffe5..66840b10 100644
--- a/js/main.js
+++ b/js/main.js
@@ -27,7 +27,6 @@ var FINISHLOADING = false;
 var PLATFORM = 'web';
 var DEVICE_READY = false;
 
-
 try {
     $(function () {
         JQUERY_READY = true;
@@ -181,7 +180,6 @@ try {
 
             $(window).on('GALBundleLoaded', function (e, info) {
                 console.log('Loaded :: ' + info.bundleName);
-
                 if (info.bundleName == 'content_4') {
                     fluidbook.changeAddress();
                 }
@@ -195,7 +193,6 @@ try {
                         fluidbook.loader.retryErrorImages();
                     }
                 } catch (err) {
-
                 }
             });
         } else {
@@ -252,7 +249,6 @@ try {
         if (INITED == true) {
             return;
         }
-
         INITED = true;
 
         fluidbook = new Fluidbook(DATAS);
@@ -260,7 +256,6 @@ try {
             fluidbook.gal = gal;
         }
         fluidbook.loadPlugins();
-        fluidbook.loader.preloadPages();
 
         desktopScale = 1;
         desktopScaleAmount = 1.5;
@@ -387,17 +382,6 @@ try {
         setTimeout(function () {
             resize();
         }, 1000);
-
-        fluidbook.onReady(function() {
-            if (!startAfterLoading) {
-                fluidbook.changeAddress();
-            }
-        });
-
-        //console.log('fluidbook.ready');
-      setTimeout(function(){
-          fluidbook.ready();
-      }, 3000);
     }
 } catch (err) {
     console.log(err);