From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 28 Sep 2021 17:31:42 +0000 (+0200)
Subject: wait #4717 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=3fdce68cc8bd330b6c990387d20a58f2ce2994e6;p=fluidbook-html5.git

wait #4717 @2
---

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 12c66623..4e59bcab 100644
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -678,7 +678,11 @@ FluidbookLoader.prototype = {
     addTextContents: function (pageNr, callback) {
         var t = $("#page_" + pageNr + ' .texts');
         if (this.fluidbook.support.svgtocanvas) {
-            $(t).html('<canvas data-page="' + pageNr + '" class="p"></canvas><canvas data-page="' + pageNr + '" class="z"></canvas>');
+            var html = '<canvas data-page="' + pageNr + '" class="p"></canvas>';
+            if (!this.fluidbook.mobilefirst.enabled) {
+                html += '<canvas data-page="' + pageNr + '" class="z"></canvas>';
+            }
+            $(t).html(html);
             this.renderTextsCanvas();
         } else {
             $(t).append(this.texts[pageNr]);
@@ -715,15 +719,14 @@ FluidbookLoader.prototype = {
 
             var canvas = $(this).get(0);
 
-
-            if ($(this).data('bookScale') === w) {
-                return;
-            }
-
             var cz = $(this).hasClass('z') ? mz : z;
             var cw = $(this).hasClass('z') ? wz : w;
             var ch = $(this).hasClass('z') ? hz : h;
 
+            if ($(this).data('w') === cw && $(this).data('h') === ch) {
+                return;
+            }
+
             canvas.width = cw + 30;
             canvas.height = ch + 30;
 
@@ -734,7 +737,6 @@ FluidbookLoader.prototype = {
             }
 
             var ctx = canvas.getContext("2d");
-
             var img = $this.texts[page].get(0);
             if (img.width === 0) {
                 $this.deletePage(page);
@@ -742,7 +744,7 @@ FluidbookLoader.prototype = {
                 return;
             }
             ctx.drawImage(img, 0, 0, img.width * 0.998, img.height * 0.998, 0, 0, cw, ch);
-            $(this).data('bookScale', w);
+            $(this).data('w', cw).data('h', ch);
         });
     },
 
diff --git a/js/libs/fluidbook/fluidbook.mobilefirst.js b/js/libs/fluidbook/fluidbook.mobilefirst.js
index 7944e006..98e43c70 100644
--- a/js/libs/fluidbook/fluidbook.mobilefirst.js
+++ b/js/libs/fluidbook/fluidbook.mobilefirst.js
@@ -19,8 +19,7 @@ FluidbookMobileFirst.prototype = {
     init: function () {
         var $this = this;
         $("html").addClass('mobilefirst');
-        $("#scroll").append($('#shadow'));
-        $("#shadow .side").remove();
+        $("#shadow").remove();
 
         document.getElementById('scroll').addEventListener('scroll', function () {
             $this.isScrolling = true;
@@ -75,7 +74,6 @@ FluidbookMobileFirst.prototype = {
                 return;
             }
             if (rect.top < $this.fluidbook.resize.hh) {
-                console.log($(this).attr('id'), rect.top, $this.fluidbook.resize.hh);
                 $(this).addClass('revealed');
                 if ($(this).find('a.displayArea').length > 0) {
                     $this.fluidbook.links.animateLink(this, delay);
@@ -97,23 +95,13 @@ FluidbookMobileFirst.prototype = {
     },
 
     beforeTransition: function (page) {
+
         this.transitioning = true;
         $('#pages .mf-nav').css({opacity: 0});
         var $this = this;
-        var dimensions = this.fluidbook.loader.getPageDimensions(page);
-        var max = Math.max(dimensions.height, $("#currentDoublePage").outerHeight());
-
-        var selector = "#nextDoublePage .page, #nextDoublePage";
-        if ($("#nextDoublePage").length === 0) {
-            selector = '#currentDoublePage .page,#currentDoublePage';
-        }
 
-        $(selector).css({
-            height: dimensions.height,
-            maxHeight: dimensions.height
-        });
+        resize();
 
-        $("#pages,#fluidbook").css({height: max, maxHeight: max});
         var scrollTo = $("#scroll").scrollTop();
         $("#scroll").scrollTop(0).css('transform', 'translateY(' + (-scrollTo) + 'px)').addClass('gototop');
         setTimeout(function () {
@@ -150,17 +138,39 @@ FluidbookMobileFirst.prototype = {
     },
 
     resize: function () {
-        var bh = $("#currentDoublePage").outerHeight();
+        var bh = 0;
+        var scale = 1;
+        var width;
+        if (this.fluidbook.currentPage > 0) {
+            scale = this.getBookScale(this.fluidbook.resize.aw);
+            width = this.getWidth(this.fluidbook.resize.aw);
+            bh = this.fluidbook.loader.getPageDimensions(this.fluidbook.currentPage, width).height;
+        }
+
         $('#pages .mf-nav').css('top', bh);
-        $("#links,#searchHighlights,#shadow").css({height: bh, maxHeight: bh});
+        $("#links,#pages").css({height: bh, maxHeight: bh});
+        var sbh = bh / scale;
+        $("#searchHighlights").css({height: sbh, maxHeight: sbh})
 
         var h = bh + $("#pages .mf-nav").outerHeight();
-        $("#pages,#fluidbook").css({height: h});
-        $("#pages").css('maxHeight', h);
+        $("#fluidbook").css({height: h, maxHeight: h});
+
+        var $this = this;
+        $(".page").each(function () {
+            var p = $(this).data('page');
+            bh = $this.fluidbook.loader.getPageDimensions(p, width).height;
+            var dp = $(this).closest('.doublePage');
+            $(this).css({height: bh, maxHeight: bh});
+            $(dp).css({height: bh, maxHeight: bh});
+        });
+    },
+
+    getWidth: function (aw) {
+        return Math.min(620, aw);
     },
 
     getBookScale: function (aw) {
-        return Math.min(620, aw) / this.fluidbook.settings.width;
+        return this.getWidth(aw) / this.fluidbook.settings.width;
     },
 
     getFooterNavigation: function (page) {