From: Vincent Vanwaelscappel Date: Wed, 18 Sep 2019 16:38:38 +0000 (+0200) Subject: fix #3057 @10 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c21d9fad6c5ec0fcea36bec9cdd65514cf51ef48;p=fluidbook-html5.git fix #3057 @10 --- diff --git a/images/help/help-touch-scroll.svg b/images/help/help-touch-scroll.svg index 73c4cece..8e6e3125 100644 --- a/images/help/help-touch-scroll.svg +++ b/images/help/help-touch-scroll.svg @@ -1,24 +1,21 @@ - + - - - - - + + + + + - \ No newline at end of file + diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js index 105a5ccd..a763211f 100644 --- a/js/libs/fluidbook/fluidbook.help.js +++ b/js/libs/fluidbook/fluidbook.help.js @@ -5,41 +5,63 @@ function FluidbookHelp(fluidbook) { this.overlay = $("#helpViewOverlay"); this.initEvents(); this.interfaceTop; + this.ww = 0; + this.ns = 0; + this.ignoreResize = false; } FluidbookHelp.prototype = { - init: function () { + init: function (force) { + if (force === undefined) { + force = false; + } + var ww = this.fluidbook.resize.ww; + + var skip = true; + if (this.view.html() === '') { + skip = false; + } + if (this.ww !== ww && this.fluidbook.l10n.rtl) { + skip = false; + } + if (this.ns !== this.fluidbook.resize.navScale) { + skip = false; + } + if (force) { + skip = false; + } + + this.ww = ww; + this.ns = this.fluidbook.resize.navScale; + + if (skip) { + return; + } + var $this = this; var help = ''; // Image centrale var ext = 'svg'; - var width = 400; - var height = 200; - var zoom = 2; - + var touchzoom = 2; + var mousezoom = 1; + help = '
'; if (this.fluidbook.mobilefirst.enabled) { var name = 'fingers'; var text = this.fluidbook.l10n.__("scroll down to read the page content"); - help += '
' + this.fluidbook.loader.getImage('images/help/help-touch-scroll.svg', width * zoom, height * zoom); + help += '
' + this.fluidbook.loader.getImage('images/help/help-touch-scroll.svg', 300 * touchzoom, 200 * touchzoom); help += '

' + text + '

'; help += '
'; - - } else { var name = 'fingers'; var text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in"); - help += '
' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom); + help += '
' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', 400 * touchzoom, 200 * touchzoom); help += '

' + text + '

'; help += '
'; } - - var width = 100; - var height = 200; - var zoom = 1; name = 'mouse'; if (this.fluidbook.mobilefirst.enabled) { text = this.fluidbook.l10n.__('scroll down to read the page content'); @@ -47,10 +69,16 @@ FluidbookHelp.prototype = { text = this.fluidbook.l10n.__('click once to zoom in, click again to zoom out') + '
' + this.fluidbook.l10n.__('roll the mouse wheel to zoom in/out'); } - help += '
' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', width * zoom, height * zoom); + help += '
' + this.fluidbook.loader.getImage('data/images/help-' + name + '.svg', 100 * mousezoom, 200 * mousezoom); help += '

' + text + '

'; help += '
'; + if (this.fluidbook.mobilefirst.enabled) { + help += '
' + this.fluidbook.loader.getImage('images/help/help-touch-swipe.svg', 300 * touchzoom, 200 * touchzoom); + help += '

' + this.fluidbook.l10n.__('swipe to change the page') + '

'; + help += '
'; + } + help += '
'; // Icons help += '
'; @@ -64,7 +92,6 @@ FluidbookHelp.prototype = { var initialHeight = 20 * navScale; // Buffer in line height away from icons var hStep = 25 * navScale; // The step height - the difference in height between the icon label lines var h = initialHeight + ($(tooltipSelector).length - 1) * hStep; - var ww = $(window).width(); $(tooltips).each(function () { var text = $(this).data('tooltip'); @@ -115,10 +142,12 @@ FluidbookHelp.prototype = { help += '
'; if (this.fluidbook.interface.arrowsEnabled()) { + help += '
'; help += ''; help += '
' + this.fluidbook.l10n.__('last page') + '
'; help += ''; help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; + help += '
'; } if ($("#slider").length > 0) { help += '
' + this.fluidbook.l10n.__('drag handle to switch page') + '
'; @@ -131,7 +160,6 @@ FluidbookHelp.prototype = { } this.view.html(help); - //resize(); }, initEvents: function () { var $this = this; @@ -153,13 +181,19 @@ FluidbookHelp.prototype = { $this.hide(); return false; }); + + $(this.fluidbook).on('fluidbook.resize', function () { + if (!$this.ignoreResize) { + $this.hide(); + } + }) }, isVisible: function () { return this.view.is(":visible"); }, show: function (time) { this.clearTimeout(); - if (time == undefined) { + if (time === undefined) { time = 0; } @@ -171,20 +205,31 @@ FluidbookHelp.prototype = { var $this = this; - this.init(); // Re-run init because layout and options might have changed since last run - resize(); this.overlay.show(); - this.view.show(); + this.view.css('opacity',0).show(); + this.view.find('.interface').show(); - $("body,#previous,#next").addClass('help'); - this.fluidbook.showAllButtons(); + $("#help-illustrations").css('opacity', '0'); - if (time != 0) { + if (time !== 0) { this.autoTimeout = setTimeout(function () { $this.hide(); }, time * 1000); } + this.init(true); + + setTimeout(function () { + $this.resize(); + $("body,#previous,#next").addClass('help'); + this.fluidbook.showAllButtons(); + $this.view.css('opacity',1); + }, 50); + setTimeout(function () { + $this.resize(); + $("#help-illustrations").css('opacity', '1'); + }, 100); + return false; }, hide: function () { @@ -211,14 +256,19 @@ FluidbookHelp.prototype = { this.show(); } }, - resize: function (ww, hh, interfaceScale, navScale) { + resize: function () { + + this.view.find('#help-illustrations').css({ + transform: '' + }); + + var hh = this.fluidbook.resize.hh; + var navScale = this.fluidbook.resize.navScale; + var interfaceScale = this.fluidbook.resize.interfaceScale; // Repopulate and reposition help overlay elements. // Mostly important for the RTL languages where icon label position must be recalculated/ - // ToDo: Replace this sledgehammer approach with something more elegant - this.init(); - - // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly... + this.init(false); var $this = this; var dir = this.fluidbook.l10n.dir; @@ -226,7 +276,6 @@ FluidbookHelp.prototype = { var nextTop; var firstTop; - if (this.fluidbook.interface.arrowsEnabled()) { var arrow = $('#interface #next').get(0).getBoundingClientRect(); // Used for calculating offsets for both #next & #previous // The arrow element contains both arrows in a single image @@ -251,6 +300,47 @@ FluidbookHelp.prototype = { this.view.find('.next, .last').css(nextPosition); } + if (this.fluidbook.bookmarks.enabled) { + var inverted = this.fluidbook.datas.invertMenuPosition; + var side = ((this.fluidbook.l10n.dir === 'ltr' && inverted) || (this.fluidbook.l10n.dir === 'rtl' && !inverted)) ? 'left' : 'right'; + if (this.fluidbook.mobilefirst.enabled) { + side = 'right'; + } + var baseElement = $('#links .bookmark.' + side + ':visible'); + if (baseElement.length > 0) { + // Get the offset and dimensions of the element, taking into account the scaling + var box = baseElement[0].getBoundingClientRect(); + var circleExtra = 25 * this.fluidbook.resize.interfaceScale; // How much bigger the circle should be around the bookmark icon + + // The bookmark icon sits inside a circle that is slightly bigger so in order to make the icon sit exactly + // on the corner of the page, we must offset the difference added by the larger wrapping circle. + var circleOffset = circleExtra / 2; + + $(".bookmark-help .bookmark").css({ + width: Math.round(box.width), + height: Math.round(box.height), + margin: Math.round(circleOffset), // Centre inside circle + }); + + $(".bookmark-help .bookmark-help-icon").css({ + width: Math.round(box.width + circleExtra), + height: Math.round(box.height + circleExtra) + }); + + var css = {top: Math.round(box.top - circleOffset)}; + if (side === 'left') { + css.transformOrigin = 'left top'; + css.flexDirection = 'row'; + css.left = Math.round(box.left - circleOffset); + } else { + css.right = Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset); + css.transformOrigin = 'right top'; + css.flexDirection = 'row-reverse'; // Reverse order of elements for right hand page + } + $(".bookmark-help").css(css); + } + } + // Slider label if ($("#slider").length > 0) { var positionSliderLabel = function () { @@ -271,18 +361,25 @@ FluidbookHelp.prototype = { transform: 'scale(' + navScale + ')' }); + var s = Math.max(0.9, Math.min(1.5, interfaceScale)); + $("#helpView #icons").css({ - fontSize: (14 / navScale) * interfaceScale + fontSize: (14 / navScale) * s }); - this.view.find('.illustration').css({ - transform: 'translate(-50%, -50%) scale(' + interfaceScale + ')' + var is = Math.min(s, (hh * 0.7) / $("#help-illustrations").outerHeight()); + + this.view.find('#help-illustrations').css({ + transform: 'translate(-50%, 0) scale(' + is + ')' }); $("#helpView .interface").find('> div').transform({ - scale: [interfaceScale, interfaceScale] + scale: [s, s] }) + var top = (hh - $("#help-illustrations").outerHeight()) / 2; + $("#help-illustrations").css('top', top); + }, clearTimeout: function () { clearTimeout(this.autoTimeout); @@ -290,105 +387,68 @@ FluidbookHelp.prototype = { displayAtStartup: function () { if (this.fluidbook.datas.helpStartup) { - this.show(parseInt(this.fluidbook.datas.helpStartupTime)); + var $this = this; + var time = parseInt(this.fluidbook.datas.helpStartupTime); + this.ignoreResize = true; + setTimeout(function () { + $this.ignoreResize = false; + }, (time+1) * 1000); + this.show(time); if (this.fluidbook.pad.enabled) { this.fluidbook.pad.displayInterface(); } } else { this.fluidbook.hideUnnecessaryButtons(); } - }, + } + , bookmarkLabel: function () { + if (!this.fluidbook.bookmarks.enabled) { + return; + } // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is // not already used by the icon labels. Since the menu can be either on the left or right, this needs to be taken // into account. On the first and last pages of the Fluidbook we don't have a left or right page so it might not // be possible to always display the bookmark icon in this case... - var dir = this.fluidbook.l10n.dir, - inverted = this.fluidbook.datas.invertMenuPosition, - side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'left' : 'right', - baseElement = $('#links .bookmark.' + side), // Original element used to provide position and sizing for overlay - html = ''; + var dir = this.fluidbook.l10n.dir; + var inverted = this.fluidbook.datas.invertMenuPosition; + var side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'left' : 'right'; + if (this.fluidbook.mobilefirst.enabled) { + side = 'right'; + } + var baseElement = $('#links .bookmark.' + side); // Original element used to provide position and sizing for overlay + var html = ''; // If bookmark icon isn't present on the side we want, it means that we're on // the first/last page and that side is missing so we can't display the help if (baseElement.length === 0) { + console.log('nobookmark', side, baseElement); return ''; } - // Get the offset and dimensions of the element, taking into account the scaling - var box = baseElement[0].getBoundingClientRect(), - circleExtra = 20 * this.fluidbook.resize.interfaceScale, // How much bigger the circle should be around the bookmark icon - lineLength = 30; // Length of the line to the label text - - // The bookmark icon sits inside a circle that is slightly bigger so in order to make the icon sit exactly - // on the corner of the page, we must offset the difference added by the larger wrapping circle. - var circleOffset = circleExtra / 2; // Build a HTML string via jQuery with all the styling // Bookmark icon: - var iconHolder = $('
').css({ - width: Math.round(box.width), - height: Math.round(box.height), - margin: Math.round(circleOffset), // Centre inside circle - }); + var iconHolder = $('
'); iconHolder.html(getSpriteIcon('bookmark-corner')); var icon = $(iconHolder).get(0).outerHTML; // Circle around the icon - slightly bigger - html += $('
' + icon + '
').css({ - width: Math.round(box.width + circleExtra), - height: Math.round(box.height + circleExtra), - borderRadius: '50%', - border: '1px solid' - })[0].outerHTML; + html += $('
' + icon + '
')[0].outerHTML; // Line to text - html += $('
').css({ - width: lineLength, - height: 0, - borderBottom: '1px solid', - })[0].outerHTML; + html += $('
')[0].outerHTML; // Help text label - html += $('
' + this.fluidbook.l10n.__('add / remove bookmark') + '
').css({ - whiteSpace: 'nowrap', - padding: '0 0.5em' // Ensure spacing around text regardless which side the line is on - })[0].outerHTML; - - - // Wrapper with positioning and layout switched depending on the side - var wrapperCSS = { // Shared properties - display: 'flex', - alignItems: 'center', - position: 'absolute', - top: Math.round(box.top - circleOffset) - }, - wrapperLayout; - - if (side === 'left') { - wrapperLayout = { - left: Math.round(box.left - circleOffset), - transformOrigin: 'left top', - flexDirection: 'row' // Flexbox direction controls order of elements (icon, line, label) - }; - } else { - wrapperLayout = { - right: Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset), - transformOrigin: 'right top', - flexDirection: 'row-reverse' // Reverse order of elements for right hand page - } - } - - var wrapper = $('
' + html + '
') - .css( - $.extend(wrapperCSS, wrapperLayout) // Merge all properties - )[0].outerHTML + html += $('
' + this.fluidbook.l10n.__('add / remove bookmark') + '
')[0].outerHTML; + var wrapper = $('
' + html + '
')[0].outerHTML return wrapper; } -}; +} +; diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index d76ea253..7c42272f 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -270,8 +270,8 @@ Fluidbook.prototype = { if (!this.mobilefirst.enabled) { this.slider = new FluidbookSlider(this); } + this.help = new FluidbookHelp(this); - this.help.displayAtStartup(); // Trigger a resize resize(); @@ -282,6 +282,11 @@ Fluidbook.prototype = { // Initial address handling this.changeAddress(); + + var $this = this; + setTimeout(function () { + $this.help.displayAtStartup(); + }, 1500); }, loadPlugins: function () { @@ -501,14 +506,12 @@ Fluidbook.prototype = { }); } return; - } - , + }, reloadCurrentPage: function () { this.pageTransition(this.currentPage); - } - , + }, readingPage: function (side) { if (!this.displayOnePage) { @@ -631,12 +634,12 @@ Fluidbook.prototype = { } return $(pageSide).data('page'); }, - getPageNumberOfSide: function (side,strict) { + getPageNumberOfSide: function (side, strict) { if (undefined === strict) { strict = false; } - var physical = this.getPhysicalPageNumberOfSide(side,strict); + var physical = this.getPhysicalPageNumberOfSide(side, strict); if (!physical || physical === 1) { return ''; } diff --git a/style/help.less b/style/help.less index 9faafe3c..f5309428 100644 --- a/style/help.less +++ b/style/help.less @@ -20,36 +20,67 @@ display: none; color: #ffffff; overflow: hidden; + transition: opacity 150ms; + opacity: 0; - .illustration { - .no-using-touch &.touch { - display: none; + .bookmark-help { + display: flex; + align-items: center; + position: absolute; + + .bookmark-help-icon { + border: 1px solid #fff; + border-radius: 50% 50%; } - .no-using-mouse &.mouse { - display: none; + .bookmark-help-label { + width: 50%; + text-align: right; + padding: 0 0.5em; } + .bookmark-help-line { + width: 30px; + height: 0; + border-bottom: 1px solid #fff; + } + } + + #help-illustrations { position: absolute; - top: 50%; + top: 0; left: 50%; - //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done text-align: center; font-size: 20px; + transition: opacity 150ms; + opacity: 0; - img { - max-width: 100%; - height: auto; - } + .illustration { + margin: 100px 0; - p { - position: static; - } + .no-using-touch &.touch { + display: none; + } - &.touch { - top: 25%; - } + .no-using-mouse &.mouse { + display: none; + } + + //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done + + img { + max-width: 100%; + height: auto; + } + p { + position: static; + } + + &.touch { + top: 25%; + } + } } #icons { @@ -180,17 +211,19 @@ top: -0.5em; color: transparent; } - -#helpView .interface > div { +#helpView .interface > div.help-arrows{ + position: static; +} +#helpView .interface > div, #helpView .help-arrows > div { position: absolute; direction: ltr; } -.portrait #helpView .interface { +.portrait #helpView .help-arrows { display: none; } -.pad.portrait #helpView .interface { +.pad.portrait #helpView .help-arrows { display: block; }