From 0f672655f3e6815593487559ff02686b19a9c261 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 29 Aug 2018 17:29:32 +0200
Subject: [PATCH] WIP #2087 @7.5

---
 js/libs/fluidbook/fluidbook.links.js | 61 ++++++++++++++++++++++++----
 1 file changed, 54 insertions(+), 7 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index b2f28317..048621e0 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -209,6 +209,7 @@ FluidbookLinks.prototype = {
             $link = $(link),
             links = [],
             zoomMargin = 50,
+            zoomZonesGap = 30, // Space between grouped zoom links
             availableWidth = $(window).width() - (2 * zoomMargin),
             availableHeight = $(window).height() - (2 * zoomMargin);
 
@@ -228,8 +229,41 @@ FluidbookLinks.prototype = {
             }
         }
 
-        links.forEach(function(zoomLink) {
-            // console.log('Found link with ID: ' + zoomLink.attr('id'));
+        // Sort links so topmost (lowest Y value) link is first. This allows it to be first/top when placed.
+        links.sort(function(a, b) {
+          return a.data('y') - b.data('y');
+        });
+
+
+        // Calculate positions and scaling for all zoomLink blocks
+        // First, get max height of all zoomLink blocks
+        var zoomGroupHeight = links.reduce(function(sum, zoomLink) {
+          return sum + (zoomLink.data('height') * zoomLink.data('maxzoom'));
+        }, 0);
+
+        // Find widest element in collection
+        var zoomGroupMaxWidth = links.reduce(function(maxWidth, zoomLink) {
+          var width = (zoomLink.data('width') * zoomLink.data('maxzoom'));
+          return (width > maxWidth) ? width : maxWidth;
+        }, 0);
+
+
+        // Todo: figure out which will offer best fit: stacked or side-by-side blocks
+
+        // Count gaps between blocks (always 1 less gap than total blocks)
+        // For now we're assuming blocks are stacked, not side-by-side...
+        zoomGroupHeight += (links.length - 1) * zoomZonesGap;
+
+        var zoomGroupScale = Math.min(availableHeight / zoomGroupHeight, availableWidth / zoomGroupMaxWidth, 1);
+
+        zoomGroupHeight = zoomGroupHeight * zoomGroupScale;
+
+
+        // Y position of first block (so both blocks are vertically centred)
+        var zoomGroupY = Math.round((availableHeight - zoomGroupHeight) / 2);
+
+        links.forEach(function(zoomLink, index) {
+            // console.log(index, 'Found link with ID: ' + zoomLink.attr('id'));
 
             var zoomID = zoomLink.attr('id');
 
@@ -242,8 +276,8 @@ FluidbookLinks.prototype = {
                 baseWidth = parseInt(zoomLink.data('width')), // Width of the original link from the editor
                 baseHeight = parseInt(zoomLink.data('height')), // Height of the original link from the editor
                 maxZoom = parseInt(zoomLink.data('maxzoom')) || 2, // The default value for this should match that of the compiler in zoomLink::generateImage()
-                x,
-                y,
+                zoomX,
+                zoomY,
                 zoomWidth,
                 zoomHeight,
                 zoomScale;
@@ -267,6 +301,10 @@ FluidbookLinks.prototype = {
             // link editor width (baseWidth) and comparing it to the actual link width.
             //maxZoom = maxZoom / (box.width / baseWidth); // Adjusted maxZoom level...
 
+            // Apply any necessary group scaling to the individual element
+            baseHeight = baseHeight * zoomGroupScale;
+            baseWidth = baseWidth * zoomGroupScale;
+
             // Calculate best scale factor to fit and also to honour the maxZoom level
             zoomScale = Math.min((availableWidth / baseWidth), (availableHeight / baseHeight), maxZoom);
 
@@ -276,8 +314,17 @@ FluidbookLinks.prototype = {
 
             // 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);
+            zoomX = Math.round((availableWidth / 2) - parent.offset().left - (zoomWidth / 2) + zoomMargin);
+            // zoomY = Math.round((availableHeight / 2) - parent.offset().top - (zoomHeight / 2) + zoomMargin);
+
+            // If this is the first / only block, use calculated zoomGroupY position
+            if (index == 0) {
+              zoomY = zoomGroupY - parent.offset().top + zoomMargin;
+
+            // Otherwise, calculateY position based on first element position
+            } else {
+              zoomY = Math.round(zoomGroupY + links[0].data('height') * links[0].data('maxzoom') * zoomGroupScale + zoomZonesGap + zoomMargin - parent.offset().top);
+            }
 
             // Keep starting scale with zoom element so it can be used when zooming back out
             z.data('starting-scale', box.width / zoomWidth);
@@ -308,7 +355,7 @@ FluidbookLinks.prototype = {
             setTimeout(function () {
               z.css({
                 boxShadow: '0 0 100px rgba(0,0,0,0.3)',
-                transform: 'translateX(' + x + 'px) translateY(' + y + 'px) scale(1)'
+                transform: 'translateX(' + zoomX + 'px) translateY(' + zoomY + 'px) scale(1)'
               });
             }, 50);
 
-- 
2.39.5