From: Vincent Vanwaelscappel Date: Thu, 14 Dec 2017 18:20:29 +0000 (+0100) Subject: wait #1710 @0:10 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e336d93ace24ee0c948329e27fea869b5cf2d1ab;p=fluidbook-html5.git wait #1710 @0:10 --- diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js index 107c1d60..4274d8cf 100644 --- a/js/libs/fluidbook/fluidbook.help.js +++ b/js/libs/fluidbook/fluidbook.help.js @@ -1,71 +1,71 @@ function FluidbookHelp(fluidbook) { - this.autoTimeout; - this.fluidbook = fluidbook; - this.view = $("#helpView"); - this.overlay = $("#helpViewOverlay"); - this.initEvents(); - this.interfaceTop; + this.autoTimeout; + this.fluidbook = fluidbook; + this.view = $("#helpView"); + this.overlay = $("#helpViewOverlay"); + this.initEvents(); + this.interfaceTop; } FluidbookHelp.prototype = { - init: function() { - var $this = this; - var help = ''; - - // Image centrale - var ext = ''; - if (this.fluidbook.support.SVG) { - ext = 'svg'; - } else { - ext = 'png'; - } - - var name = ''; - var width = 100; - var height = 200; - var text; - var zoom = 1; - if (this.fluidbook.support.isMobile) { - width = 400; - height = 200; - zoom = 2; - name = 'fingers'; - text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in"); - } else { - name = 'mouse'; - 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 + '.' + ext, width * zoom, height * zoom); - help += '

' + text + '

'; - help += '
'; - - - // Icons - help += '
'; + init: function () { + var $this = this; + var help = ''; + + // Image centrale + var ext = ''; + if (this.fluidbook.support.SVG) { + ext = 'svg'; + } else { + ext = 'png'; + } + + var name = ''; + var width = 100; + var height = 200; + var text; + var zoom = 1; + if (this.fluidbook.support.isMobile) { + width = 400; + height = 200; + zoom = 2; + name = 'fingers'; + text = this.fluidbook.l10n.__("tap twice or spread your fingers to zoom in"); + } else { + name = 'mouse'; + 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 + '.' + ext, width * zoom, height * zoom); + help += '

' + text + '

'; + help += '
'; + + + // Icons + help += '
'; var tooltipSelector = '#horizontalNav li > a[data-tooltip]:visible'; // When the menu position is inverted, the icon help lines need // to be drawn in the reverse order to avoid text/line overlaps var tooltips = this.fluidbook.datas.invertMenuPosition ? $(tooltipSelector).get().reverse() : $(tooltipSelector); - var navScale = this.fluidbook.resize.navScale; + var navScale = this.fluidbook.resize.navScale; 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'); - if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) { - return; - } - - var icon = $(this).find('.nav-icon:visible:first'); // Must get first visible icon so "toggle" icons work - if (icon.length > 0) { + 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'); + if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) { + return; + } + + var icon = $(this).find('.nav-icon:visible:first'); // Must get first visible icon so "toggle" icons work + if (icon.length > 0) { var offset = icon.offset(), - iconWidth = icon.outerWidth() * navScale, - left; + iconWidth = icon.outerWidth() * navScale, + left; if ($this.fluidbook.l10n.dir == 'ltr') { left = offset.left + (iconWidth / 2); @@ -74,7 +74,7 @@ FluidbookHelp.prototype = { } // Since the outer container has been scaled, we need to factor that in - // for the left position so the lines still meet with the icons + // for the left position so the lines still meet with the icons left = left / navScale; var c = 'nav'; @@ -84,195 +84,198 @@ FluidbookHelp.prototype = { help += '
' + text + '
'; h -= hStep; } - }); - - help += '
'; - - // Interface - - var next = this.fluidbook.l10n.__('next double page'); - var previous = this.fluidbook.l10n.__('previous double page'); - if (this.fluidbook.pad.enabled) { - next = this.fluidbook.l10n.__('next chapter'); - previous = this.fluidbook.l10n.__('previous chapter'); - } - - help += '
'; - help += ''; - help += '
' + this.fluidbook.l10n.__('last page') + '
'; - help += ''; - help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; - help += '
' + this.fluidbook.l10n.__('drag handle to switch page') + '
'; - help += this.bookmarkLabel(); - help += '
'; - - if (this.fluidbook.pad.enabled) { - help += '
' + this.fluidbook.l10n.__('read more') + '
'; - } - - this.view.html(help); - //resize(); - }, - initEvents: function() { - var $this = this; - - $(document).on('click', '.icon-help', function(e) { - $this.show(); - if (fluidbook.nav.menuIsOpen) { - fluidbook.nav.menuAPI.close(); - } - e.preventDefault(); - }); - - // Click handler on main helpView div to hide it - $this.overlay.click(function(e) { + }); + + help += '
'; + + // Interface + + var next = this.fluidbook.l10n.__('next double page'); + var previous = this.fluidbook.l10n.__('previous double page'); + if (this.fluidbook.pad.enabled) { + next = this.fluidbook.l10n.__('next chapter'); + previous = this.fluidbook.l10n.__('previous chapter'); + } + + help += '
'; + help += ''; + help += '
' + this.fluidbook.l10n.__('last page') + '
'; + help += ''; + help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; + help += '
' + this.fluidbook.l10n.__('drag handle to switch page') + '
'; + help += this.bookmarkLabel(); + help += '
'; + + if (this.fluidbook.pad.enabled) { + help += '
' + this.fluidbook.l10n.__('read more') + '
'; + } + + this.view.html(help); + //resize(); + }, + initEvents: function () { + var $this = this; + + $(document).on('click', '.icon-help', function (e) { + $this.show(); + if (fluidbook.nav.menuIsOpen) { + fluidbook.nav.menuAPI.close(); + } + e.preventDefault(); + }); + + // Click handler on main helpView div to hide it + $this.overlay.click(function (e) { e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault(); $this.hide(); return false; - }); - }, - isVisible: function() { - return this.view.is(":visible"); - }, - show: function(time) { - this.clearTimeout(); - if (time == undefined) { - time = 0; - } - - if (this.isVisible()) { - return false; - } - - var $this = this; - - this.init(); // Re-run init because layout and options might have changed since last run - resize(); + }); + }, + isVisible: function () { + return this.view.is(":visible"); + }, + show: function (time) { + this.clearTimeout(); + if (time == undefined) { + time = 0; + } + + this.fluidbook.interface.displayInterface(); + + if (this.isVisible()) { + return false; + } + + 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.show(); - $("body,#previous,#next").addClass('help'); - this.fluidbook.showAllButtons(); + $("body,#previous,#next").addClass('help'); + this.fluidbook.showAllButtons(); if (time != 0) { - this.autoTimeout = setTimeout(function() { + this.autoTimeout = setTimeout(function () { $this.hide(); }, time * 1000); } - return false; - }, - hide: function() { - this.clearTimeout(); - var $this = this; - if (this.isVisible()) { - this.overlay.hide(); - this.view.hide(); - $("body,#previous,#next").removeClass('help'); - this.fluidbook.hideUnnecessaryButtons(); - if (this.fluidbook.support.isMobile) { - $("*").unbind('click', function() { - $this.hide(); - }); - } - } - return false; - }, - toggle: function() { - if (this.isVisible()) { - this.hide(); - } else { - this.show(); - } - }, - resize: function(ww, hh, interfaceScale, navScale) { - - // Repopulate and reposition help overlay elements. + return false; + }, + hide: function () { + this.clearTimeout(); + this.fluidbook.interface.checkHidden(); + var $this = this; + if (this.isVisible()) { + this.overlay.hide(); + this.view.hide(); + $("body,#previous,#next").removeClass('help'); + this.fluidbook.hideUnnecessaryButtons(); + if (this.fluidbook.support.isMobile) { + $("*").unbind('click', function () { + $this.hide(); + }); + } + } + return false; + }, + toggle: function () { + if (this.isVisible()) { + this.hide(); + } else { + this.show(); + } + }, + resize: function (ww, hh, interfaceScale, navScale) { + + // 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(); + this.init(); - // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly... + // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly... - var $this = this, - dir = this.fluidbook.l10n.dir, - menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale, - arrow = $('#interface #next').get(0).getBoundingClientRect(), // Used for calculating offsets for both #next & #previous - nextTop, - firstTop; + var $this = this, + dir = this.fluidbook.l10n.dir, + menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale, + arrow = $('#interface #next').get(0).getBoundingClientRect(), // Used for calculating offsets for both #next & #previous + nextTop, + firstTop; - // The arrow element contains both arrows in a single image - // so we calculate the top position of the labels by percentage - nextTop = Math.round(arrow.top + arrow.height * 0.35); - firstTop = Math.round(arrow.top + arrow.height * 0.71); + // The arrow element contains both arrows in a single image + // so we calculate the top position of the labels by percentage + nextTop = Math.round(arrow.top + arrow.height * 0.35); + firstTop = Math.round(arrow.top + arrow.height * 0.71); // Navigation arrow labels - this.view.find('.previous, .next').css({ - top: nextTop - }); - this.view.find('.first, .last').css({ - top: firstTop - }); + this.view.find('.previous, .next').css({ + top: nextTop + }); + this.view.find('.first, .last').css({ + top: firstTop + }); - // Labels are swapped for RTL documents - var prevPosition = (dir == 'ltr') ? {left: Math.round(arrow.width)} : {right: Math.round(arrow.width)}, - nextPosition = (dir == 'ltr') ? {right: Math.round(arrow.width)} : {left: Math.round(arrow.width)}; + // Labels are swapped for RTL documents + var prevPosition = (dir == 'ltr') ? {left: Math.round(arrow.width)} : {right: Math.round(arrow.width)}, + nextPosition = (dir == 'ltr') ? {right: Math.round(arrow.width)} : {left: Math.round(arrow.width)}; - this.view.find('.previous, .first').css(prevPosition); - this.view.find('.next, .last').css(nextPosition); + this.view.find('.previous, .first').css(prevPosition); + this.view.find('.next, .last').css(nextPosition); - // Slider label + // Slider label var positionSliderLabel = function () { var sliderHelp = $this.view.find('.slider'); var sliderCursor = $('#slidercursor .visible'); sliderHelp.css({ bottom: Math.round(hh - sliderCursor.offset().top), left: Math.round(sliderCursor.offset().left + (sliderCursor.width() / 2)), - transformOrigin: 'left bottom' + transformOrigin: 'left bottom' }); }; positionSliderLabel(); // Run immediately - setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct - - this.view.find('#icons').css({ - top: menuHeightScaled, - transform: 'scale('+ navScale +')' - }); - - $("#helpView #icons").css({ - fontSize: (14 / navScale) * interfaceScale - }); - - this.view.find('.illustration').css({ - transform: 'translate(-50%, -50%) scale('+ interfaceScale +')' - }); - - $("#helpView .interface").find('> div').transform({ - scale: [interfaceScale, interfaceScale] - }) - - }, - clearTimeout: function() { - clearTimeout(this.autoTimeout); - }, - displayAtStartup: function() { - if (this.fluidbook.datas.helpStartup) { - this.show(parseInt(this.fluidbook.datas.helpStartupTime)); - if (this.fluidbook.pad.enabled) { - this.fluidbook.pad.displayInterface(); - } - } else { - this.fluidbook.hideUnnecessaryButtons(); - } - }, - - bookmarkLabel: function() { - - // The bookmark help element is a bit complex because it must be placed in a section of the help overlay that is + setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct + + this.view.find('#icons').css({ + top: menuHeightScaled, + transform: 'scale(' + navScale + ')' + }); + + $("#helpView #icons").css({ + fontSize: (14 / navScale) * interfaceScale + }); + + this.view.find('.illustration').css({ + transform: 'translate(-50%, -50%) scale(' + interfaceScale + ')' + }); + + $("#helpView .interface").find('> div').transform({ + scale: [interfaceScale, interfaceScale] + }) + + }, + clearTimeout: function () { + clearTimeout(this.autoTimeout); + }, + displayAtStartup: function () { + if (this.fluidbook.datas.helpStartup) { + this.show(parseInt(this.fluidbook.datas.helpStartupTime)); + if (this.fluidbook.pad.enabled) { + this.fluidbook.pad.displayInterface(); + } + } else { + this.fluidbook.hideUnnecessaryButtons(); + } + }, + + bookmarkLabel: function () { + + // 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... @@ -303,10 +306,10 @@ FluidbookHelp.prototype = { var icon = $('
').css({ width: Math.round(box.width), height: Math.round(box.height), - margin: Math.round(circleOffset), // Centre inside circle - backgroundSize: 'contain', - backgroundPosition: 'center', - backgroundRepeat: 'no-repeat', + margin: Math.round(circleOffset), // Centre inside circle + backgroundSize: 'contain', + backgroundPosition: 'center', + backgroundRepeat: 'no-repeat', backgroundImage: baseElement.css('backgroundImage').replace('off.svg', 'on.svg') // Show the "on" state if not already set })[0].outerHTML; @@ -326,39 +329,39 @@ FluidbookHelp.prototype = { })[0].outerHTML; // Help text label - html += $('
'+ this.fluidbook.l10n.__('add / remove bookmark') +'
').css({ + 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 + 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 = { + 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', + transformOrigin: 'left top', flexDirection: 'row' // Flexbox direction controls order of elements (icon, line, label) - }; - } else { - wrapperLayout = { + }; + } else { + wrapperLayout = { right: Math.round(this.fluidbook.resize.ww - box.left - box.width - circleOffset), - transformOrigin: 'right top', + 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 + .css( + $.extend(wrapperCSS, wrapperLayout) // Merge all properties + )[0].outerHTML return wrapper; } diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js index 8833ab36..0e59ab2e 100644 --- a/js/libs/fluidbook/fluidbook.interface.js +++ b/js/libs/fluidbook/fluidbook.interface.js @@ -46,10 +46,7 @@ FluidbookInterface.prototype = { }, autoHideArrows: function () { - if (!this.fluidbook.resize.reduceHorizontalMargins() || !this.areArrowsOverlapingPublication()) { - return false; - } - return true; + return this.fluidbook.resize.reduceHorizontalMargins() && this.areArrowsOverlapingPublication() && $("#helpView:visible").length == 0; }, initArrowsVisibilityManagement: function () { diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 8c1d2ea9..204db722 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -20,7 +20,7 @@ function FluidbookResize(fluidbook) { FluidbookResize.prototype = { reduceHorizontalMargins: function () { - return this.orientation == 'portrait' && this.fluidbook.support.isMobile && Modernizr.touch; + return this.orientation == 'portrait' && Modernizr.ftouch; }, setMargins: function () { diff --git a/js/main.js b/js/main.js index f3a18c39..dc090bd0 100644 --- a/js/main.js +++ b/js/main.js @@ -425,6 +425,7 @@ function goNextPage(e) { return; } + fluidbook.interface.resetTimeout(); var y = e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY; if (y < 65) { if (fluidbook.pad.enabled) {