From e477c2a0f621bd644bb28ad60c55e59035833fb4 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 24 Sep 2018 17:12:23 +0200
Subject: [PATCH] Disable click/hover on legend zoom zones. Dynamically
 position a single close button based on the layout of the zoom zones. WIP
 #2087 @2

---
 js/libs/fluidbook/fluidbook.links.js | 11 +++++++++--
 style/fluidbook.less                 | 27 +++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 5e9f64a1..954346ee 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -281,10 +281,11 @@ FluidbookLinks.prototype = {
         links.forEach(function(zoomLink, index) {
             // console.log(index, 'Found link with ID: ' + zoomLink.attr('id'));
 
-            var zoomID = zoomLink.attr('id');
+            var zoomID = zoomLink.attr('id'),
+                $groupWrapper = $('#zoomPopupGroupWrapper');
 
             // Add holder for each zoom zone
-            $('#zoomPopupGroupWrapper').append('<div class="zoomPopupWrapper" id="zoomPopup_'+ zoomID +'"><a href="#" class="zoomPopupClose">' + getSpriteIcon('interface-close') + '</a></div>');
+            $groupWrapper.append('<div class="zoomPopupWrapper" id="zoomPopup_'+ zoomID +'"><a href="#" class="zoomPopupClose">' + getSpriteIcon('interface-close') + '</a></div>');
 
             var z = $('#zoomPopup_' + zoomID),
                 box = zoomLink[0].getBoundingClientRect(), // Should return full values without rounding
@@ -332,6 +333,9 @@ FluidbookLinks.prototype = {
             // Position elements based on the layout
             // There are two possible layouts: stacked or side-by-side
             if (layout == 'stacked') {
+
+                $groupWrapper.addClass('layout-stacked');
+
                 // 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
                 zoomX = Math.round((availableWidth / 2) - parent.offset().left - (zoomWidth / 2) + zoomMargin);
@@ -349,6 +353,8 @@ FluidbookLinks.prototype = {
                 }
             } else {
                 // Side-by-side layout
+                $groupWrapper.addClass('layout-side-by-side');
+
                 // Vertically centre each block
                 zoomY = Math.round((availableHeight / 2) - parent.offset().top - (zoomHeight / 2) + zoomMargin);
 
@@ -451,6 +457,7 @@ FluidbookLinks.prototype = {
         setTimeout(function () {
             $('.zoomPopupWrapper').hide();
             $wrapper.html(''); // Empty group wrapper
+            $wrapper.removeClass(); // Remove all classes (stacked / side-by-side layout)
         }, 500);
 
         return false;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 4bfa5a37..da85ae13 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -2533,6 +2533,28 @@ ul.chapters {
 	.overlayBackground();
 }
 
+// Depending on the layout, hide one of the close buttons
+// We need to define both first and last rules in case there is only one zoom zone
+// In this case, the last written rule will apply
+#zoomPopupGroupWrapper {
+	&.layout-stacked {
+		.zoomPopupWrapper:last-of-type .zoomPopupClose {
+			display: none;
+		}
+		.zoomPopupWrapper:first-of-type .zoomPopupClose {
+			display: block;
+		}
+	}
+	&.layout-side-by-side {
+		.zoomPopupWrapper:first-of-type .zoomPopupClose {
+			display: none;
+		}
+		.zoomPopupWrapper:last-of-type .zoomPopupClose {
+			display: block;
+		}
+	}
+}
+
 .zoomPopupWrapper, .zoomPopupClose {
 	cursor: zoom-out !important; // Needed for close link, otherwise pointer cursor is used
 }
@@ -2764,6 +2786,11 @@ body > input {
 	display: none;
 }
 
+/* General Utils */
+.pointer-events-none {
+	pointer-events: none;
+}
+
 /* Webfonts*/
 
 @font-face {
-- 
2.39.5