From: Vincent Vanwaelscappel Date: Wed, 27 Mar 2019 13:38:25 +0000 (+0100) Subject: wip #2629 @10 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d68264cb768234346e713f0fd48567bc7f25717a;p=fluidbook-html5.git wip #2629 @10 --- diff --git a/js/libs/cube/util.js b/js/libs/cube/util.js index b99dabed..14b25075 100644 --- a/js/libs/cube/util.js +++ b/js/libs/cube/util.js @@ -24,6 +24,10 @@ function json_parse(str, info) { } } +function isOnStage(element) { + return $(element).closest('body').length > 0; +} + function trim(str, charlist) { // http://kevin.vanzonneveld.net // + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net) @@ -130,23 +134,21 @@ function loadImage(src, callback) { return img; } -function getSVGDocument(element){ - var el=$(element).get(0); - if (el.contentDocument) - { +function getSVGDocument(element) { + var el = $(element).get(0); + if (el.contentDocument) { return el.contentDocument; - } - else - { + } else { var subdoc = null; try { subdoc = el.getSVGDocument(); - } catch(e) {} + } catch (e) { + } return subdoc; } } -Object.size = function(obj) { +Object.size = function (obj) { var size = 0, key; for (key in obj) { if (obj.hasOwnProperty(key)) size++; diff --git a/js/libs/fluidbook/fluidbook.3dflip.js b/js/libs/fluidbook/fluidbook.3dflip.js index 36d5e215..53f15d11 100644 --- a/js/libs/fluidbook/fluidbook.3dflip.js +++ b/js/libs/fluidbook/fluidbook.3dflip.js @@ -518,7 +518,7 @@ Fluidbook3DFlip.prototype = { callback(); this.prepareTurn({flip: [1, 2]}, function () { $this.playTurn(0.1, function () { - this.prepareTurn({flip: [2, 1]}, function () { + $this.prepareTurn({flip: [2, 1]}, function () { $this.playTurn(-1, function () { callback(); }, 0.1, 0); @@ -572,9 +572,11 @@ Fluidbook3DFlip.prototype = { if (null === THREE) { return; } - var texture = new THREE.Texture(this.fluidbook.loader.getTexture(page)); - texture.needsUpdate = true; - callback(texture); + this.fluidbook.loader.getTexture(page, function (image) { + var texture = new THREE.Texture(image); + texture.needsUpdate = true; + callback(texture); + }); }, initTurn: function (dir) { @@ -618,9 +620,12 @@ Fluidbook3DFlip.prototype = { } }, onComplete: function () { - $this.turnRunning = false; this.tlname = ''; - $this._callbackAfterNextRender = callback; + callback(); + setTimeout(function () { + $this.turnRunning = false; + }, 5); + //$this._callbackAfterNextRender = callback; } } ); @@ -638,16 +643,16 @@ Fluidbook3DFlip.prototype = { var render = true; var visible; if (this._progressAnimation < 1) { - if (this.turnRunning) { - if (this.performancesTestRunning) { - this.performancesFrames++; - } - render = true; - visible = true; - } else { - render = false; - visible = false; + if (this.turnRunning) { + if (this.performancesTestRunning) { + this.performancesFrames++; } + render = true; + visible = true; + } else { + render = false; + visible = false; + } } else { render = false; visible = false; @@ -674,6 +679,10 @@ Fluidbook3DFlip.prototype = { }, setJContainerVisibility: function (visibility) { + var isVisible = this.jcontainer.css('display') === 'block'; + if (isVisible === visibility) { + return; + } if (visibility) { this.jcontainer.show(); } else { diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 4541d032..9978b1dd 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -23,6 +23,7 @@ Fluidbook.prototype = { this.flags = {}; this.networkPauseDate = null; this.networkPauseQueue = []; + this.networkPausePriorityQueue = []; this.initNetworkPause(); this.canNavigate = false; @@ -1082,7 +1083,10 @@ Fluidbook.prototype = { }, 1000); }, - pauseNetwork: function (during) { + pauseNetwork: function (during, reset) { + if (reset === undefined) { + reset = false; + } if (during === -1) { this.networkPauseDate = null; this.flushNetworkQueue(); @@ -1090,16 +1094,35 @@ Fluidbook.prototype = { } var date = Date.now() + during + 500; - if (this.networkPauseDate == null) { + if (this.networkPauseDate == null || reset) { + try { + throw new Error('reset pause ' + during); + } catch (e) { + console.log(e); + } + this.networkPauseDate = date; } else { + try { + throw new Error('pause ' + during); + } catch (e) { + console.log(e); + } + this.networkPauseDate = Math.max(this.networkPauseDate, date); } }, - executeWhenNetwork: function (f) { + executeWhenNetwork: function (f, highPriority) { + if (highPriority === undefined) { + highPriority = false; + } if (this.networkPauseDate != null) { - this.networkPauseQueue.push(f); + if (highPriority) { + this.networkPausePriorityQueue.push(f); + } else { + this.networkPauseQueue.push(f); + } return; } f(); @@ -1107,15 +1130,19 @@ Fluidbook.prototype = { unlockCurrentPage: function () { this.contentlock.unlockCurrentPage(); - } - , + }, flushNetworkQueue: function () { - if (this.networkPauseQueue.length === 0 || this.networkPauseDate != null) { + if ((this.networkPausePriorityQueue.length === 0 && this.networkPauseQueue.length === 0) || this.networkPauseDate != null) { return; } - var f = this.networkPauseQueue.shift(); + var f; + if (this.networkPausePriorityQueue.length > 0) { + f = this.networkPausePriorityQueue.shift(); + } else { + f = this.networkPauseQueue.shift(); + } f(); var $this = this; diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 88dd01e4..07a28a44 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -397,7 +397,9 @@ FluidbookLinks.prototype = { } }); - this.fluidbook.pauseNetwork((pauseNetworkDelay + 1) * 1000) + if (pauseNetworkDelay > 0) { + this.fluidbook.pauseNetwork((pauseNetworkDelay + 0.5) * 1000); + } }, getLinkDataById: function (uid) { diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 43c75107..2a99ca1a 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -40,7 +40,13 @@ FluidbookLoader.prototype = { }, preloadPagesBeforeTransition: function (pages, callback) { + this.transitionPages = pages.slice(0); + this._preloadPagesBeforeTransition(pages, callback); + }, + + _preloadPagesBeforeTransition: function (pages, callback) { if (this.arePreloadedPages(pages)) { + this._cleanPreloaded(); callback(); return; } @@ -48,21 +54,22 @@ FluidbookLoader.prototype = { var $this = this; var $pages = pages.slice(0); if ($pages.length == 0) { + this._cleanPreloaded(); callback(); return; } - this.transitionPages = pages.slice(0); var $callback = callback; var $page = $pages.shift(); if ($page == undefined || $page == 'undefined' || $page > this.fluidbook.contentlock.getMaxPage() || $page < 1) { + this._cleanPreloaded(); callback(); return; } this._preloadPage($page, function () { - $this.preloadPagesBeforeTransition($pages, $callback); + $this._preloadPagesBeforeTransition($pages, $callback); }); }, @@ -98,7 +105,7 @@ FluidbookLoader.prototype = { }; $this._preloadPage(preloadingPage, callback); - }); + }, true); }, _preloadPage: function (page, callback) { @@ -144,12 +151,12 @@ FluidbookLoader.prototype = { preloadAround: function (page) { if (this.numPreload == 0) { - this.cleanPreloaded(); + //this.cleanPreloaded(); return; } - var numPreloadAfter = 6; - var numPreloadBefore = 2; + var numPreloadAfter = 10; + var numPreloadBefore = 4; if (this.fluidbook.resize.orientation === 'portrait' || this.fluidbook.singleMode) { numPreloadAfter /= 2; numPreloadBefore /= 2; @@ -164,26 +171,24 @@ FluidbookLoader.prototype = { } } this.preloaded = this.toPreload.slice(0); - this.cleanPreloaded(); + //this.cleanPreloaded(); this.preloadPages(); }, _cleanPreloaded: function () { for (var i = 1; i <= this.fluidbook.contentlock.getMaxPage(); i++) { if (this.preloaded.indexOf(i) === -1 && this.transitionPages.indexOf(i) === -1) { + // If page is not in the preload list, being displayed or used as transition, we delete it from the cache + // to free browser memory this.deletePage(i); + } else { + // Else, we ensure the images are on stage in order to prevent white flash avec page turn. + this.setOnStage(this.backgrounds[i]); + this.setOnStage(this.texts[i]); } } }, - cleanPreloaded: function () { - var $this = this; - clearTimeout(this.cleanTimeout); - this.cleanTimeout = setTimeout(function () { - $this.fluidbook.executeWhenNetwork(function () { - $this._cleanPreloaded(); - }) - }, 10000); - }, + deletePage: function (page) { if (this.backgrounds[page] !== undefined) { delete this.backgrounds[page]; @@ -314,6 +319,14 @@ FluidbookLoader.prototype = { $(back).append($this.backgrounds[page]); }); }, + setOnStage: function (element) { + if (element === undefined || element == null) { + return; + } + if (!isOnStage(element)) { + $("#loadedcontents").append($(element)); + } + }, _loadBackground: function (page, callback) { if (page <= 0 || page > this.fluidbook.datas.pages) { callback(); @@ -445,9 +458,16 @@ FluidbookLoader.prototype = { i.src = c.toDataURL("image/png"); }, - getTexture: function (page) { - var res = this.textures[page]; - return res; + getTexture: function (page, callback) { + var $this = this; + + if (this.textures[page] === undefined) { + this._preloadPage(page, function () { + callback($this.textures[page]); + }); + } else { + callback(this.textures[page]); + } }, loadTexts: function (pageNr, callback) { @@ -531,7 +551,7 @@ FluidbookLoader.prototype = { var thumbPosition = (-spriteleft) + 'px ' + (-spritetop) + 'px'; var thumbSize = 'auto auto'; - if (width != 100) { + if (width !== 100) { thumbImage = 'url("data/background/150/t' + page + '.jpg")'; thumbPosition = '0px 0px'; thumbSize = '100% 100%'; diff --git a/js/libs/fluidbook/fluidbook.pagetransitions.js b/js/libs/fluidbook/fluidbook.pagetransitions.js index 3c58556f..4a41bcd3 100644 --- a/js/libs/fluidbook/fluidbook.pagetransitions.js +++ b/js/libs/fluidbook/fluidbook.pagetransitions.js @@ -111,6 +111,15 @@ FluidbookPageTransition.prototype = { return this.pageTransition3D(pageNr); } }, + + pauseNetworkDuringTransition: function (pageNr) { + this.fluidbook.pauseNetwork((this.getTransitionDuration(pageNr)) * 1000, true); + }, + + pauseNetworkDuringPagesPreload: function () { + this.fluidbook.pauseNetwork(30000); + }, + pageTransition3D: function (pageNr) { var $this = this; @@ -126,12 +135,13 @@ FluidbookPageTransition.prototype = { if (!this.fluidbook.loader.arePreloadedPages(turning.end)) { this.fluidbook.displayLoader(); } + this.pauseNetworkDuringPagesPreload(); this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $("#pages").addClass('_3dtransition'); $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); + $this.pauseNetworkDuringTransition(pageNr); $(doublePage).addClass(turning.nextFromClass + 'end').one($this.fluidbook.support.getTransitionEndEvent(), function () { if ($this.transitionning == false) { return; @@ -166,11 +176,15 @@ FluidbookPageTransition.prototype = { this.fluidbook.displayLoader(); } - $this.fluidbook.pauseNetwork(3000); var currentDoublePage = $("#currentDoublePage"); - $("#pages").prepend('
'); + var cdir = 'fwd'; + if (turning.dir === -1) { + cdir = 'bwd'; + } + $("#pages").prepend('
'); var doublePage = $("#nextDoublePage"); + this.pauseNetworkDuringPagesPreload(); this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $this.flip3d.clean(); $this.flip3d.prepareTurn(turning, function () { @@ -178,14 +192,15 @@ FluidbookPageTransition.prototype = { $this.flip3d.initTurn(turning.dir); setTimeout(function () { $this.fluidbook.loader.setContentsInDoublePage(currentDoublePage, turning.flat, true, function () { - $this.flip3d.playTurn(turning.dir, function () { - $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { + $this.pauseNetworkDuringTransition(pageNr); + $this.flip3d.playTurn(turning.dir, function () { if ($this.transitionning === false) { return; } // Remove former part $("#currentDoublePage").remove(); - $(doublePage).attr('id', 'currentDoublePage').removeClass('_3d'); + $(doublePage).attr('id', 'currentDoublePage').removeClass('_3dflip').removeClass('fwd').removeClass('bwd'); $this.afterTransition(pageNr); }); }); @@ -302,9 +317,10 @@ FluidbookPageTransition.prototype = { if (!this.fluidbook.loader.arePreloadedPages(turning.end)) { this.fluidbook.displayLoader(); } + this.pauseNetworkDuringPagesPreload(); this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { - $this.fluidbook.pauseNetwork(2000); + $this.pauseNetworkDuringTransition(pageNr); $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) { @@ -331,9 +347,10 @@ FluidbookPageTransition.prototype = { if (!this.fluidbook.loader.arePreloadedPages(turning.end)) { this.fluidbook.displayLoader(); } + this.pauseNetworkDuringPagesPreload(); this.fluidbook.loader.preloadPagesBeforeTransition(turning.end, function () { $this.fluidbook.loader.setContentsInDoublePage(doublePage, turning.end, true, function () { - $this.fluidbook.pauseNetwork(2000); + $this.pauseNetworkDuringTransition(pageNr); $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 e29c50df..2a5f550a 100644 --- a/js/libs/fluidbook/fluidbook.stats.js +++ b/js/libs/fluidbook/fluidbook.stats.js @@ -144,7 +144,7 @@ FluidbookStats.prototype = { var $this = this; - var data= { + var data = { id: $this.id, vid: $this.vid, type: type, @@ -156,7 +156,7 @@ FluidbookStats.prototype = { setTimeout(function () { $this.fluidbook.executeWhenNetwork(function () { $this.worker.postMessage(data); - }); + }, false); }, 500); } }; diff --git a/js/libs/scorm/scorm.js b/js/libs/scorm/scorm.js index a76cb80d..e28ba0a7 100644 --- a/js/libs/scorm/scorm.js +++ b/js/libs/scorm/scorm.js @@ -105,7 +105,7 @@ function initScormEvents() { $(fluidbook).on('fluidbook.page.navigation', function (e, page) { fluidbook.executeWhenNetwork(function () { scormSaveCurrentPosition(page); - }); + }, true); }); $(fluidbook).on('fluidbook.maxpage.set', function (e, page) { @@ -117,7 +117,7 @@ function initScormEvents() { setInterval(function () { fluidbook.executeWhenNetwork(function () { pipwerks.SCORM.save(); - }); + }, true); }, 5000); } diff --git a/style/fluidbook.less b/style/fluidbook.less index 23e9b6a0..7ecc7258 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -2303,6 +2303,20 @@ ul.chapters { transform-style: preserve-3d; } +.doublePage._3dflip { + &.fwd { + .page.left { + opacity: 0; + } + } + + &.bwd { + .page.right { + opacity: 0; + } + } +} + ._3d .page { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; @@ -2414,6 +2428,7 @@ ul.chapters { } /* Splash screen */ + #splash { position: absolute; top: 0; @@ -2462,6 +2477,7 @@ ul.chapters { } /* Tooltip */ + #tooltip { @tooltip-arrows-size: 10px; @@ -2598,6 +2614,7 @@ ul.chapters { } /* Zoom Image Popups */ + #zoomPopupOverlay { position: absolute; top: 0; @@ -2714,6 +2731,7 @@ ul.chapters { } /* Blur input */ + body > input { position: absolute; bottom: 0; @@ -2721,12 +2739,14 @@ body > input { } /* SVG Sprite */ + [class^="interface-"], [class*=" interface-"], [class^="nav-"], [class*=" nav-"], [class^="share-"], [class*=" share-"] { display: inline-block; fill: currentColor; } /* Icon states */ + .icon-fullscreen { // Full screen exit icon hidden by default @@ -2802,6 +2822,7 @@ body > input { } /* Landing Page */ + #landingPage { opacity: 0; pointer-events: none; @@ -2870,11 +2891,13 @@ body > input { } /* SEO */ + #seoContents { display: none; } /* General Utils */ + .pointer-events-none { pointer-events: none; }