wip #815 @0.5

diff --git a/js/libs/cube/util.js b/js/libs/cube/util.js
index 116a771b5f8cd9f57ac75f666c60f627ef8b896d..a29fa6e2b0d5ad82d410b36cb21cfc213b770a0a 100644 (file)
--- 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 52ae4ec6d227c863adfe3d9575a3f48067b866b3..83a11f4429c17536e47de111fa92d9716bb916b6 100644 (file)
--- 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 84a067e139458f3e01764400be576533ee0bb07a..bb962caeef90135dfe81052878028208b971cdd4 100644 (file)
--- 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 6d800e3b9c3de560fcee4f779e9105c0bef33674..61fa2c40113e135aa3cb86ace1b0c0eeefec1791 100644 (file)
--- 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 f848bcb1ebd3e917bea94f4488f8b92bd6cb518e..dcf314367a470f5d72e12f76c0defa10ebd90032 100644 (file)
--- 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 {