]> _ Git - fluidbook-html5.git/commitdiff
wait #4460
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 6 May 2021 18:22:42 +0000 (20:22 +0200)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Thu, 6 May 2021 18:22:42 +0000 (20:22 +0200)
js/libs/fluidbook/fluidbook.loader.js

index 3922d2630ce7c06b5863926bf126468c013fb88b..c6445e02e356ee8a67e9fd6eb79b2cc1d4948dac 100644 (file)
@@ -3,6 +3,7 @@ function FluidbookLoader(fluidbook) {
     this.texts = [];
     this.backgrounds = [];
     this.textures = [];
+    this.leaveTextures = [];
     this.links = [];
     this.toPreload = [];
     this.preloaded = [];
@@ -15,6 +16,7 @@ function FluidbookLoader(fluidbook) {
     this.cleanTimeout = null;
     this.format = fluidbook.settings.imageFormat;
     this.imageMimeType = this.format === 'jpg' ? 'image/jpeg' : 'image/png';
+    this._needSeparateTextures = [];
 
     this.init();
 }
@@ -254,6 +256,9 @@ FluidbookLoader.prototype = {
         if (this.textures[page] !== undefined && this.textures[page] !== null) {
             delete this.textures[page];
         }
+        if (this.leaveTextures[page] !== undefined && this.leaveTextures[page] !== null) {
+            delete this.leaveTextures[page];
+        }
 
         $("#loadedcontents [data-page='" + page + "']").remove();
     },
@@ -337,7 +342,6 @@ FluidbookLoader.prototype = {
             return content;
         }
         var res = content.replace(/data\/([^"]*)\.html/gm, "data/$1." + ext);
-        console.log('ext replaced', ext, content, res);
         return res;
     },
 
@@ -419,105 +423,156 @@ FluidbookLoader.prototype = {
         }
         this.backgrounds[page] = this.loadImage(url, null, null, null, page, callback);
     },
-    loadTexture: function (page, callback) {
+    needSeparateTextures: function (page) {
+        return this.fluidbook.settings.clinks[page].indexOf('data-animation-hide') >= 0;
+    },
+    loadTexture: function (page, callback, enter) {
+        if (enter === undefined) {
+            enter = true;
+        }
+        if (!this.needSeparateTextures(page)) {
+            enter = true;
+        }
         if (page <= 0 || page > this.fluidbook.settings.pages) {
             callback();
             return;
         }
 
+
         if (this.textures[page] !== undefined && this.textures[page] !== null) {
             callback();
         } else {
             try {
-                this._loadTexture(page, callback);
+                this._loadTexture(page, callback, enter);
             } catch (e) {
                 callback();
             }
         }
     },
 
-    _loadTexture: function (page, callback) {
-        if (!this.fluidbook.support.datauriallowed || page <= 0 || page > this.fluidbook.settings.pages) {
-            callback();
+    _preloadContentLinkTextures: function (page, clinks, enter, callback) {
+        var textures = {};
+        if (clinks === '') {
+            callback(textures);
             return;
         }
+        $("body").append('<div class="texture_clinks" data-page="' + page + '">' + clinks + '</div>');
 
-        var $this = this;
-        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);
-
-        var wr = d / $this.fluidbook.settings.width;
-        var hr = d / $this.fluidbook.settings.height;
+        var loaded = 0;
+        var nb = 0;
+        var cb = function () {
+            loaded++;
+            if (loaded === nb) {
+                callback(textures);
+            }
+        };
+        $('.texture_clinks[data-page="' + page + '"] .contentLink[data-image]').each(function () {
+            if (enter && $(this).data('animation-hide')) {
+                return;
+            }
+            nb++;
+            var i = $(this).data('image');
+            var url = i.replace(/^\.\./, 'data');
+            textures[i] = loadImage(url, cb);
+        });
+        if (nb === 0) {
+            callback(textures);
+            return;
+        }
+    },
 
-        // Draw background
-        if (this.backgrounds[page] !== undefined && this.backgrounds[page] !== null) {
-            ctx.drawImage(this.backgrounds[page].get(0), 0, 0, d * 1.002, d);
-        } else {
-            ctx.fillStyle = "#FFFFFF";
-            ctx.fillRect(0, 0, d, d);
+    _loadTexture: function (page, callback, enter) {
+        if (enter === undefined) {
+            enter = true;
         }
-        // Draw the texts if necessary
-        if (this.getVersionToLoad(page) === 'textasvector' || this.getVersionToLoad(page) === 'vector') {
-            try {
-                var img = this.texts[page].get(0);
-                if (img.width === 0) {
-                    $this.deletePage(page);
-                    $this._preloadPage(page, callback);
-                    return;
+        if (!this.fluidbook.support.datauriallowed || page <= 0 || page > this.fluidbook.settings.pages) {
+            callback();
+            return;
+        }
+        var $this = this;
+        var clinks = this.handleExtension(this.fluidbook.settings.clinks[page]);
+        this._preloadContentLinkTextures(page,clinks, enter, function (textures) {
+            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);
+
+            var wr = d / $this.fluidbook.settings.width;
+            var hr = d / $this.fluidbook.settings.height;
+
+            // Draw background
+            if ($this.backgrounds[page] !== undefined && $this.backgrounds[page] !== null) {
+                ctx.drawImage($this.backgrounds[page].get(0), 0, 0, d * 1.002, d);
+            } else {
+                ctx.fillStyle = "#FFFFFF";
+                ctx.fillRect(0, 0, d, d);
+            }
+            // Draw the texts if necessary
+            if ($this.getVersionToLoad(page) === 'textasvector' || $this.getVersionToLoad(page) === 'vector') {
+                try {
+                    var img = $this.texts[page].get(0);
+                    if (img.width === 0) {
+                        $this.deletePage(page);
+                        $this._preloadPage(page, callback);
+                        return;
+                    }
+                    ctx.drawImage(img, -1, 0, d + 2, d);
+                } catch (e) {
                 }
-                ctx.drawImage(img, -1, 0, d + 2, d);
-            } catch (e) {
             }
-        }
 
-        // Draw content links
-        var clinks = this.handleExtension(this.fluidbook.settings.clinks[page]);
-        if (clinks !== '') {
-            $("body").append('<div id="texture_clinks">' + clinks + '</div>');
-            $("#texture_clinks .contentLink").each(function () {
-                var left = parseFloat($(this).css('left')) * wr;
-                var top = parseFloat($(this).css('top')) * hr;
-                var width = parseFloat($(this).css('width')) * wr;
-                var height = parseFloat($(this).css('height')) * hr;
-                if ($(this).is('[data-color]')) {
-                    ctx.fillStyle = $(this).attr('data-color');
-                    ctx.fillRect(left, top, width, height);
-                } else {
+            // Draw content links
 
-                }
-            });
+            if (clinks !== '') {
+                $('.texture_clinks[data-page="' + page + '"] .contentLink').each(function () {
+                    if (enter && $(this).data('animation-hide')) {
+                        return;
+                    }
+                    var left = parseFloat($(this).css('left')) * wr;
+                    var top = parseFloat($(this).css('top')) * hr;
+                    var width = parseFloat($(this).css('width')) * wr;
+                    var height = parseFloat($(this).css('height')) * hr;
+                    if ($(this).is('[data-color]')) {
+                        ctx.fillStyle = $(this).attr('data-color');
+                        ctx.fillRect(left, top, width, height);
+                    } else if ($(this).is('[data-image]')) {
+                        var i = $(this).data('image');
+                        if (textures[i] !== undefined && textures[i] !== null) {
+                            ctx.drawImage(textures[i], left, top, width, height);
+                        }
+                    }
+                });
 
-            $("#texture_clinks").remove();
-        }
+                $('.texture_clinks[data-page="' + page + '"]').remove();
+            }
 
-        // Draw the shadow if necessary
-        if (this.fluidbook.settings.shadeAlpha > 0) {
-            var sw = d * .25;
-            var s, x;
-            if (page % 2 === 0) {
-                // Left
-                s = this.shadeLeft;
-                x = 1024 - sw;
-            } else {
-                // Right
-                s = this.shadeRight;
-                x = 0;
+            // Draw the shadow if necessary
+            if ($this.fluidbook.settings.shadeAlpha > 0) {
+                var sw = d * .25;
+                var s, x;
+                if (page % 2 === 0) {
+                    // Left
+                    s = $this.shadeLeft;
+                    x = 1024 - sw;
+                } else {
+                    // Right
+                    s = $this.shadeRight;
+                    x = 0;
+                }
+                ctx.globalAlpha = 2 * $this.fluidbook.settings.shadeAlpha / 100;
+                ctx.drawImage(s.get(0), x, 0, sw, d);
+                ctx.globalAlpha = 1;
             }
-            ctx.globalAlpha = 2 * this.fluidbook.settings.shadeAlpha / 100;
-            ctx.drawImage(s.get(0), x, 0, sw, d);
-            ctx.globalAlpha = 1;
-        }
 
-        var i = new Image();
-        i.onload = function () {
-            $this.textures[page] = i;
-            callback();
-        }
-        i.src = c.toDataURL("image/png");
+            var i = new Image();
+            i.onload = function () {
+                $this.textures[page] = i;
+                callback();
+            }
+            i.src = c.toDataURL("image/png");
+        });
     },
 
     getTexture: function (page, callback) {