Refactor zoom popups and make display sharper. Match behaviour of Flash player. Done...

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 208945c637de0bc7a54aad1179bf97627aa1608f..1c6024edfea94fc94059938a11230d2ecc321690 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -126,11 +126,11 @@ FluidbookLinks.prototype = {
             availableWidth = $(window).width() - (2 * zoomMargin),
             availableHeight = $(window).height() - (2 * zoomMargin),
             $link = $(link),
-            box = $link[0].getBoundingClientRect(),
+            box = $link[0].getBoundingClientRect(), // Should return full values without rounding
             parent = $link.closest('.link'),
-            maxZoom = parseInt($link.data('maxzoom')) || 2,
-            baseWidth = parseInt($link.data('width')),
-            baseHeight = parseInt($link.data('height')),
+            baseWidth = parseInt($link.data('width')), // Width of the original link from the editor
+            baseHeight = parseInt($link.data('height')), // Height of the original link from the editor
+            maxZoom = parseInt($link.data('maxzoom')) || 2, // The default value for this should match that of the compiler in zoomLink::generateImage()
             x,
             y,
             zoomWidth,
@@ -144,53 +144,73 @@ FluidbookLinks.prototype = {
         var linkId = $(parent).attr('id').split('_', 2)[1];
         var zoomImage = 'data/links/zoom_' + linkId + '.jpg';
 
+
+        // TODO: In the compiler we should look at generating higher-res images to cater for hiDPI displays
+        // TODO: It should be clearer what the sizes in the link editor really mean - due to screen size and scaling, a 100x100 link could appear as 150x150 in the player so if it we set a max zoom level of 2, it will only appear at 200x200, which is not much bigger than the embedded size. It's hard to handle max zoom levels while also working with a player that always scales the content to fit the screen. The most pragmatic approach probably is to generate higher res images.
+
+
+        // Due to the scaling done by the Fluidbook interface, the actual link size is likely to be different
+        // to the original link editor width and height. Since the zoom image is generated based on the link editor
+        // dimensions multiplied by the max zoom level, we need to be able to take that into account so we don't exceed
+        // the resolution of the image in the popup. We can't use the fluidbook.resize.bookScale variable because it
+        // measures the scaling of the high-res images. Instead, we work out the relative scaling by taking the
+        // link editor width (baseWidth) and comparing it to the actual link width.
+        //maxZoom = maxZoom / (box.width / baseWidth); // Adjusted maxZoom level...
+
         // Calculate best scale factor to fit and also to honour the maxZoom level
         zoomScale = Math.min((availableWidth / baseWidth), (availableHeight / baseHeight), maxZoom);
 
-        console.log('Maxzoom = ' + maxZoom + ' | zoomScale is: ' + zoomScale);
-
+        // Dimensions of the final popup
         zoomWidth = baseWidth * zoomScale;
         zoomHeight = baseHeight * zoomScale;
 
-        // Calculate translate co-ordinates
-        x = availableWidth / 2 - parent.offset().left - zoomWidth / 2 + zoomMargin;
-        y = availableHeight / 2 - parent.offset().top - zoomHeight / 2 + zoomMargin;
+        // Calculate translate co-ordinates so image is centred correctly
+        // Values are rounded so we don't end up with image being positioned between pixels, which causes blurring
+        x = Math.round((availableWidth / 2) - parent.offset().left - (zoomWidth / 2) + zoomMargin);
+        y = Math.round((availableHeight / 2) - parent.offset().top - (zoomHeight / 2) + zoomMargin);
 
-        // console.log(parent);
-        // console.info(box);
-        // console.info(availableWidth, availableHeight);
+        // Keep starting scale with zoom element so it can be used when zooming back out
+        z.data('starting-scale', box.width / zoomWidth);
 
+        // Initial position of the zoom box - should sit over the link and match
+        // size and position so that the element appears to zoom from the link
         z.css({
-            transform: 'none',
-            width: Math.round(box.width), // Rounded to prevent scaling discrepancies against zoom image
-            height: Math.round(box.height),
-            left: box.left,
-            top: box.top
+            transform: 'translateX(0) translateY(0) scale(' + z.data('starting-scale') + ')',
+            width: zoomWidth,
+            height: zoomHeight,
+            left: Math.round(box.left),
+            top: Math.round(box.top)
         });
-        z.find('img').remove();
+        // z.find('img').remove();
 
+        // Load image before running zoom up animation
         this.fluidbook.displayLoader();
         loadImage(zoomImage, function (img) {
-            z.append(img);
+            //z.append(img);
+
+            // Image is set as a background for better scaling / fitting via CSS
+            z.css('background-image', 'url(' + img.src + ')');
             this.fluidbook.hideLoader();
             z.show();
+            $this.showOverlay();
 
-            var s = (zoomWidth / Math.round(box.width));
-            $(".zoomPopupClose").css('opacity', 0).transform({scale: (0.5 * this.fluidbook.resize.interfaceScale) / s, origin: ['100%', '0', 0]});
+            // Trigger zoom up animation just after showing zoom element
             setTimeout(function () {
                 z.css({
                     boxShadow: '0 0 100px rgba(0,0,0,0.3)',
-                    transform: 'translateX(' + x + 'px) translateY(' + y + 'px) scale(' + s + ')',
+                    transform: 'translateX(' + x + 'px) translateY(' + y + 'px) scale(1)'
                 });
             }, 50);
 
+            // Hide close button initially so it only shows when zoom finishes.
+            // Also reduce size a bit - the popup will close by clicking anywhere so link size isn't as critical.
+            // It's better to be smaller so it doesn't cover too much of the zoom image.
+            $(".zoomPopupClose").css('opacity', 0).transform({scale: 0.5, origin: ['100%', 0, 0]});
+
+            // Display close button after zoom animation has finished
             setTimeout(function () {
                 $(".zoomPopupClose").css('opacity', '1');
             }, 500);
-
-            z.data('scale', zoomScale);
-            // Show overlay
-            $this.showOverlay();
         });
     },
 
@@ -208,13 +228,12 @@ FluidbookLinks.prototype = {
         }
 
 
-        var z = $('#zoomPopupWrapper'),
-            scale = z.data('scale');
+        var z = $('#zoomPopupWrapper');
 
         $(".zoomPopupClose").css('opacity', '0');
 
         z.css({
-            transform: 'translate(0,0) scale(1)',
+            transform: 'translate(0,0) scale(' + z.data('starting-scale') + ')',
             boxShadow: '0 0 0 rgba(0,0,0,0.3)',
         });
         if (immediate) {