]> _ Git - fluidbook-html5.git/commitdiff
wip #2629 @10
authorVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 27 Mar 2019 13:38:25 +0000 (14:38 +0100)
committerVincent Vanwaelscappel <vincent@cubedesigners.com>
Wed, 27 Mar 2019 13:38:25 +0000 (14:38 +0100)
js/libs/cube/util.js
js/libs/fluidbook/fluidbook.3dflip.js
js/libs/fluidbook/fluidbook.js
js/libs/fluidbook/fluidbook.links.js
js/libs/fluidbook/fluidbook.loader.js
js/libs/fluidbook/fluidbook.pagetransitions.js
js/libs/fluidbook/fluidbook.stats.js
js/libs/scorm/scorm.js
style/fluidbook.less

index b99dabed74874dcbb0f3c74ccfba2e8787bcb5af..14b25075890ddd66db494d7628e94a6797b74bef 100644 (file)
@@ -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++;
index 36d5e21543b58b3c8656e495249e15b7b65f3a4f..53f15d113e898c947046606d49cc7f0b3fd602cb 100644 (file)
@@ -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 {
index 4541d0324c4a719bb1bfd0394282d75d0ba8b093..9978b1ddb87b36a409627c68e8d9ead0d2ad9365 100644 (file)
@@ -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;
index 88dd01e403c914a7380c5d57da438e5ced01d2f0..07a28a444d284cb1df234accdd8ed5c6781e4a7b 100644 (file)
@@ -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) {
index 43c7510751ef74d93b7fb763c3032f5b9cf3736a..2a99ca1a5c01205fea26d457465fcb335328e0e2 100644 (file)
@@ -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%';
index 3c58556f1aff02550171696c21a4420c69abc32a..4a41bcd32710d41172374d133771171325c71e9f 100644 (file)
@@ -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('<div id="nextDoublePage" class="_3d doublePage"></div>');
+        var cdir = 'fwd';
+        if (turning.dir === -1) {
+            cdir = 'bwd';
+        }
+        $("#pages").prepend('<div id="nextDoublePage" class="_3dflip ' + cdir + ' doublePage"></div>');
         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 () {
index e29c50df05799abca0085e65e6150c188acfcce1..2a5f550a6c1f6b71ea467e4842fc1317b5334e1d 100644 (file)
@@ -144,7 +144,7 @@ FluidbookStats.prototype = {
         var $this = this;\r
 \r
 \r
-        var data= {\r
+        var data = {\r
             id: $this.id,\r
             vid: $this.vid,\r
             type: type,\r
@@ -156,7 +156,7 @@ FluidbookStats.prototype = {
         setTimeout(function () {\r
             $this.fluidbook.executeWhenNetwork(function () {\r
                 $this.worker.postMessage(data);\r
-            });\r
+            }, false);\r
         }, 500);\r
     }\r
 };\r
index a76cb80df7294be297c7ef8053dff0b237c647e7..e28ba0a7073cbbdf15afbe593138f277bced343f 100644 (file)
@@ -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);
 }
 
index 23e9b6a0f2d9eab16ada8d4061a2cefed6aaf060..7ecc7258f0a00e1deeda3948814ba3f60c456204 100644 (file)
@@ -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;
 }