From: Stephen Cameron <stephen@cubedesigners.com>
Date: Fri, 8 Sep 2017 17:45:51 +0000 (+0200)
Subject: Work to improve zoom popups for better scaling. Not finalised. WIP #1647 @1.75
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=446d0e2a73b535c3433790f0b4135cf8412e698d;p=fluidbook-html5.git

Work to improve zoom popups for better scaling. Not finalised. WIP #1647 @1.75
---

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 1b7d5c70..208945c6 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -129,6 +129,8 @@ FluidbookLinks.prototype = {
             box = $link[0].getBoundingClientRect(),
             parent = $link.closest('.link'),
             maxZoom = parseInt($link.data('maxzoom')) || 2,
+            baseWidth = parseInt($link.data('width')),
+            baseHeight = parseInt($link.data('height')),
             x,
             y,
             zoomWidth,
@@ -142,12 +144,13 @@ FluidbookLinks.prototype = {
         var linkId = $(parent).attr('id').split('_', 2)[1];
         var zoomImage = 'data/links/zoom_' + linkId + '.jpg';
 
-
         // Calculate best scale factor to fit and also to honour the maxZoom level
-        zoomScale = Math.min((availableWidth / box.width), (availableHeight / box.height), maxZoom);
+        zoomScale = Math.min((availableWidth / baseWidth), (availableHeight / baseHeight), maxZoom);
+
+        console.log('Maxzoom = ' + maxZoom + ' | zoomScale is: ' + zoomScale);
 
-        zoomWidth = box.width * zoomScale;
-        zoomHeight = box.height * zoomScale;
+        zoomWidth = baseWidth * zoomScale;
+        zoomHeight = baseHeight * zoomScale;
 
         // Calculate translate co-ordinates
         x = availableWidth / 2 - parent.offset().left - zoomWidth / 2 + zoomMargin;
@@ -159,8 +162,8 @@ FluidbookLinks.prototype = {
 
         z.css({
             transform: 'none',
-            width: box.width,
-            height: box.height,
+            width: Math.round(box.width), // Rounded to prevent scaling discrepancies against zoom image
+            height: Math.round(box.height),
             left: box.left,
             top: box.top
         });
@@ -172,7 +175,7 @@ FluidbookLinks.prototype = {
             this.fluidbook.hideLoader();
             z.show();
 
-            var s = (zoomWidth / box.width);
+            var s = (zoomWidth / Math.round(box.width));
             $(".zoomPopupClose").css('opacity', 0).transform({scale: (0.5 * this.fluidbook.resize.interfaceScale) / s, origin: ['100%', '0', 0]});
             setTimeout(function () {
                 z.css({