Shape 2

diff --git a/images/close.svg b/images/close.svg index b37290ab..fde09483 100644 --- a/images/close.svg +++ b/images/close.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/interface.svg b/images/interface.svg new file mode 100644 index 00000000..70bf1ad6 --- /dev/null +++ b/images/interface.svg @@ -0,0 +1,6 @@ + \ No newline at end of file diff --git a/js/libs/cube/util.js b/js/libs/cube/util.js index a29fa6e2..93f3c122 100644 --- a/js/libs/cube/util.js +++ b/js/libs/cube/util.js @@ -120,7 +120,7 @@ function loadImage(src, callback) { loaded = true; callback(img); }); - img.src=src; + img.src = src; if ($(img).isLoaded()) { if (!loaded) { loaded = true; @@ -130,3 +130,18 @@ function loadImage(src, callback) { return img; } +function getSVGDocument(element){ + var el=$(element).get(0); + if (el.contentDocument) + { + return el.contentDocument; + } + else + { + var subdoc = null; + try { + subdoc = el.getSVGDocument(); + } catch(e) {} + return subdoc; + } +} diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 83a11f44..c636b964 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -14,15 +14,20 @@ FluidbookLinks.prototype = { }); // ToDo: consider re-using existing popinOverlay div? - $('body').append('

'); + $('body').append('

'); - $(document).on('click', '.zoomPopup', function (e) { + $(document).on('click touchend', '.zoomPopup', function (e) { e.preventDefault(); $this.zoomLink(this); return false; }); - $(document).on('click touchend', '#zoomPopupOverlay, .zoomPopupClose', function (e) { + $(this.fluidbook).on('fluidbook.zoom.in.end', function () { + $this.zoomLinkReset(true); + return true; + }); + + $(document).on('click touchend', '#zoomPopupOverlay, #zoomPopupWrapper', function (e) { console.log('closing zoomPopup...'); $this.zoomLinkReset(); }); @@ -98,6 +103,7 @@ FluidbookLinks.prototype = { $this.zoomLink(link); }); + // Zoom out this.fluidbook.zoom.resetZoom(); return false; @@ -150,11 +156,12 @@ FluidbookLinks.prototype = { this.fluidbook.hideLoader(); z.show(); + var s = (zoomWidth / box.width); + $(".zoomPopupClose").css('opacity', 1).transform({scale: 1 / s, origin: ['100%', '0', 0]}); setTimeout(function () { z.css({ - transform: 'translateX(' + x + 'px) translateY(' + y + 'px)', - width: zoomWidth, - height: zoomHeight + boxShadow: '0 0 100px rgba(0,0,0,0.3)', + transform: 'translateX(' + x + 'px) translateY(' + y + 'px) scale(' + s + ')', }); }, 50); @@ -164,7 +171,10 @@ FluidbookLinks.prototype = { }); }, - zoomLinkReset: function () { + zoomLinkReset: function (immediate) { + if (immediate == undefined) { + immediate = false; + } if (!$('body').hasClass('zoomPopup')) return false; // Already open @@ -172,21 +182,23 @@ FluidbookLinks.prototype = { scale = z.data('scale'); z.css({ - transform: 'translate(0,0)', - width: z.width() / scale, - height: z.height() / scale + transform: 'translate(0,0) scale(1)', + boxShadow: '0 0 0 rgba(0,0,0,0.3)', }); + if (immediate) { + $('#zoomPopupWrapper').hide(); + $('body').removeClass('zoomPopup'); + } // 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(); + $(".zoomPopupClose").css('opacity', 0); $('body').removeClass('zoomPopup'); }, 500); - //z.attr('style', ''); - return false; } diff --git a/js/main.js b/js/main.js index bb962cae..b955e41d 100644 --- a/js/main.js +++ b/js/main.js @@ -123,11 +123,8 @@ try { DEVICE_READY = true; fb('device ready !'); - document.addEventListener("offline", onDeviceOffline, false); - var manifest; - var fsprefix = window.localStorage.getItem('galfsprefix'); PLATFORM = DATAS.phonegap; diff --git a/style/fluidbook.css b/style/fluidbook.css index 61fa2c40..38adde7e 100644 --- a/style/fluidbook.css +++ b/style/fluidbook.css @@ -1533,6 +1533,7 @@ body.zoomPopup #zoomPopupOverlay { transition: all 0.5s ease-in-out; transform-origin: 0 0; position: absolute; + cursor: pointer; z-index: 101; } #zoomPopupWrapper img { @@ -1542,15 +1543,18 @@ body.zoomPopup #zoomPopupOverlay { width: 100%; height: 100%; display: block; + z-index: 102; } -.zoomPopupClose { +#zoomPopupWrapper .zoomPopupClose { position: absolute; - top: 10px; - right: 10px; - width: 20px; - height: 20px; - background: url('../data/images/interface-close.svg') center no-repeat; - background-size: contain; + top: 0px; + right: 0px; + width: 30px; + height: 30px; + z-index: 103; + padding: 10px 10px 0 0; + opacity: 0; + transition: opacity 250ms; } @media handled and (orientation: portrait) { #ol { diff --git a/style/fluidbook.less b/style/fluidbook.less index dcf31436..9abfe1f4 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1793,6 +1793,7 @@ a.button { transition: all 0.5s ease-in-out; transform-origin: 0 0; position: absolute; + cursor: pointer; z-index: 101; img { @@ -1802,17 +1803,19 @@ a.button { width: 100%; height: 100%; display: block; + z-index: 102; + } + .zoomPopupClose { + position: absolute; + top: 0px; + right: 0px; + width: 30px; + height: 30px; + z-index: 103; + padding: 10px 10px 0 0; + opacity: 0; + transition: opacity 250ms; } -} - -.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) {