From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 26 Apr 2017 10:57:09 +0000 (+0200)
Subject: wip #815 @0.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=174833925f5318d6506e2bc95ab95ba67ba5c820;p=fluidbook-html5.git

wip #815 @0.5
---

diff --git a/js/libs/cube/util.js b/js/libs/cube/util.js
index 116a771b..a29fa6e2 100644
--- a/js/libs/cube/util.js
+++ b/js/libs/cube/util.js
@@ -108,4 +108,25 @@ function guid() {
 
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
         s4() + '-' + s4() + s4() + s4();
-}
\ No newline at end of file
+}
+
+function loadImage(src, callback) {
+    var img = new Image();
+    var loaded = false;
+    $(img).on('load', function () {
+        if (loaded) {
+            return;
+        }
+        loaded = true;
+        callback(img);
+    });
+    img.src=src;
+    if ($(img).isLoaded()) {
+        if (!loaded) {
+            loaded = true;
+            callback(img);
+        }
+    }
+    return img;
+}
+
diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 52ae4ec6..83a11f44 100644
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -86,19 +86,15 @@ FluidbookLinks.prototype = {
     },
 
     zoomLink: function (link) {
-
         var $this = this;
 
-        // Todo : should be impossible thanks to the overlay
-        if ($('body').hasClass('zoomPopup')) return false; // Ignore clicks on other zoom links if popup is already open
-
         // If the interface is zoomed in, we must zoom out first
         if (this.fluidbook.zoom.zoom > 1) {
             console.log('zooming out before opening zoom box');
             //currentScale = this.fluidbook.desktop.desktopScale; // Get current scale so the size of the popup can be calculated correctly
 
             // Wait for clickZoom out to finish before trying again to open zoom link
-            $(document).one('fluidbook.zoom.out.end', function () {
+            $(this.fluidbook).one('fluidbook.zoom.out.end', function () {
                 $this.zoomLink(link);
             });
 
@@ -144,25 +140,28 @@ FluidbookLinks.prototype = {
             width: box.width,
             height: box.height,
             left: box.left,
-            top: box.top,
-            backgroundImage: 'url(' + zoomImage + ')'
+            top: box.top
         });
+        z.find('img').remove();
 
-        z.show();
-
-        setTimeout(function () {
-            z.css({
-                transform: 'translateX(' + x + 'px) translateY(' + y + 'px)',
-                width: zoomWidth,
-                height: zoomHeight
-            });
-        }, 50);
+        this.fluidbook.displayLoader();
+        loadImage(zoomImage, function (img) {
+            z.append(img);
+            this.fluidbook.hideLoader();
+            z.show();
 
-        z.data('scale', zoomScale);
-
-        // Todo : still useful ?
-        $('body').addClass('zoomPopup');
+            setTimeout(function () {
+                z.css({
+                    transform: 'translateX(' + x + 'px) translateY(' + y + 'px)',
+                    width: zoomWidth,
+                    height: zoomHeight
+                });
+            }, 50);
 
+            z.data('scale', zoomScale);
+            // Show overlay
+            $('body').addClass('zoomPopup');
+        });
     },
 
     zoomLinkReset: function () {
diff --git a/js/main.js b/js/main.js
index 84a067e1..bb962cae 100644
--- a/js/main.js
+++ b/js/main.js
@@ -589,4 +589,17 @@ function getPublicationURL(id) {
     var replaceby = "/" + id + "/";
     url = url.replace(replace, replaceby);
     return url;
-}
\ No newline at end of file
+}
+
+$(function () {
+    $.fn.isLoaded = function () {
+        var img = $(this).get(0);
+        if (img.readyState === 4 || img.readyState === 'complete') {
+            return true;
+        }
+        if (img.complete) {
+            return true;
+        }
+        return false;
+    }
+})
diff --git a/style/fluidbook.css b/style/fluidbook.css
index 6d800e3b..61fa2c40 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1510,24 +1510,6 @@ a.button {
   white-space: nowrap;
   text-decoration: underline;
 }
-/* Zoom on double tap */
-#zoomguides {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  z-index: 100;
-  top: 0;
-  left: 0;
-  overflow: hidden;
-}
-#zoomguides p {
-  color: #fff;
-  font-size: 12px;
-  width: 24%;
-  display: inline-block;
-  max-height: 100%;
-  overflow: hidden;
-}
 /* Zoom Image Popups */
 #zoomPopupOverlay {
   position: absolute;
@@ -1535,7 +1517,7 @@ a.button {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0);
   z-index: 100;
   display: none;
 }
@@ -1544,7 +1526,7 @@ body.zoomPopup #zoomPopupOverlay {
 }
 #zoomPopupWrapper {
   display: none;
-  background-color: #ccc;
+  background-color: transparent;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -1553,6 +1535,14 @@ body.zoomPopup #zoomPopupOverlay {
   position: absolute;
   z-index: 101;
 }
+#zoomPopupWrapper img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+}
 .zoomPopupClose {
   position: absolute;
   top: 10px;
diff --git a/style/fluidbook.less b/style/fluidbook.less
index f848bcb1..dcf31436 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1768,27 +1768,6 @@ a.button {
 
 }
 
-/* Zoom on double tap */
-
-#zoomguides {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	z-index: 100;
-	top: 0;
-	left: 0;
-	overflow: hidden;
-
-	p {
-		color: #fff;
-		font-size: 12px;
-		width: 24%;
-		display: inline-block;
-		max-height: 100%;
-		overflow: hidden;
-	}
-}
-
 /* Zoom Image Popups */
 #zoomPopupOverlay {
 	position: absolute;
@@ -1796,7 +1775,7 @@ a.button {
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background-color: rgba(0,0,0,0.6);
+	background-color: rgba(0, 0, 0, 0);
 	z-index: 100;
 	display: none;
 
@@ -1807,7 +1786,7 @@ a.button {
 
 #zoomPopupWrapper {
 	display: none;
-	background-color: #ccc;
+	background-color: transparent;
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: cover;
@@ -1815,6 +1794,15 @@ a.button {
 	transform-origin: 0 0;
 	position: absolute;
 	z-index: 101;
+
+	img {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
 }
 
 .zoomPopupClose {