Disable click/hover on legend zoom zones. Dynamically position a single close button...

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 5e9f64a13f51cc5b4fb5b9d2e0ffe0515313390e..954346eeca14cf9f27a180251c9b13ffe42705df 100644 (file)
--- 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 4bfa5a37c13df6c2c5fd95accbb584817615eaf7..da85ae134f121fc35e5081007a62dcf45a9be7ee 100644 (file)
--- 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 {