wip #4702 @2

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 081bef9225fde37c80a9e20954a85e82c01ff732..5771e95a76195fbb508045c0697551fd3a8030c8 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -665,16 +665,66 @@ FluidbookLoader.prototype = {
 
         var $this = this;
 
+
         if (this.texts[pageNr] !== undefined) {
-            $("#page_" + pageNr + ' .texts').append(this.texts[pageNr]);
+            var textContent = this.fluidbook.support.chromeBased ? '<canvas data-page="' + pageNr + '" class="p"></canvas><canvas data-page="' + pageNr + '" class="z"></canvas>' : this.texts[pageNr];
+            $("#page_" + pageNr + ' .texts').html(textContent);
+            $this.renderTextsCanvas();
             callback();
         } else {
             this._loadTexts(pageNr, function () {
-                $("#page_" + pageNr + ' .texts').append($this.texts[pageNr]);
+                var textContent = this.fluidbook.support.chromeBased ? '<canvas data-page="' + pageNr + '" class="p"></canvas><canvas data-page="' + pageNr + '" class="z"></canvas>' : this.texts[pageNr];
+                $("#page_" + pageNr + ' .texts').html(textContent);
+                $this.renderTextsCanvas();
                 callback();
             });
         }
     },
+
+    renderTextsCanvas: function () {
+        var $this = this;
+
+        var z = this.fluidbook.resize.bookScale * 1.5;
+        var mz = this.fluidbook.resize.bookScale * this.fluidbook.zoom.max;
+
+        var w = this.fluidbook.settings.width * z;
+        var h = this.fluidbook.settings.height * z;
+        var wz = this.fluidbook.settings.width * mz;
+        var hz = this.fluidbook.settings.height * mz;
+
+        $('canvas[data-page]').each(function () {
+            if ($this.fluidbook.zoom.zoom === 1 && $(this).hasClass('z')) {
+                return;
+            }
+            var canvas = $(this).get(0);
+            var page = $(this).data('page');
+
+            if ($(this).data('bookScale') === z) {
+                console.log('no need to render canvas on page ' + page + '')
+                return;
+            }
+            console.log('render canvas on page ' + page);
+
+            var cw = $(this).hasClass('z') ? wz : w;
+            var ch = $(this).hasClass('z') ? hz : h;
+
+            canvas.width = cw;
+            canvas.height = ch;
+
+            var ctx = canvas.getContext("2d");
+            ctx.clearRect(0, 0, cw, ch);
+
+            var img = $this.texts[page].get(0);
+            // if (img.width === 0) {
+            //     $this.deletePage(page);
+            //     $this._preloadPage(page, callback);
+            //     return;
+            // }
+            ctx.drawImage(img, 0, 0, cw, ch);
+            $(this).data('bookScale', z);
+        });
+    },
+
     _loadTexts: function (pageNr, callback) {
         if (pageNr <= 0 || pageNr > this.fluidbook.settings.pages) {
             callback();

diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js
index 90cb6a9403061e837ca9ce43c051335987d52513..256622a92cd55697528bebcb65575fbda7bbe5f2 100644 (file)
--- a/js/libs/fluidbook/fluidbook.resize.js
+++ b/js/libs/fluidbook/fluidbook.resize.js
@@ -180,6 +180,12 @@ FluidbookResize.prototype = {
             origin[1] = '0%';
         }
 
+        try {
+            this.fluidbook.loader.renderTextsCanvas();
+        }catch (e){
+
+        }
+
         var tabsScale = this.fluidbook.tabs.guessBookScale(this.bookScale, aw, fww);
         this.bookScale *= tabsScale;
 

diff --git a/js/libs/fluidbook/fluidbook.support.js b/js/libs/fluidbook/fluidbook.support.js
index 13550159126d62ab2f6b45fa7dc0f741039e2b33..1ae95490de1d175d2cb96b8390d73d8513664ba7 100644 (file)
--- a/js/libs/fluidbook/fluidbook.support.js
+++ b/js/libs/fluidbook/fluidbook.support.js
@@ -13,6 +13,7 @@ function FluidbookSupport(fluidbook) {
     this.android3 = this.android && this.userAgent.search(/android 3/i) > -1;
     this.iOS = Modernizr.ios;
     this.edge = Modernizr.edge;
+    this.chromeBased = Modernizr.chrome || this.edge;
     // If in node-webkit or if the index.html fluidbook is locally open in a browser
     this.offline = (typeof process !== "undefined" && process.versions['node-webkit']) || window.location.toString().indexOf("file://") == 0;
 

diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index e0bd67374ad826e0a3284f737eb1d1e63f4398af..341841f0e2693e7cb720b8918eb4375bea2c5366 100644 (file)
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -316,6 +316,11 @@ FluidbookZoom.prototype = {
         } else {
             $("body").removeClass('zoomed');
         }
+        try {
+            this.fluidbook.loader.renderTextsCanvas();
+        }catch (e){
+
+        }
 
         return true;
     }

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 3db3466ec6f16f1642086e111fc751d53d4b2fa9..782343fc44e60209dac4c9a0a8e291ef77b008c1 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -388,13 +388,32 @@ body, html {
     height: 100%;
   }
 
-  img, object {
+  img, object, canvas {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
   }
+
+  canvas {
+    &.p {
+      display: block;
+
+      .zoomed & {
+        display: none;
+      }
+    }
+
+    &.z {
+      display: none;
+
+      .zoomed & {
+        display: block;
+      }
+    }
+  }
+
 }
 
 /* Espaces forcés */