From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 8 Jun 2017 11:46:09 +0000 (+0200)
Subject: Add popup overlay for zoom areas | wip #1452 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=bce40a36d201b334e111d2f2a76c1f9c1e43485f;p=fluidbook-html5.git

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 66490247..db986a51 100644
--- 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 cd004b94..a4755ba4 100644
--- 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 {