WIP #815

diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js
index 5109a405e951d0daa6e1a57968022470da96acef..685e60655d983b9caa6a009c5bb741a6fbcfeb7f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.links.js
+++ b/js/libs/fluidbook/fluidbook.links.js
@@ -6,9 +6,27 @@ function FluidbookLinks(fluidbook) {
 
 FluidbookLinks.prototype = {
     init: function () {
+
+        var $this = this;
+
         $(document).on('click', '[data-wescosales-ref]', function () {
 
         });
+
+        // ToDo: consider re-using existing popinOverlay div?
+        $('body').append('<div id="zoomPopupOverlay"></div><div id="zoomPopupWrapper"><a href="#" class="zoomPopupClose"></a></div>');
+
+        $(document).on('click', '.zoomPopup', function(e) {
+            e.preventDefault();
+            $this.zoomLink(this);
+            return false;
+        });
+
+        $(document).on('click touchend', '#zoomPopupOverlay, .zoomPopupClose', function(e) {
+            console.log('closing zoomPopup...');
+            $this.zoomLinkReset();
+        });
+
     },
     initLinks: function (pageNr) {
         if (pageNr == undefined) {
@@ -67,4 +85,108 @@ FluidbookLinks.prototype = {
         }
     },
 
+    zoomLink: function(link) {
+
+        var $this = this;
+
+        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 ($('body').hasClass('zoomed')) {
+            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('fluidbookZoomOutEnded', function() {
+                $this.zoomLink(link);
+            });
+
+            // Zoom out
+            this.fluidbook.resetZoom();
+
+            return false;
+        }
+
+        //this.zoomLinkReset();
+
+        var z = $('#zoomPopupWrapper'),
+            zoomMargin = 50,
+            availableWidth = $(window).width() - (2 * zoomMargin),
+            availableHeight = $(window).height() - (2 * zoomMargin),
+            $link = $(link),
+            box = $link[0].getBoundingClientRect(),
+            parent = $link.parent('.link'),
+            maxZoom = parseInt($link.data('maxzoom')) || 2,
+            zoomImage = $link.data('zoomimage'),
+            x,
+            y,
+            zoomWidth,
+            zoomHeight,
+            zoomScale;
+
+        // Calculate best scale factor to fit and also to honour the maxZoom level
+        zoomScale = Math.min((availableWidth / box.width), (availableHeight / box.height), maxZoom);
+
+        zoomWidth = box.width * zoomScale;
+        zoomHeight = box.height * zoomScale;
+
+        // Calculate translate co-ordinates
+        x = availableWidth/2 - parent.offset().left - zoomWidth/2 + zoomMargin;
+        y = availableHeight/2 - parent.offset().top - zoomHeight/2 + zoomMargin;
+
+        // console.log(parent);
+        // console.info(box);
+        // console.info(availableWidth, availableHeight);
+
+        z.css({
+            transform: 'none',
+            width: box.width,
+            height: box.height,
+            left: box.left,
+            top: box.top
+            //backgroundImage: 'url('+ zoomImage +')'
+        });
+
+        z.show();
+
+        setTimeout(function(){
+            z.css({
+                transform: 'translateX('+ x +'px) translateY('+ y +'px)',
+                width: zoomWidth,
+                height: zoomHeight
+            });
+        }, 50);
+
+        z.data('scale', zoomScale);
+
+        $('body').addClass('zoomPopup');
+
+    },
+
+    zoomLinkReset: function() {
+
+        if (!$('body').hasClass('zoomPopup')) return false; // Already open
+
+        var z = $('#zoomPopupWrapper'),
+            scale = z.data('scale');
+
+        z.css({
+            transform: 'translate(0,0)',
+            width: z.width() / scale,
+            height: z.height() / scale
+        });
+
+        // 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
+        setTimeout(function() {
+            $('#zoomPopupWrapper').hide();
+            $('body').removeClass('zoomPopup');
+        }, 500);
+
+        //z.attr('style', '');
+
+        return false;
+    }
+
 }
\ No newline at end of file

diff --git a/style/fluidbook.css b/style/fluidbook.css
index 303fd1e6c04061c6eb8fb1bdb5588166811fb472..6d800e3b9c3de560fcee4f779e9105c0bef33674 100644 (file)
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1528,6 +1528,40 @@ a.button {
   max-height: 100%;
   overflow: hidden;
 }
+/* Zoom Image Popups */
+#zoomPopupOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  z-index: 100;
+  display: none;
+}
+body.zoomPopup #zoomPopupOverlay {
+  display: block;
+}
+#zoomPopupWrapper {
+  display: none;
+  background-color: #ccc;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  transition: all 0.5s ease-in-out;
+  transform-origin: 0 0;
+  position: absolute;
+  z-index: 101;
+}
+.zoomPopupClose {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 20px;
+  height: 20px;
+  background: url('../data/images/interface-close.svg') center no-repeat;
+  background-size: contain;
+}
 @media handled and (orientation: portrait) {
   #ol {
     display: none;

diff --git a/style/fluidbook.less b/style/fluidbook.less
index 1fc04adb76e04a28b3c183311f8c7dc4fbae3f47..f848bcb1ebd3e917bea94f4488f8b92bd6cb518e 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1789,6 +1789,44 @@ a.button {
        }
 }
 
+/* Zoom Image Popups */
+#zoomPopupOverlay {
+       position: absolute;
+       top: 0;
+       left: 0;
+       width: 100%;
+       height: 100%;
+       background-color: rgba(0,0,0,0.6);
+       z-index: 100;
+       display: none;
+
+       body.zoomPopup & {
+               display: block;
+       }
+}
+
+#zoomPopupWrapper {
+       display: none;
+       background-color: #ccc;
+       background-repeat: no-repeat;
+       background-position: center;
+       background-size: cover;
+       transition: all 0.5s ease-in-out;
+       transform-origin: 0 0;
+       position: absolute;
+       z-index: 101;
+}
+
+.zoomPopupClose {
+       position: absolute;
+       top: 10px;
+       right: 10px;
+       width: 20px;
+       height: 20px;
+       background: url('../data/images/interface-close.svg') center no-repeat;
+       background-size: contain;
+}
+
 @media handled and (orientation: portrait) {
        #ol {
                display: none;