From: Stephen Cameron Date: Fri, 6 Oct 2017 17:22:51 +0000 (+0200) Subject: WIP #1736 @4 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d5417b15ca5a6974c2dc10a3d04f447c52fb4c29;p=fluidbook-html5.git WIP #1736 @4 --- diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js index 13e2e4d0..104ae063 100644 --- a/js/libs/fluidbook/fluidbook.help.js +++ b/js/libs/fluidbook/fluidbook.help.js @@ -55,7 +55,10 @@ FluidbookHelp.prototype = { // 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 h = 20 + ($(tooltipSelector).length - 1) * 25; + 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() { @@ -65,30 +68,30 @@ FluidbookHelp.prototype = { } 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(); - - var left; + if (icon.length > 0) { + var offset = icon.offset(), + iconWidth = icon.outerWidth() * navScale, + left; if ($this.fluidbook.l10n.dir == 'ltr') { - left = offset.left + (icon.outerWidth() / 2); + left = offset.left + (iconWidth / 2); } else { - left = (ww - offset.left - (icon.outerWidth() / 2)) * -1; + left = (ww - offset.left - (iconWidth / 2)) * -1; } + // 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 + left = left / navScale; + var c = 'nav'; if ($(this).parents("#afterSearch").length > 0) { c = 'afterSearch'; } help += '
' + text + '
'; - h -= 25; + h -= hStep; } }); - // $("#horizontalNav").transform({ - // scale: [scale, scale] - // }, { - // preserve: true - // }); + help += ''; // Interface @@ -221,33 +224,41 @@ FluidbookHelp.prototype = { var sliderHelp = $this.view.find('.slider'); var sliderCursor = $('#slidercursor .visible'); sliderHelp.css({ - bottom: hh - sliderCursor.offset().top, - left: sliderCursor.offset().left + (sliderCursor.width() / 2) + bottom: (hh - sliderCursor.offset().top) * navScale, + left: sliderCursor.offset().left + (sliderCursor.width() / 2 * navScale), + transformOrigin: '0 0' }); }; positionSliderLabel(); // Run immediately setTimeout(positionSliderLabel, 250); // delay slightly to make sure co-ordinates are correct - $("#helpView #icons") - .css('top', menuHeightScaled) - .transform({ - scale: [navScale, navScale], - origin: ['0%', '0%'] + this.view.find('#icons').css({ + 'top': menuHeightScaled, + 'transform': 'scale('+ navScale +')', + 'transformOrigin': '0 100%' }); $("#helpView #icons").css({ fontSize: (14 / navScale) * interfaceScale }); - $("#helpView .illustration").transform({ - scale: [interfaceScale, interfaceScale], - origin: ['50%', '50%'] + // $("#helpView .illustration").transform({ + // scale: [interfaceScale, interfaceScale], + // origin: ['50%', '50%'] + // }); + + this.view.find('.illustration').css({ + transform: 'translate(-50%, -50%) scale('+ interfaceScale +')' }); - $("#helpView .interface").find('.last,.next,.first,.previous').transform({ + // ToDo: refactor bookmarkLabel code so that a scale transform can be applied without messing up positioning (wrap all 3 elements in a div? Handle RTL differences) + + $("#helpView .interface").find('> div').transform({ scale: [interfaceScale, interfaceScale] }) + // ToDo: refactor this and try to move transform-origins to CSS. Make sure that .first and .last label positions factor in interfaceScale + $("#helpView .interface").find('.last').transform({ origin: ['100%', '100%'] }, { @@ -273,7 +284,7 @@ FluidbookHelp.prototype = { preserve: true }); - this.view.find('.illustration').css('margin-top', (hh - 200 * 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.resize.js b/js/libs/fluidbook/fluidbook.resize.js index a7b61e28..c5be9aeb 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -15,6 +15,7 @@ function FluidbookResize(fluidbook) { this.textScale = 2; this.bookScale = 1; this.interfaceScale = 1; + this.navScale = 1; this.ww = $(window).width(); this.hh = $(window).height(); this.init(); @@ -75,6 +76,8 @@ FluidbookResize.prototype = { this.interfaceScale = interfaceScale; var navScale = interfaceScale * parseInt(this.fluidbook.datas.mobileNavScale) / 100; + this.navScale = navScale; + var cssInterfaceScale = [interfaceScale, interfaceScale]; var cssNavScale = [navScale, navScale]; @@ -161,10 +164,15 @@ FluidbookResize.prototype = { bottom: audioButtonPosition }); - $("#nav,#logo,footer,#searchHints").transform({ + $("#logo,footer,#searchHints").transform({ scale: navScale }); + // Scale horizontal size and positioning. Transform origin is handled in CSS for LTR/RTL variations + $('#horizontalNav').css({ + 'transform': 'translateY(-'+ 50 * navScale +'%) scale('+ navScale +')' + }) + var headerHeight = this.fluidbook.datas.menuHeight * navScale; $('header').css({ height: headerHeight, diff --git a/style/fluidbook.less b/style/fluidbook.less index 9252c7b3..345dcc34 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1425,8 +1425,18 @@ ul.chapters.shareList a.level0 .svg-icon { overflow: hidden; .illustration { + position: absolute; + top: 50%; + left: 50%; + //transform: translate(-50%, -50%); // Transform handled via fluidbook.help.js so dynamic scaling can be done text-align: center; font-size: 20px; + + img { + max-width: 100%; + height: auto; + } + p { position: static; } diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less index dd526777..9dfda2c0 100644 --- a/style/nav-horizontal.less +++ b/style/nav-horizontal.less @@ -1,7 +1,7 @@ #horizontalNav { position: absolute; top: 50%; - transform: translateY(-50%); + //transform: translateY(-50%); // Now handled in fluidbook.resize.js due to dynamic scaling in the transform @media all and (max-width: @menu-breakpoint) { display: none; @@ -11,12 +11,14 @@ .ltr &, .rtl.menu-inverted & { left: 0; right: auto; + transform-origin: 0 0; } // Positioning for right-to-left Fluidbooks + inverted menu on LTR .rtl &, .ltr.menu-inverted & { right: 0; left: auto; + transform-origin: 100% 0; } // Locales icon + text link