From 82080cbe04029b17cee459d1915b87391a2acbfd Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Fri, 9 May 2025 11:28:17 +0200 Subject: [PATCH] wip #7461 @1 --- js/libs/fluidbook/fluidbook.burger.js | 10 ++ js/libs/fluidbook/fluidbook.nav.js | 175 +++++++++++++------------- js/libs/fluidbook/fluidbook.resize.js | 2 + style/mmenu/mmenu.less | 81 +++++++----- 4 files changed, 156 insertions(+), 112 deletions(-) create mode 100644 js/libs/fluidbook/fluidbook.burger.js diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js new file mode 100644 index 00000000..1cec0ab9 --- /dev/null +++ b/js/libs/fluidbook/fluidbook.burger.js @@ -0,0 +1,10 @@ +function FluidbookBurger(fluidbook) { + this.fluidbook = fluidbook; + this.init(); +} + +FluidbookBurger.prototype = { + init: function () { + + }, +} \ No newline at end of file diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index a2d6dcd8..deaccd1e 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -8,6 +8,7 @@ function FluidbookNav(fluidbook) { this.menu = $("#menu"); // Renamed from #nav because mmenu animations weren't working (probably due to some other script interference) this.horizontalNav = $("#horizontalNav"); this._inited = {}; + this.closeTimeout; this.setNav('horizontalNav'); if ($("#iconList").html() !== '') { this.setNav('menu'); @@ -38,71 +39,74 @@ FluidbookNav.prototype = { }, initMenu: function () { - var $this = this, dir = this.fluidbook.l10n.dir, - inverted = this.isInverted(), + var $this = this, dir = this.fluidbook.l10n.dir, inverted = this.isInverted(), side = ((dir === 'ltr' && inverted) || (dir === 'rtl' && !inverted)) ? 'right' : 'left'; - var extensions = ['pagedim-black', 'position-front']; - if (side === 'right') { - extensions.push('position-right'); - } - - this.menu.mmenu({ - - // Allow #anchor links to trigger correctly and close the menu - // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172 - onClick: { - close: function () { - if (fluidbook.settings.phonegap === 'ios') { - return !$(this).is('#menu_download,#menu_print'); - } - return true; - }, preventDefault: function () { - return false; - }, - }, - - "extensions": extensions, "offCanvas": { - "position": side, "zposition": "front", - }, "navbar": { - //add: false // Removes main title bars completely - title: "" // Hides the default "Menu" text - }, "rtl": { - "use": "detect" // Auto detect when in RTL mode based on html dir attribute - }, - - }, { - offCanvas: { - page: { - noSelector: ['#loader'] - } - } - }); - - this.menuAPI = this.menu.data('mmenu'); - - // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4) - this.menuAPI.bind("open:finish", function () { - $('body').addClass('menu-open'); - $("nav#menu").addClass('mm-menu_opened'); - $this.menuIsOpen = true; - setInterval(function () { - $this.fluidbook.resize.resizeMenu() - }, 500); - - //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices - }); - - this.menuAPI.bind("close:finish", function () { - $('body').removeClass('menu-open'); - $this.menuIsOpen = false; - }); + $("#menu").insertAfter('#main'); + $('').insertAfter('#menu'); + + // var extensions = ['pagedim-black', 'position-front']; + // if (side === 'right') { + // extensions.push('position-right'); + // } + // + // this.menu.mmenu({ + // + // // Allow #anchor links to trigger correctly and close the menu + // // Ref: https://github.com/FrDH/jQuery.mmenu/issues/687#issuecomment-279377172 + // onClick: { + // close: function () { + // if (fluidbook.settings.phonegap === 'ios') { + // return !$(this).is('#menu_download,#menu_print'); + // } + // return true; + // }, preventDefault: function () { + // return false; + // }, + // }, + // + // "extensions": extensions, "offCanvas": { + // "position": side, "zposition": "front", + // }, "navbar": { + // //add: false // Removes main title bars completely + // title: "" // Hides the default "Menu" text + // }, "rtl": { + // "use": "detect" // Auto detect when in RTL mode based on html dir attribute + // }, + // + // }, { + // offCanvas: { + // page: { + // noSelector: ['#loader'] + // } + // } + // }); + // + // this.menuAPI = this.menu.data('mmenu'); + // + // // Bind API hooks (see http://mmenu.frebsite.nl/documentation/core/off-canvas.html#h4) + // this.menuAPI.bind("open:finish", function () { + // $('body').addClass('menu-open'); + // $("nav#menu").addClass('mm-menu_opened'); + // $this.menuIsOpen = true; + // + // setInterval(function () { + // $this.fluidbook.resize.resizeMenu() + // }, 500); + // + // //$('#q').focus(); // Disabled for now because it triggers the keyboard to open on some mobile devices + // }); + // + // this.menuAPI.bind("close:finish", function () { + // $('body').removeClass('menu-open'); + // $this.menuIsOpen = false; + // }); $(document).on(this.fluidbook.input.clickEvent, '#menuOpener', function (e) { e.preventDefault(); - $this.menuAPI.open(); + $this.openMenu(); }); // Close menu when a search result is clicked @@ -115,24 +119,6 @@ FluidbookNav.prototype = { $this.fluidbook.resize.resizeMenu(); }); - // Handle swipe to close (it's only really practical to have this because swipe to open would interfere with main Fluidbook swipes) - // We are not using MMenu's "Drag" add-on because it doesn't close the main menu, only submenus on swipe. - // Close direction will be towards the same side the menu comes from - var swipeCloseDirection = this.menuAPI.getInstance().opts.offCanvas.position, - menuSwipe = new Hammer(document.getElementById('menu')); - - // Swipe Handler - menuSwipe.on('swipe' + swipeCloseDirection, function (e) { - - // Only trigger swipe response when menu is actually open - if (!$this.menuIsOpen) { - return false; - } - - $this.closeMenu(); - }); - - // Add search and share links to main menu panel $('#menuList').append(this.searchHTML + this.shareLinksHTML); @@ -140,10 +126,33 @@ FluidbookNav.prototype = { $('#menuList > ul, #chapterList').perfectScrollbar({ suppressScrollX: true, minScrollbarLength: 40, //maxScrollbarLength: 60 }); + + $("#menuOverlay").on(this.fluidbook.input.clickEvent, function () { + $this.closeMenu(); + }); }, + + openMenu: function () { + clearTimeout(this.closeTimeout); + $("#menu,#menuOverlay").show(); + setTimeout(function () { + $("#menu").addClass('open'); + },10); + }, + + closeAll: function () { + this.closeMenu(); + }, + closeMenu: function () { - this.menuAPI.close(); - }, // getIcon: function (name) { + clearTimeout(this.closeTimeout); + $("#menu").removeClass('open'); + this.closeTimeout = setTimeout(function () { + $("#menu,#menuOverlay").hide(); + }, 500); + }, + + // getIcon: function (name) { // var src = 'data/images/' + name + '.'; // if (this.fluidbook.support.SVG) { // src += 'svg'; @@ -246,8 +255,7 @@ FluidbookNav.prototype = { } else { return ''; } - }, - getNavFromType: function (navType) { + }, getNavFromType: function (navType) { switch (navType) { case 'horizontalNav': return this.horizontalNav; @@ -259,8 +267,7 @@ FluidbookNav.prototype = { console.error('navType ' + navType + ' not found!'); return false; } - }, - setNav: function (navType) { + }, setNav: function (navType) { if (typeof navType === 'undefined') { return false; @@ -827,7 +834,7 @@ FluidbookNav.prototype = { if (!this.fluidbook.search.isSearchActive()) { if (!this.fluidbook.settings.searchFullBurger) { this.fluidbook.search.initSearchHints(); // Clears menu and only displays search box - this.menuAPI.closeAllPanels(); // Make sure we're on the main panel with the search box + this.closeAll(); // Make sure we're on the main panel with the search box } } @@ -838,7 +845,7 @@ FluidbookNav.prototype = { this.fluidbook.search.submitForm(); } } else { - this.menuAPI.open(); + this.menu.openMenu(); $('#q').focus(); // Put cursor in the search field } diff --git a/js/libs/fluidbook/fluidbook.resize.js b/js/libs/fluidbook/fluidbook.resize.js index 51d5132f..337d61ae 100644 --- a/js/libs/fluidbook/fluidbook.resize.js +++ b/js/libs/fluidbook/fluidbook.resize.js @@ -276,6 +276,8 @@ FluidbookResize.prototype = { 'transform': 'translateY(-' + 50 * navScale + '%) scale(' + navScale + ')' }); + $("#menu").css('height', this.hh); + var headerHeight = this.fluidbook.settings.menuHeight * navScale; $('header').css({ height: headerHeight, backgroundSize: '100% ' + headerHeight + 'px' diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less index 51f2c735..7b184f27 100644 --- a/style/mmenu/mmenu.less +++ b/style/mmenu/mmenu.less @@ -1,20 +1,3 @@ -@import (inline) "mmenu/jquery.mmenu.all.css"; -@import (inline) "mmenu/jquery.mmenu.positioning.css"; - -// MMenu overrides -.mm-menu { - max-width: 320px; - width: 100%; // Max-width will limit overall width but this allows it to take up more space on very narrow screens - - .mm-listitem { - height: auto; - - a, > * { - color: @menu-text; - } - } -} - // Menu title bar .mm-listitem .mm-title { line-height: 60px; @@ -75,13 +58,39 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { // Fluidbook menu styles #menu { - //position: relative; - //white-space: nowrap; + transition: left 0.4s ease, right 0.4s ease; background-color: @menu-background; color: @menu-text; box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from + width: 320px; + position: absolute; + left: -320px; + top: 0; + z-index: 200; + display: none; + + li { + display: block; + } + + .rtl & { + left: auto; + right: -320px; + + &.open { + left: auto; + right: 0; + } + } + + &.open { + transition: left 0.4s, right 0.4s; + left: 0; + } a, li > span { + display: block; + height: 60px; padding: 10px 10px 10px 29px; .rtl & { @@ -98,13 +107,28 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { .mm-navbar .mm-title { padding: 0 !important; } +} + +#menuOverlay { + display: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 199; + background-color: rgba(0, 0, 0, 0.3); + opacity: 0; + pointer-events: none; + transition: opacity 0.4s ease; +} - //> a { - // vertical-align: top; - // display: inline-block; - //} +#menu.open + #menuOverlay { + pointer-events: auto; + opacity: 1; } + #menuOpener { display: none; color: @icon-color; @@ -162,14 +186,11 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { } #menuSearch { - position: fixed; // So we can scroll the other items below... - .msie & { - position: absolute; - } + position: absolute; top: 0; left: 0; - width: 100%; + width: 260px; z-index: 2; // Ensure search box sits above #shareLinks &:after { @@ -182,6 +203,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { overflow: hidden; position: relative; height: 100%; + padding-top: 89px; &:before { height: 0; // Fix spacing with search box @@ -222,6 +244,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element color: @menu-text; .button-hover(); + cursor: pointer; .rtl & { right: auto; @@ -236,6 +259,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { position: relative; padding: 0; text-align: left; + width: calc(100% - 60px); .rtl & { text-align: right; @@ -431,6 +455,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker { a { padding: 0 !important; + height: auto; } img { -- 2.39.5