From: Stephen Cameron Date: Tue, 26 Sep 2017 17:44:41 +0000 (+0200) Subject: WIP #1699 @5.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=6c520f711a46daceef0112b549bff010bfd3444a;p=fluidbook-html5.git WIP #1699 @5.5 --- diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js index 52574b4f..f648a7fc 100644 --- a/js/libs/fluidbook/fluidbook.help.js +++ b/js/libs/fluidbook/fluidbook.help.js @@ -48,7 +48,7 @@ FluidbookHelp.prototype = { // }, { // preserve: true // }); - var h = 40 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25; + var h = 20 + ($("#horizontalNav a[data-tooltip]").length - 1) * 25; var ww = $(window).width(); $("#horizontalNav a[data-tooltip]").each(function() { @@ -56,13 +56,15 @@ FluidbookHelp.prototype = { if (text == null || text == undefined || text == '' || $(this).hasClass('hidden')) { return; } - var offset = $(this).offset(); + + var icon = $(this).find('.svg-icon'); + var offset = icon.offset(); var left; if ($this.fluidbook.l10n.dir == 'ltr') { - left = offset.left + ($(this).outerWidth() / 2); + left = offset.left + (icon.outerWidth() / 2); } else { - left = (ww - offset.left - ($(this).outerWidth() / 2)) * -1; + left = (ww - offset.left - (icon.outerWidth() / 2)) * -1; } var c = 'nav'; @@ -93,6 +95,7 @@ FluidbookHelp.prototype = { help += '
' + this.fluidbook.l10n.__('last page') + '
'; help += ''; help += '
' + this.fluidbook.l10n.__('frontpage') + '
'; + help += '
' + this.fluidbook.l10n.__('drag handle to switch page') + '
'; help += ''; if (this.fluidbook.pad.enabled) { @@ -104,24 +107,14 @@ FluidbookHelp.prototype = { }, initEvents: function() { var $this = this; - if (!this.fluidbook.support.isMobile) { - $(document).on('click', '.icon-help', function(e) { - $this.show(); - if (fluidbook.nav.menuIsOpen) { - fluidbook.nav.menuAPI.close(); - } - e.preventDefault(); - }/*, function() { - $this.hide(); - }).click(function() { - return false; - }*/); - } else { - $(document).on('click', '.icon-help', function() { - $this.show(); - return false; - }); - } + + $(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.view.click(function(e) { @@ -152,8 +145,10 @@ FluidbookHelp.prototype = { var $this = this; + resize(); // Main resize function that later calls local resize() here... this.view.show(); - $("#previous,#next").addClass('help'); + + $("body,#previous,#next").addClass('help'); this.fluidbook.showAllButtons(); if (time != 0) { @@ -169,7 +164,7 @@ FluidbookHelp.prototype = { var $this = this; if (this.isVisible()) { this.view.hide(); - $("#previous,#next").removeClass('help'); + $("body,#previous,#next").removeClass('help'); this.fluidbook.hideUnnecessaryButtons(); if (this.fluidbook.support.isMobile) { $("*").unbind('click', function() { @@ -187,20 +182,38 @@ FluidbookHelp.prototype = { } }, resize: function(ww, hh, interfaceScale, navScale) { - var menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale - this.view.css({ - width: ww, - minHeight: hh - menuHeightScaled, - top: menuHeightScaled - }); + + // ToDo: access variables from fluidbook.resize.* if they're not passed to the function. So resize function can be called directly... + + var $this = this; + var menuHeightScaled = (this.fluidbook.datas.menuHeight) * navScale; + + // this.view.css({ + // width: ww, + // minHeight: hh - menuHeightScaled, + // top: menuHeightScaled + // }); this.interfaceTop = (hh - 100 * interfaceScale) / 2 + 30 * interfaceScale; - this.view.find(".interface>div").css({ - top: this.interfaceTop - menuHeightScaled + this.view.find(".interface > div").css({ + top: this.interfaceTop }); - $("#helpView #icons").transform({ + // Slider label - delay slightly to make sure co-ordinates are correct + setTimeout(function () { + var sliderHelp = $this.view.find('.slider'); + var sliderCursor = $('#slidercursor .visible'); + sliderHelp.css({ + top: 'auto', + bottom: hh - sliderCursor.offset().top, + left: sliderCursor.offset().left + (sliderCursor.width() / 2) + }); + }, 250); + + $("#helpView #icons") + .css('top', menuHeightScaled) + .transform({ scale: [navScale, navScale], origin: ['0%', '0%'] }); @@ -243,7 +256,7 @@ FluidbookHelp.prototype = { preserve: true }); - this.view.find('.illustration').css('margin-top', (hh - 400 * interfaceScale) / 2); + this.view.find('.illustration').css('margin-top', (hh - 200 * interfaceScale) / 2); }, clearTimeout: function() { clearTimeout(this.autoTimeout); diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js index 761f7660..bb86822b 100644 --- a/js/libs/fluidbook/fluidbook.tooltip.js +++ b/js/libs/fluidbook/fluidbook.tooltip.js @@ -74,6 +74,13 @@ FluidbookTooltip.prototype = { if (Modernizr.ftouch && !$(target).is("[data-tooltip-touch]")) { return true; } + + // When the help is open, we don't want tooltips because they are already displayed under the icons + if (this.fluidbook.help.isVisible()) { + return true; + } + + var $this = this; var text = $(target).data('tooltip'); diff --git a/style/fluidbook.less b/style/fluidbook.less index 48bb886f..d294a7a1 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -433,6 +433,11 @@ body, html { -o-transition: all @zoomtransition ease-out; transition: all @zoomtransition ease-out; } + + // Add a slight blur below the help overlay + .help & { + filter: blur(7px); + } } #cache { @@ -582,6 +587,11 @@ body, html { header { position: relative; z-index: 12; + + // Header should sit above help overlay when it is open + .help & { + z-index: 21; + } } #nav > a { @@ -1224,6 +1234,9 @@ ul.chapters.shareList a.level0 .svg-icon { #helpView { background-color: rgba(0, 0, 0, 0.7); position: absolute; + top: 0; + height: 100%; + width: 100%; z-index: 20; display: none; color: #ffffff; @@ -1240,7 +1253,6 @@ ul.chapters.shareList a.level0 .svg-icon { #icons { position: absolute; - top: 0px; @media all and (max-width: @menu-breakpoint) { display: none; @@ -1255,15 +1267,17 @@ ul.chapters.shareList a.level0 .svg-icon { top: 0px; display: inline-block; border-left: 1px solid #ffffff; - padding-left: 5px; + padding-left: 0.5em; white-space: nowrap; } .icon span { + position: relative; + bottom: -0.5em; + & .rtl { position: absolute; right: 1em; - display: block; margin-top: -1em; } } @@ -1296,6 +1310,19 @@ ul.chapters.shareList a.level0 .svg-icon { vertical-align: middle; } +#helpView .interface .slider { + position: absolute; + display: inline-block; + border-left: 1px solid #fff; + padding: 0 0 20px 0.5em; + white-space: nowrap; + + span { + position: relative; + top: -0.5em; + } +} + .ltr #helpView .interface .next, .ltr #helpView .interface .last, .rtl #helpView .interface .first, diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less index 551b49f6..3c4aaa13 100644 --- a/style/nav-horizontal.less +++ b/style/nav-horizontal.less @@ -59,6 +59,11 @@ a { color: @icon-color; display: inline-block; + + // Styling when help overlay is open + .help & { + color: #ccc; + } } .svg-icon { @@ -67,6 +72,10 @@ margin: 0 17px; color: @icon-color; vertical-align: middle; + + .help & { + color: #ccc; + } } } diff --git a/style/slider.less b/style/slider.less index 409cb8e2..491e85a6 100644 --- a/style/slider.less +++ b/style/slider.less @@ -26,6 +26,11 @@ z-index: 12; } + // When help overlay is active + .help & { + z-index: 22; + } + #sliderback { position: absolute; top: -20px;