From 8b86731cf43c8cd8112da6c9c4de16d5bc74c89f Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 22 Jul 2020 20:31:34 +0200
Subject: [PATCH] wait #38085 @1.5

---
 js/libs/fluidbook/fluidbook.menu.js           | 14 +++++++
 .../fluidbook/links/fluidbook.links.zoomhd.js | 40 ++++++++++++-------
 style/fluidbook.less                          |  1 -
 3 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js
index 0363f8b4..9f414880 100644
--- a/js/libs/fluidbook/fluidbook.menu.js
+++ b/js/libs/fluidbook/fluidbook.menu.js
@@ -960,6 +960,20 @@ FluidbookMenu.prototype = {
                     fullscreen = true;
                 }
                 break;
+
+            case 'zoomhd':
+                if (ww < 800) {
+                    fullscreen = true;
+                    this.fluidbook.links_zoomhd.setAvailableDimensions(ww, hh);
+                } else {
+                    this.fluidbook.links_zoomhd.setAvailableDimensions(ww - 40, hh - 40);
+                    var d = this.fluidbook.links_zoomhd.getContainerDimensions();
+                    w = d.width;
+                    h = d.height;
+                    console.log(d);
+                }
+
+                break;
             default:
                 if (m.data('maxwidth') !== null) {
                     maxWidth = parseInt(m.data('maxwidth'));
diff --git a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
index 8463e024..f5aaf974 100644
--- a/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
+++ b/js/libs/fluidbook/links/fluidbook.links.zoomhd.js
@@ -2,6 +2,11 @@ function FluidbookLinksZoomHD(fluidbook) {
     this.fluidbook = fluidbook;
     this.scale = 1;
     this.refScale = 1;
+    this.maxScale = 1;
+    this.initialImageWidth = 0;
+    this.initialImageHeight = 0;
+    this.currentImageWidth = 0;
+    this.currentImageHeight = 0;
     this.element;
     this.image;
     this.mouseX;
@@ -61,7 +66,7 @@ FluidbookLinksZoomHD.prototype = {
     },
 
     normalizeScale: function (s) {
-        return Math.max(1, Math.min(3.5, s));
+        return Math.max(1, Math.min(this.maxScale, s));
     },
 
     openZoomhd: function (p1, p2, callback) {
@@ -74,7 +79,7 @@ FluidbookLinksZoomHD.prototype = {
         view += '<div class="content h100"><div class="zoomhdHolder"><div class="zoomhdMove"><div class="zoomhdRefScale"><div class="zoomhdScale"><div class="zoomhdImage"></div>';
         view += '</div></div></div><div class="zoomhdControls"><a href="#" class="minus">' + getSpriteIcon('interface-minus') + '</a><a href="#" class="plus">' + getSpriteIcon('interface-plus') + '</a></div></div></div>';
 
-        this.fluidbook.menu.viewWrap(view,'zoomhd','data-fullscreen="1" dir="ltr"','h100');
+        this.fluidbook.menu.viewWrap(view, 'zoomhd', 'data-fullscreen="1" dir="ltr"', 'h100');
         this.element = $("#view").find('.zoomhdScale');
 
         this.image = fluidbook.loader.loadImage('data/links/' + link.to, null, null, null, null, function () {
@@ -150,7 +155,7 @@ FluidbookLinksZoomHD.prototype = {
                 top: this.image.naturalHeight / -2
             }
         );
-        this.resize();
+        resize();
     },
 
     updateMovePosPct: function () {
@@ -178,29 +183,34 @@ FluidbookLinksZoomHD.prototype = {
 
             return;
         }
-        var irect = this.element.find('.zoomhdImage').get(0).getBoundingClientRect();
 
-        this.dragMaxX = 60 + Math.abs(this.fluidbook.resize.ww - irect.width) / 2;
+        this.dragMaxX = Math.abs(this.initialImageWidth - this.currentImageWidth) / 2;
         this.dragMinX = -this.dragMaxX;
-        this.dragMaxY = 60 + Math.abs(this.fluidbook.resize.hh - irect.height) / 2;
+        this.dragMaxY = Math.abs(this.initialImageHeight - this.currentImageHeight) / 2;
         this.dragMinY = -this.dragMaxY;
     },
 
     resize: function () {
-
-        var ww = this.fluidbook.resize.ww;
-        var hh = this.fluidbook.resize.hh;
-
-        this.aw = ww - 60;
-        this.ah = hh - 110;
-
-        this.refScale = Math.min(this.aw / this.image.naturalWidth, this.ah / this.image.naturalHeight);
-
         this.element.closest('.zoomhdRefScale').css({transform: 'scale(' + this.refScale + ')'});
         this.element.css({transform: 'scale(' + this.scale + ')'});
+        this.currentImageWidth = this.initialImageWidth * this.scale;
+        this.currentImageHeight = this.initialImageHeight * this.scale;
 
         this.updateMovePosPct();
     },
+
+    setAvailableDimensions: function (aw, ah) {
+        this.aw = aw;
+        this.ah = ah;
+        this.refScale = Math.min(this.aw / this.image.naturalWidth, this.ah / this.image.naturalHeight);
+        this.maxScale = 1 / this.refScale;
+        this.initialImageWidth = this.image.naturalWidth * this.refScale;
+        this.initialImageHeight = this.image.naturalHeight * this.refScale;
+    },
+
+    getContainerDimensions: function () {
+        return {width: this.initialImageWidth, height: this.initialImageHeight};
+    },
 }
 
 $(function () {
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 2410a5fa..72176c3c 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1661,7 +1661,6 @@ html.ios body.portrait #interface {
       .zoomhdRefScale {
         pointer-events: none;
         position: absolute;
-        margin-top: -30px;
         top: 50%;
         left: 50%;
 
-- 
2.39.5