Add popup overlay for zoom areas | wip #1452 @1

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 66490247c733f1c63b558a04fe0bf81a5fdd5987..db986a5192fde3810bd6dbf3a85c5c4ae31752cd 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -28,9 +28,9 @@ FluidbookLinks.prototype = {
             return true;
         });
 
-        $(document).on('click touchend', '#zoomPopupOverlay, #zoomPopupWrapper', function (e) {
-
+        $(document).on('click touchend', '#zoomPopupOverlay, #zoomPopupWrapper,  #zoomPopupClose', function (e) {
             $this.zoomLinkReset();
+            return false;
         });
 
     },
@@ -168,7 +168,7 @@ FluidbookLinks.prototype = {
 
             z.data('scale', zoomScale);
             // Show overlay
-            $('body').addClass('zoomPopup');
+            $this.showOverlay();
         });
     },
 
@@ -177,7 +177,6 @@ FluidbookLinks.prototype = {
             immediate = false;
         }
 
-        if (!$('body').hasClass('zoomPopup')) return false; // Already open
 
         var z = $('#zoomPopupWrapper'),
             scale = z.data('scale');
@@ -190,18 +189,34 @@ FluidbookLinks.prototype = {
         });
         if (immediate) {
             $('#zoomPopupWrapper').hide();
-            $('body').removeClass('zoomPopup');
+            this.hideOverlay(1);
         }
 
         // Hide popup after transition completes
         // ToDo: use CSS transition end event to do this without needing a timeout value (or use Web Animation API)
         // ToDo: see https://davidwalsh.name/css-animation-callback
+        this.hideOverlay(500);
         setTimeout(function () {
             $('#zoomPopupWrapper').hide();
-            $('body').removeClass('zoomPopup');
         }, 500);
 
         return false;
+    },
+
+    hideOverlay: function (delay) {
+        if (delay == undefined) {
+            delay = 500;
+        }
+        $("#zoomPopupOverlay").css('opacity', 0);
+        setTimeout(function () {
+            $("#zoomPopupOverlay").hide();
+        }, delay);
+    },
+    showOverlay: function () {
+        $("#zoomPopupOverlay").css('opacity', 0).show();
+        setTimeout(function () {
+            $("#zoomPopupOverlay").css('opacity', 1)
+        }, 10)
     }
 
 }
\ No newline at end of file

diff --git a/style/fluidbook.less b/style/fluidbook.less
index cd004b947df92650acd3c618dd664645315afbcd..a4755ba403b98a3d939b3634bc4de25b1033a71e 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 
 /* Screenshot */
 .screenshot .mview {
@@ -827,6 +828,7 @@ footer.hidden, header.hidden, #interface.hidden {
        height: 100%;
        z-index: 21;
        cursor: default;
+       .overlayBackground();
 }
 
 .mview {
@@ -1794,13 +1796,9 @@ ul.chapters {
        left: 0;
        width: 100%;
        height: 100%;
-       background-color: rgba(0, 0, 0, 0);
        z-index: 100;
        display: none;
-
-       body.zoomPopup & {
-               display: block;
-       }
+       .overlayBackground();
 }
 
 #zoomPopupWrapper {