wip #7704 @1

diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js
index 642d228018d82e4fe2f2854412782cb541760863..876e8c963e0c0f8120bbb9cd3dfcb8b5358048eb 100644 (file)
--- a/js/libs/fluidbook/fluidbook.loader.js
+++ b/js/libs/fluidbook/fluidbook.loader.js
@@ -20,6 +20,7 @@ function FluidbookLoader(fluidbook) {
     this._loadbalancingServerURL = {};
     this._textureAssetsCache = {};
     this.loadbalancing = false;
+    this._masks = [];
     if (this.fluidbook.settings.hosting_loadbalancer) {
         this.loadbalancing = ['s1.lb.fluidbook.com'];
     }
@@ -40,8 +41,7 @@ FluidbookLoader.prototype = {
                 $this.loadbalancing = [];
                 $.each(data, function (i, server) {
                     $.ajax('https://' + server.h + '/status.txt', {
-                        dataType: 'text',
-                        timeout: 5000
+                        dataType: 'text', timeout: 5000
                     }).done(function (data) {
                         if (data == '1') {
                             for (let i = 0; i < server.w; i++) {
@@ -239,6 +239,7 @@ FluidbookLoader.prototype = {
         var $this = this;
         var $_callback;
 
+        this.loadMask(page);
 
         $_callback = function () {
             $this.loadTexture(page, function () {
@@ -275,9 +276,41 @@ FluidbookLoader.prototype = {
         }
     },
 
+    loadMask: function (page) {
+        if (this._masks[page] !== undefined) {
+            return;
+        }
+        let masks = [];
+        $.each(this.fluidbook.settings.masks, function (k, mask) {
+            if (mask.page !== page) {
+                return;
+            }
+            masks.push(mask.area);
+        });
+        if (masks.length === 0) {
+            this._masks[page] = false;
+            return;
+        }
+
+        let dim = this.fluidbook.settings.pagesDimensions[page];
+        let w = (dim[0] / this.fluidbook.settings.cssScale);
+        let h = (dim[1] / this.fluidbook.settings.cssScale);
+
+        let canvas = $('<canvas class="mask_canvas" id="mask_canvas_' + page + '" width="' + Math.floor(w) + '" height="' + Math.floor(h) + '" aria-hidden="true"></canvas>');
+        $("body").append(canvas);
+        let c = canvas.get(0);
+        let ctx = c.getContext("2d");
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, c.width, c.height);
+        $.each(masks, function (k, mask) {
+            ctx.clearRect(mask.x, mask.y, mask.width, mask.height);
+        });
+        this._masks[page] = c.toDataURL();
+        $("#mask_canvas_" + page).remove();
+    },
+
     preloadAround: function (page) {
         if (this.numPreload == 0) {
-            //this.cleanPreloaded();
             return;
         }
 
@@ -974,6 +1007,10 @@ FluidbookLoader.prototype = {
         } else {
             $(t).append(this.texts[pageNr]);
         }
+
+        if (this._masks[pageNr]) {
+            t.css('mask-image', 'url("' + this._masks[pageNr] + '")');
+        }
         callback();
     },
 

diff --git a/style/fluidbook.less b/style/fluidbook.less
index b5e48567624f82db2c6c4f560a4d7c80fc19b0df..55c3d463fad3a4822932ac3c95fa487d8a9014df 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -446,6 +446,8 @@ body, html {
 .texts {
   width: 100%;
   height: 100%;
+  mask-size: 100% 100%;
+  mask-repeat: no-repeat;
 
   img, object {
     position: absolute;