this.texts = [];
this.backgrounds = [];
this.textures = [];
+ this.leaveTextures = [];
this.links = [];
this.toPreload = [];
this.preloaded = [];
this.cleanTimeout = null;
this.format = fluidbook.settings.imageFormat;
this.imageMimeType = this.format === 'jpg' ? 'image/jpeg' : 'image/png';
+ this._needSeparateTextures = [];
this.init();
}
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();
},
return content;
}
var res = content.replace(/data\/([^"]*)\.html/gm, "data/$1." + ext);
- console.log('ext replaced', ext, content, res);
return res;
},
}
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) {