From: Vincent Vanwaelscappel Date: Thu, 14 Dec 2017 16:38:45 +0000 (+0100) Subject: fix #1710 @6 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=58b1a87421915ffd73e64576f8b6a0f6af26ad26;p=fluidbook-html5.git fix #1710 @6 --- diff --git a/js/libs/fluidbook/fluidbook.interface.js b/js/libs/fluidbook/fluidbook.interface.js index 6ec053c9..fc46c8a6 100644 --- a/js/libs/fluidbook/fluidbook.interface.js +++ b/js/libs/fluidbook/fluidbook.interface.js @@ -36,9 +36,21 @@ FluidbookInterface.prototype = { initArrowsVisibilityManagement: function () { var $this = this; - $(document).on('click', '.nonlinkarea', function () { + + this.getInterfaceSelector().addClass('interfacecomponent'); + + $('#z').on('click', '.nonlinkarea', function () { $this.toggleInterface(); - return false; + return true; + }); + + $(document).on('click', ':not(a)', function () { + var selector = '#background,header,footer'; + if (!$(this).is(selector) && $(this).closest(selector).length == 0) { + return true; + } + $this.toggleInterface(); + return true; }); $(this.fluidbook).on('fluidbook.ready', function () { @@ -47,6 +59,7 @@ FluidbookInterface.prototype = { }, toggleInterface: function () { + console.log('toogle interface; current : ' + this.interfaceVisible); if (this.interfaceVisible) { return this.hideInterface(); } else { @@ -55,7 +68,7 @@ FluidbookInterface.prototype = { }, displayInterface: function () { this.interfaceVisible = true; - this.getInterfaceSelector().addClass('visible'); + this.getInterfaceSelector().removeClass('interfacehidden'); this.resetTimeout(); }, resetTimeout: function () { @@ -76,7 +89,7 @@ FluidbookInterface.prototype = { return; } - this.getInterfaceSelector().css({opacity: 0}).delay(1100).css('visibility', 'hidden'); + this.getInterfaceSelector().addClass('interfacehidden'); this.clearTimeout(); }, diff --git a/js/libs/fluidbook/fluidbook.links.js b/js/libs/fluidbook/fluidbook.links.js index a19ac440..5ac75308 100644 --- a/js/libs/fluidbook/fluidbook.links.js +++ b/js/libs/fluidbook/fluidbook.links.js @@ -74,7 +74,7 @@ FluidbookLinks.prototype = { $(document).on('click touchend', '[data-action]', function () { var map = {'pdf': 'print', 'fullScreen': "fullscreen", 'locales': 'localesContainers'}; var action = $(this).data('action'); - if(action=='share'){ + if (action == 'share') { // Let share class handle this return true; } @@ -114,7 +114,7 @@ FluidbookLinks.prototype = { $("#links").find('.rightContainer').append($("#links").children('.link.odd')); $("#links").find('.leftContainer').append($("#links").children('.link')); - $("#links").prepend(''); + $("#links").prepend('
'); var $this = this; if (this.fluidbook.datas.linkBlinkTime > 0 && this.fluidbook.datas.mobileLinksRevealAnim) { setTimeout(function () { diff --git a/js/libs/fluidbook/fluidbook.loader.js b/js/libs/fluidbook/fluidbook.loader.js index 465b901b..4c0039a1 100644 --- a/js/libs/fluidbook/fluidbook.loader.js +++ b/js/libs/fluidbook/fluidbook.loader.js @@ -82,7 +82,7 @@ FluidbookLoader.prototype = { } var min = Math.max(1, page - 1); var max = Math.min(min + this.numPreload, this.fluidbook.datas.pages); - min = max - (this.numPreload); + min = Math.max(1, max - (this.numPreload)); this.toPreload = []; for (var i = min; i <= max; i++) { this.toPreload.push(i); @@ -265,7 +265,6 @@ FluidbookLoader.prototype = { div = $('
'); } - left = ((page % 2 == 0) && this.fluidbook.l10n.ltr) || ((page % 2 == 1) && this.fluidbook.l10n.rtl); var h = this.fluidbook.datas.thumbHeight; diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 64bc12ec..7026d9e1 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';//&& this.fluidbook.support.isMobile /*&& Modernizr.touch*/; }, setMargins: function () { @@ -35,7 +35,6 @@ FluidbookResize.prototype = { this.margintop = marginY + parseInt(this.fluidbook.datas.extraYSpace); this.marginbottom = marginY + 20; this.marginright = marginX + parseInt(this.fluidbook.datas.extraXSpace); - }, init: function () { @@ -85,7 +84,7 @@ FluidbookResize.prototype = { var nminwidth = ($("#nav a").length * 51) + 205 + 50; var refWidth = Math.max(this.referenceWidthPortrait, nminwidth); - interfaceScale = Math.min(1, this.ww / refWidth, this.hh / this.referenceHeight); + interfaceScale = Math.min(1, this.ww / refWidth * 0.7, this.hh / this.referenceHeight * 0.7); } this.interfaceScale = interfaceScale; diff --git a/style/fluidbook.less b/style/fluidbook.less index 8b8b1ecd..77a244b4 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -644,81 +644,7 @@ body, html { display: none; } -/* Interface */ -#interface { - position: static; -} - -#next, #previous { - width: 53px; - height: 107px; - background-size: 53px 107px; - position: absolute; - top: 310px; - display: block; - opacity: 1; - z-index: 21; - color: @arrows-color; - background-color: @arrows-background; -} - -#next, #previous, #down, #splash { - transition: opacity 400ms ease-in-out; - -moz-transition: opacity 400ms ease-in-out; - -webkit-transition: opacity 400ms ease-in-out; - -o-transition: opacity 400ms ease-in-out; - -ms-transition: opacity 400ms ease-in-out; -} - -#next.hidden.help, #previous.hidden.help { - transition: none; - -moz-transition: none; - -webkit-transition: none; - -o-transition: none; - -ms-transition: none; - opacity: 1; -} - -#next.hidden, #previous.hidden { - opacity: 0; - cursor: default; -} - -.rtl #previous, .ltr #next { - border-top-left-radius: 1px; - border-bottom-left-radius: 1px; - right: 0px; - transform-origin: 100% 0; -} - -.rtl #next, .ltr #previous { - border-top-right-radius: 1px; - border-bottom-right-radius: 1px; - left: 0px; - transform-origin: 0 0; -} - -.audio-description-button { - background-image: url("../data/images/interface-audio-description-on.svg"); - width: 52px; - height: 52px; - background-size: 52px 52px; - display: inline-block; - border: 0; - outline: none; - position: absolute; - cursor: pointer; - transform-origin: 0% 0; - - &.right { - right: 0; - transform-origin: 100% 0; - } - - &.playing { - background-image: url("../data/images/interface-audio-description-off.svg"); - } -} +@import "interface"; /* Header */ header { @@ -995,21 +921,18 @@ html.ios body.portrait #interface { } } -#links .nonlinkarea { - display: none; -} - #links .bookmark { z-index: 3; } -.pad #links .nonlinkarea { +#links .nonlinkarea { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; display: block; + cursor: zoom-in; } /* Bookmarks */ diff --git a/style/interface.less b/style/interface.less new file mode 100644 index 00000000..2c204300 --- /dev/null +++ b/style/interface.less @@ -0,0 +1,88 @@ +@import "00-import"; + +/* Interface */ +#interface { + position: static; +} + +#next, #previous { + width: 53px; + height: 107px; + background-size: 53px 107px; + position: absolute; + top: 310px; + display: block; + opacity: 1; + z-index: 21; + color: @arrows-color; + background-color: @arrows-background; +} + +#next, #previous, #down, #splash { + transition: opacity 400ms ease-in-out; + -moz-transition: opacity 400ms ease-in-out; + -webkit-transition: opacity 400ms ease-in-out; + -o-transition: opacity 400ms ease-in-out; + -ms-transition: opacity 400ms ease-in-out; +} + +#next.hidden.help, #previous.hidden.help { + transition: none; + -moz-transition: none; + -webkit-transition: none; + -o-transition: none; + -ms-transition: none; + opacity: 1; +} + +#next.hidden, #previous.hidden { + opacity: 0; + cursor: default; +} + +.rtl #previous, .ltr #next { + border-top-left-radius: 1px; + border-bottom-left-radius: 1px; + right: 0px; + transform-origin: 100% 0; +} + +.rtl #next, .ltr #previous { + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + left: 0px; + transform-origin: 0 0; +} + +.audio-description-button { + background-image: url("../data/images/interface-audio-description-on.svg"); + width: 52px; + height: 52px; + background-size: 52px 52px; + display: inline-block; + border: 0; + outline: none; + position: absolute; + cursor: pointer; + transform-origin: 0% 0; + + &.right { + right: 0; + transform-origin: 100% 0; + } + + &.playing { + background-image: url("../data/images/interface-audio-description-off.svg"); + } +} + +.interfacecomponent { + transition: opacity 100ms; + opacity: 1; + + &.interfacehidden { + opacity: 0 !important; + pointer-events: none !important; + } +} +