From 59281cb41f22ad6e413f99a430c61bfb7c978656 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Thu, 1 Jun 2017 16:05:11 +0200 Subject: [PATCH] wip #1388 @4 --- js/libs/fluidbook/fluidbook.bookmarks.js | 4 +-- js/libs/fluidbook/fluidbook.links.js | 21 +++++++++++---- js/libs/fluidbook/fluidbook.menu.js | 4 +++ js/libs/fluidbook/fluidbook.utils.js | 11 +++++++- js/main.js | 3 +-- style/fluidbook.less | 34 +++++++++++++++++++----- 6 files changed, 60 insertions(+), 17 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.bookmarks.js b/js/libs/fluidbook/fluidbook.bookmarks.js index 13753a4e..18b9fda7 100644 --- a/js/libs/fluidbook/fluidbook.bookmarks.js +++ b/js/libs/fluidbook/fluidbook.bookmarks.js @@ -442,11 +442,11 @@ FluidbookBookmarks.prototype = { index += ''; index += '
'; if (this.fluidbook.datas.friend) { - index += '' + this.fluidbook.l10n.__('send') + ''; + index += '' + this.fluidbook.l10n.__('send') + ''; } if (this.fluidbook.datas.print || this.fluidbook.datas.pdf) { - index += '' + this.fluidbook.l10n.__('download') + ''; + index += '' + this.fluidbook.l10n.__('download') + ''; } index += '
'; index += ''; diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index 0613a300..3374bcee 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -29,7 +29,7 @@ FluidbookLinks.prototype = { }); $(document).on('click touchend', '#zoomPopupOverlay, #zoomPopupWrapper', function (e) { - console.log('closing zoomPopup...'); + $this.zoomLinkReset(); }); @@ -109,15 +109,21 @@ FluidbookLinks.prototype = { $link = $(link), box = $link[0].getBoundingClientRect(), parent = $link.closest('.link'), - linkId = $(parent).attr('id').split('_', 2)[1], maxZoom = parseInt($link.data('maxzoom')) || 2, - zoomImage = 'data/links/zoom_' + linkId + '.jpg', x, y, zoomWidth, zoomHeight, zoomScale; + if ($(parent).length == 0) { + return; + } + + var linkId = $(parent).attr('id').split('_', 2)[1]; + var zoomImage = 'data/links/zoom_' + linkId + '.jpg'; + + // Calculate best scale factor to fit and also to honour the maxZoom level zoomScale = Math.min((availableWidth / box.width), (availableHeight / box.height), maxZoom); @@ -148,7 +154,7 @@ FluidbookLinks.prototype = { z.show(); var s = (zoomWidth / box.width); - $(".zoomPopupClose").css('opacity', 1).transform({scale: 1 / s, origin: ['100%', '0', 0]}); + $(".zoomPopupClose").css('opacity', 0).transform({scale: 1 / s, origin: ['100%', '0', 0]}); setTimeout(function () { z.css({ boxShadow: '0 0 100px rgba(0,0,0,0.3)', @@ -156,6 +162,10 @@ FluidbookLinks.prototype = { }); }, 50); + setTimeout(function () { + $(".zoomPopupClose").css('opacity', ''); + }, 500); + z.data('scale', zoomScale); // Show overlay $('body').addClass('zoomPopup'); @@ -172,6 +182,8 @@ FluidbookLinks.prototype = { var z = $('#zoomPopupWrapper'), scale = z.data('scale'); + $(".zoomPopupClose").css('opacity', '0'); + z.css({ transform: 'translate(0,0) scale(1)', boxShadow: '0 0 0 rgba(0,0,0,0.3)', @@ -186,7 +198,6 @@ FluidbookLinks.prototype = { // ToDo: see https://davidwalsh.name/css-animation-callback setTimeout(function () { $('#zoomPopupWrapper').hide(); - $(".zoomPopupClose").css('opacity', 0); $('body').removeClass('zoomPopup'); }, 500); diff --git a/js/libs/fluidbook/fluidbook.menu.js b/js/libs/fluidbook/fluidbook.menu.js index cd2d92be..85c099dd 100644 --- a/js/libs/fluidbook/fluidbook.menu.js +++ b/js/libs/fluidbook/fluidbook.menu.js @@ -382,6 +382,7 @@ FluidbookMenu.prototype = { } , closeView: function (callback, all, animate) { + blur(); $("#viewOverlay").hide(); var $this = this; if (all == undefined) { @@ -467,6 +468,9 @@ FluidbookMenu.prototype = { case 'bookmarks': var max = Math.floor((ww * 0.8) / 120) * 120 + 40; w = Math.min(max, Math.max(m.find('.doubleThumb').length, 4) * 120 + 40); + if (ww < 520) { + fullscreen = true; + } break; case 'webvideo': var w = Math.max(ww * 0.8, 600); diff --git a/js/libs/fluidbook/fluidbook.utils.js b/js/libs/fluidbook/fluidbook.utils.js index 252996f4..48b23016 100644 --- a/js/libs/fluidbook/fluidbook.utils.js +++ b/js/libs/fluidbook/fluidbook.utils.js @@ -54,10 +54,19 @@ function getSpriteIcon(icon, attrs) { attrs = {}; } if (attrs.viewBox == null) { - attrs.viewBox = $('svg symbol#'+icon).get(0).attributes.viewBox.value; + attrs.viewBox = $('svg symbol#' + icon).get(0).attributes.viewBox.value; } $.each(attrs, function (k, v) { a.push(k + '="' + v + '"'); }); return ''; +} + +function blur() { + if ($(":focus").length > 0) { + var tmp = document.createElement("input"); + document.body.appendChild(tmp); + tmp.focus(); + document.body.removeChild(tmp); + } } \ No newline at end of file diff --git a/js/main.js b/js/main.js index 88f80589..0d8dfe36 100644 --- a/js/main.js +++ b/js/main.js @@ -414,8 +414,7 @@ try { $(document).on('click', '.share', function () { var f = 'send' + ucfirst($(this).data('service')); fluidbook[f](); - fluidbook.menu.closeView(function () { - }, false); + $(this).closest('.mview').find('.back').click(); return false; }); diff --git a/style/fluidbook.less b/style/fluidbook.less index d1cd412a..ad183799 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -870,7 +870,7 @@ footer.hidden, header.hidden, #interface.hidden { } } - &[data-menu="video"] { + &[data-menu="webvideo"] { iframe { width: 100%; height: 100%; @@ -893,6 +893,19 @@ footer.hidden, header.hidden, #interface.hidden { } } + &.fs { + .fonctions { + padding: 0 @menu-padding @menu-padding @menu-padding; + a { + display: block; + margin: 0 0 10px 0; + &:last-child { + margin: 0; + } + } + } + } + &[data-chapters] { max-width: 320px; } @@ -1340,6 +1353,7 @@ ul.chapters.shareList a.level0 img { } /* Videos */ + .mview .videoContainer { width: 100%; height: 100%; @@ -1829,6 +1843,12 @@ a.button { cursor: pointer; z-index: 101; + &:hover { + .zoomPopupClose { + opacity: 1; + } + } + img { position: absolute; top: 0; @@ -1840,13 +1860,13 @@ a.button { } .zoomPopupClose { position: absolute; - top: 4px; - right: 4px; - width: 30px; - height: 30px; + top: 0px; + right: 0px; + width: 60px; + height: 60px; z-index: 103; - padding: 6px; - border-radius: 50%; + padding: 22px; + background-color: @menu-button-background; opacity: 0; transition: opacity 250ms; } -- 2.39.5