From bc0bd93295f66bbc06708d9634f9b16354bf7178 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 25 Apr 2017 15:19:18 +0200 Subject: [PATCH] WIP #815 --- js/libs/fluidbook/fluidbook.links.js | 122 +++++++++++++++++++++++++++ style/fluidbook.css | 34 ++++++++ style/fluidbook.less | 38 +++++++++ 3 files changed, 194 insertions(+) diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 5109a405..685e6065 100644 --- 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('
'); + + $(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 303fd1e6..6d800e3b 100644 --- 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 1fc04adb..f848bcb1 100644 --- 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; -- 2.39.5