From 7f3cc8af360eb21c3e2de507b991241732db6127 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 3 May 2023 18:26:53 +0200 Subject: [PATCH] wait #5860 @0.5 --- js/libs/fluidbook/fluidbook.nav.js | 12 +- js/libs/fluidbook/fluidbook.widget.js | 16 +- style/help.less | 8 + style/mmenu/mmenu.less | 23 +- style/nav-horizontal.less | 295 +++++++++++++------------- 5 files changed, 198 insertions(+), 156 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 9eac6ff4..72a1eade 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -124,7 +124,8 @@ FluidbookNav.prototype = { $('#menuList > ul, #chapterList').perfectScrollbar({ suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60 }); - }, closeMenu: function () { + }, + closeMenu: function () { this.menuAPI.close(); }, // getIcon: function (name) { // var src = 'data/images/' + name + '.'; @@ -152,7 +153,8 @@ FluidbookNav.prototype = { $nav.find("ul #" + before).before(li); } return $("#" + elementID).get(0); - }, getLink: function (name, href, id, title, help, className, showIcon, navType, keyboardShortcut) { + }, + getLink: function (name, href, id, title, help, className, showIcon, navType, keyboardShortcut) { if (showIcon === undefined) { showIcon = true; } @@ -227,7 +229,8 @@ FluidbookNav.prototype = { } else { return ''; } - }, getNavFromType: function (navType) { + }, + getNavFromType: function (navType) { switch (navType) { case 'horizontalNav': return this.horizontalNav; @@ -239,7 +242,8 @@ FluidbookNav.prototype = { console.error('navType ' + navType + ' not found!'); return false; } - }, setNav: function (navType) { + }, + setNav: function (navType) { if (typeof navType === 'undefined') { return false; diff --git a/js/libs/fluidbook/fluidbook.widget.js b/js/libs/fluidbook/fluidbook.widget.js index f1c6bf59..0ff39388 100644 --- a/js/libs/fluidbook/fluidbook.widget.js +++ b/js/libs/fluidbook/fluidbook.widget.js @@ -2,6 +2,8 @@ function FluidbookWidget(fluidbook) { this.fluidbook = fluidbook; this.featureEnabled = true; this.enabled = false; + // Can be auto, horizontal, burger + this.nav = 'auto'; this.init(); } @@ -18,6 +20,7 @@ FluidbookWidget.prototype = { this.background = '#' + this.background; } } + this.nav = $_GET.hasOwnProperty('nav') ? $_GET['nav'] : 'auto'; this.action = $_GET.hasOwnProperty('action') ? $_GET['action'] : 'fullscreen'; this.enabled = true; var $this = this; @@ -37,7 +40,7 @@ FluidbookWidget.prototype = { if (this.action === 'fullscreen') { screenfull.toggle(); } else if (this.action === 'tab') { - window.open(window.location.toString().replace("widget=1", "widget=0"),'_blank'); + window.open(window.location.toString().replace("widget=1", "widget=0"), '_blank'); } } return !active; @@ -57,16 +60,25 @@ FluidbookWidget.prototype = { }, enable: function () { - $("body").addClass('widget'); if (this.background !== false) { $("#background,#splash").attr('style', 'background-color: ' + this.background + ' !important;background-image:none !important'); } + if (this.nav == 'auto') { + $('body').removeClass('nav-horizontal').removeClass('nav-burger'); + } else if (this.nav === 'horizontal') { + $('body').addClass('nav-horizontal').removeClass('nav-burger'); + } else if (this.nav === 'burger') { + $('body').removeClass('nav-horizontal').addClass('nav-burger'); + } }, disable: function () { $("body").removeClass('widget'); + // Background $("#background,#splash").attr('style', ''); + // Nav + $('body').removeClass('nav-horizontal').removeClass('nav-burger'); }, isWidgetModeActive: function () { diff --git a/style/help.less b/style/help.less index b52ca83c..317d0077 100644 --- a/style/help.less +++ b/style/help.less @@ -153,6 +153,14 @@ @media all and (max-width: @menu-breakpoint) { display: none; } + + .nav-horizontal & { + display: block !important; + } + + .nav-burger & { + display: none !important; + } } .portrait & .icon.afterSearch { diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less index ebec5d3e..51f2c735 100644 --- a/style/mmenu/mmenu.less +++ b/style/mmenu/mmenu.less @@ -114,15 +114,24 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { color: #ccc; } + position: absolute; + top: 50%; + transform: translateY(-50%); + height: 100%; + font-size: 16px; + line-height: 1; + align-items: center; + @media all and (max-width: @menu-breakpoint) { - position: absolute; - top: 50%; - transform: translateY(-50%); - height: 100%; - font-size: 16px; - line-height: 1; display: flex; - align-items: center; + } + + .nav-horizontal & { + display: none !important; + } + + .nav-burger & { + display: flex !important; } // Positioning for left-to-right Fluidbooks + inverted menu on RTL diff --git a/style/nav-horizontal.less b/style/nav-horizontal.less index c449ea7b..c43990f8 100644 --- a/style/nav-horizontal.less +++ b/style/nav-horizontal.less @@ -1,155 +1,164 @@ #horizontalNav { - position: absolute; - top: 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; - } - - // Positioning for left-to-right Fluidbooks + inverted menu on RTL - .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 - &_locales { - border-left: 1px solid; - margin-right: 1.5em; - margin-left: 14px; - - .rtl & { - border-left: none; - border-right: 1px solid; - } - - .svg-icon { - margin: 0 7px 0 30px !important; - - .rtl & { - margin: 0 30px 0 7px !important; - } - } - } - - // Optional extra image - &_extra { - > img { - vertical-align: middle; - margin: 0 17px; - } - } + position: absolute; + top: 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; + } + + .nav-horizontal & { + display: block !important; + } + + .nav-burger & { + display: none !important; + } + + // Positioning for left-to-right Fluidbooks + inverted menu on RTL + .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 + &_locales { + border-left: 1px solid; + margin-right: 1.5em; + margin-left: 14px; + + .rtl & { + border-left: none; + border-right: 1px solid; + } + + .svg-icon { + margin: 0 7px 0 30px !important; + + .rtl & { + margin: 0 30px 0 7px !important; + } + } + } + + // Optional extra image + &_extra { + > img { + vertical-align: middle; + margin: 0 17px; + } + } } #iconList { - list-style-type: none; - margin: 0; - padding: 0; - white-space: nowrap; - - li { - display: inline-block; - vertical-align: middle; - } - - a { - color: @icon-color; - display: inline-block; - - - // Styling when help overlay is open - .help & { - color: #ccc; - } - &.hidden { - display: none !important; - opacity: 0; - width: 0; - height: 0; - visibility: hidden; - margin: 0; - padding: 0; - } - } - - img, .svg-icon { - height: 25px; - width: auto; - - margin: 0 17px; - color: @icon-color; - vertical-align: middle; - transition: color @page-transition-duration; - - .help & { - color: #ccc; - } - } - - .svg-icon{ - .msie & { - width: 25px; - } - } - - &.v2 { - .svg-icon { - width: auto; - height: 20px; - } - } + list-style-type: none; + margin: 0; + padding: 0; + white-space: nowrap; + + li { + display: inline-block; + vertical-align: middle; + } + + a { + color: @icon-color; + display: inline-block; + + + // Styling when help overlay is open + .help & { + color: #ccc; + } + + &.hidden { + display: none !important; + opacity: 0; + width: 0; + height: 0; + visibility: hidden; + margin: 0; + padding: 0; + } + } + + img, .svg-icon { + height: 25px; + width: auto; + + margin: 0 17px; + color: @icon-color; + vertical-align: middle; + transition: color @page-transition-duration; + + .help & { + color: #ccc; + } + } + + .svg-icon { + .msie & { + width: 25px; + } + } + + &.v2 { + .svg-icon { + width: auto; + height: 20px; + } + } } // Small dropdown arrow after locale name .icon-locales .menu-item-title:after { - content: ''; - width: 6px; - height: 6px; - vertical-align: middle; - margin: -3px 0 0 10px; - border-style: solid; - border-width: 0 2px 2px 0; // Make right angle for arrow - transform: rotate(45deg); // Rotate to downwards position - display: inline-block; - - .rtl & { - margin-right: 10px; - } + content: ''; + width: 6px; + height: 6px; + vertical-align: middle; + margin: -3px 0 0 10px; + border-style: solid; + border-width: 0 2px 2px 0; // Make right angle for arrow + transform: rotate(45deg); // Rotate to downwards position + display: inline-block; + + .rtl & { + margin-right: 10px; + } } #afterSearch { - position: absolute; - margin: 0 17px; - - .c { - position: relative; - top: 0px; - left: 0px; - z-index: 9; - display: block; - } - - .links { - position: absolute; - top: 0px; - left: 0px; - z-index: 10; - - .link { - position: absolute; - } - } - - @media all and (max-width: @menu-breakpoint) { - display: none; - } + position: absolute; + margin: 0 17px; + + .c { + position: relative; + top: 0px; + left: 0px; + z-index: 9; + display: block; + } + + .links { + position: absolute; + top: 0px; + left: 0px; + z-index: 10; + + .link { + position: absolute; + } + } + + @media all and (max-width: @menu-breakpoint) { + display: none; + } } \ No newline at end of file -- 2.39.5