From 68dbcf7e6acaea0824877bd856febc9dd914681a Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 6 May 2021 20:22:42 +0200 Subject: [PATCH] wait #4460 --- js/libs/fluidbook/fluidbook.loader.js | 199 ++++++++++++++++---------- 1 file changed, 127 insertions(+), 72 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 3922d263..c6445e02 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -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('
' + clinks + '
'); - 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(''); - $("#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) { -- 2.39.5