From 2a36088f7b50b3d020e992f9e810989b21a33c6e Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 16 Jul 2020 18:07:44 +0200
Subject: [PATCH] wip #3766 @3

---
 js/libs/fluidbook/fluidbook.keyboard.js |  14 +-
 js/libs/fluidbook/fluidbook.search.js   |  38 ++
 style/mmenu/mmenu.less                  | 683 ++++++++++++------------
 3 files changed, 397 insertions(+), 338 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index 20279dee..3fdecb8e 100644
--- a/js/libs/fluidbook/fluidbook.keyboard.js
+++ b/js/libs/fluidbook/fluidbook.keyboard.js
@@ -65,6 +65,16 @@ FluidbookKeyboard.prototype = {
                 $this.fluidbook.search.previousResultsPage();
             }
         });
+
+        this.keyShortcut('up,down', function (e, handler) {
+
+            if ($this.fluidbook.search.isHintsNavOpened()) {
+                $this.fluidbook.search.navigateHint(handler.key === 'down' ? 1 : -1);
+                e.preventDefault();
+            }else if($this.fluidbook.search.isResultsOverviewOpened()) {
+                $this.fluidbook.search.navigateResults(handler.key === 'down' ? 1 : -1);
+            }
+        }, false, false);
     },
 
     initZoomShortcuts: function () {
@@ -109,8 +119,8 @@ FluidbookKeyboard.prototype = {
                 var func = 'go' + dir;
                 if (this.fluidbook.pad.enabled) {
                     func += 'Chapter';
-                }else{
-                    func+='Page';
+                } else {
+                    func += 'Page';
                 }
                 this.fluidbook[func]();
             } else if (handler.key === 'end') {
diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 4315a728..596c4153 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -156,6 +156,44 @@ FluidbookSearch.prototype = {
         return $('body').hasClass(this.resultsActiveClass);
     },
 
+    isHintsNavOpened: function () {
+        return $('#menuSearchHints').is(':visible');
+    },
+
+    isResultsOverviewOpened: function () {
+        return $("#menuSearchResults").is(':visible');
+    },
+
+    navigateHint: function (dir) {
+        this._navigate("#menuSearchHints .hint", '.hint', dir);
+    },
+
+    navigateResults: function (dir) {
+        this._navigate('#menuSearchResults .doubleThumb', '.doubleThumb', dir);
+    },
+
+    _navigate: function (listSelector, elementSelector, dir) {
+        if (dir === undefined) {
+            dir = 1;
+        }
+        var hints = $(listSelector);
+        var nbhints = hints.length;
+        var next;
+        if ($(document.activeElement).is(elementSelector)) {
+            var index = $(hints).index(document.activeElement);
+            next = (nbhints + index + dir) % nbhints;
+        } else {
+            if (dir === 1) {
+                next = 0;
+            } else {
+                next = nbhints - 1;
+            }
+        }
+        var ne = $(hints).eq(next);
+        $(ne).focus();
+    },
+
+
     closeResultsNav: function (keepSearch) {
         keepSearch = keepSearch !== 'undefined' ? keepSearch : false;
 
diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less
index 77fbbf90..4299a297 100644
--- a/style/mmenu/mmenu.less
+++ b/style/mmenu/mmenu.less
@@ -3,426 +3,437 @@
 
 // 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
+  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;
+  .mm-listitem {
+    height: auto;
 
-		a, > * {
-			color: @menu-text;
-		}
-	}
+    a, > * {
+      color: @menu-text;
+    }
+  }
 }
 
 // Menu title bar
 .mm-listitem .mm-title {
-	line-height: 60px;
-	padding: 0 !important;
+  line-height: 60px;
+  padding: 0 !important;
 }
 
 // < Title bar back arrow
 .mm-btn.mm-prev {
-	height: 60px;
+  height: 60px;
 }
 
 // Make menu items sit properly under title bar
 .mm-panels > .mm-panel > .mm-listview:first-child, .mm-panels > .mm-panel > .mm-navbar + .mm-listview {
-	margin-top: 0;
+  margin-top: 0;
 }
 
 // Submenu arrows < >
 .mm-menu .mm-btn:after, .mm-menu .mm-btn:before, .mm-menu .mm-listview > li .mm-next:after {
-	border-color: @menu-text;
+  border-color: @menu-text;
 }
 
 // Main list settings
 .mm-listview {
-	font-size: 16px;
-	line-height: 40px;
+  font-size: 16px;
+  line-height: 40px;
 }
 
 // Disable borders between list items
 .mm-listview > li:not(.mm-divider):after, .mm-navbar {
-	border: none;
+  border: none;
 }
 
 // Extra padding for submenus with title bars
 .mm-panels > .mm-panel.mm-hasnavbar {
-	padding-top: 60px;
+  padding-top: 60px;
 }
 
 // Page overlay opacity
 #mm-blocker {
-	background-color: #000;
-	opacity: 0;
+  background-color: #000;
+  opacity: 0;
 }
 
 html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
-	opacity: 0.5;
-	transition: opacity .4s ease 0s; // No delay before fading in the overlay
+  opacity: 0.5;
+  transition: opacity .4s ease 0s; // No delay before fading in the overlay
 }
 
 // Selected menu item
 .mm-menu .mm-listview > li.mm-selected > a:not(.mm-next), .mm-menu .mm-listview > li.mm-selected > span {
-	background: rgba(255, 255, 255, .2);
+  background: rgba(255, 255, 255, .2);
 }
 
 .mm-panel, .mm-panels {
-	background-color: @menu-background;
-	color: @menu-text;
+  background-color: @menu-background;
+  color: @menu-text;
 }
 
 // Fluidbook menu styles
 #menu {
-	//position: relative;
-	//white-space: nowrap;
-	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
-
-	a, li > span {
-		padding: 10px 10px 10px 29px;
-
-		.rtl & {
-			padding: 10px 29px 10px 10px !important;
-		}
-
-		img {
-			display: inline-block;
-			vertical-align: middle;
-			margin-right: 0.7em;
-		}
-	}
-
-	.mm-navbar .mm-title {
-		padding: 0 !important;
-	}
-
-	//> a {
-	//	vertical-align: top;
-	//	display: inline-block;
-	//}
+  //position: relative;
+  //white-space: nowrap;
+  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
+
+  a, li > span {
+    padding: 10px 10px 10px 29px;
+
+    .rtl & {
+      padding: 10px 29px 10px 10px !important;
+    }
+
+    img {
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 0.7em;
+    }
+  }
+
+  .mm-navbar .mm-title {
+    padding: 0 !important;
+  }
+
+  //> a {
+  //	vertical-align: top;
+  //	display: inline-block;
+  //}
 }
 
 #menuOpener {
-	display: none;
-	color: @icon-color;
-
-	// Change colour when help view is open
-	.help & {
-		color: #ccc;
-	}
-
-	@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;
-	}
-
-	// Positioning for left-to-right Fluidbooks + inverted menu on RTL
-	.ltr &, .rtl.menu-inverted & {
-		left: 9px;
-		right: auto;
-		flex-direction: row;
-		transform-origin: left top;
-	}
-
-	// Positioning for right-to-left Fluidbooks + inverted menu on LTR
-	.rtl &, .ltr.menu-inverted & {
-		right: 9px;
-		left: auto;
-		flex-direction: row-reverse; // Swap text and icon positions
-		transform-origin: right top;
-	}
-
-	.label {
-		margin: 0 9px;
-	}
-
-	.svg-icon {
-		width: 20px;
-		vertical-align: middle;
-		margin: 0 9px;
-	}
+  display: none;
+  color: @icon-color;
+
+  // Change colour when help view is open
+  .help & {
+    color: #ccc;
+  }
+
+  @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;
+  }
+
+  // Positioning for left-to-right Fluidbooks + inverted menu on RTL
+  .ltr &, .rtl.menu-inverted & {
+    left: 9px;
+    right: auto;
+    flex-direction: row;
+    transform-origin: left top;
+  }
+
+  // Positioning for right-to-left Fluidbooks + inverted menu on LTR
+  .rtl &, .ltr.menu-inverted & {
+    right: 9px;
+    left: auto;
+    flex-direction: row-reverse; // Swap text and icon positions
+    transform-origin: right top;
+  }
+
+  .label {
+    margin: 0 9px;
+  }
+
+  .svg-icon {
+    width: 20px;
+    vertical-align: middle;
+    margin: 0 9px;
+  }
 }
 
 #menuSearch {
-	position: fixed; // So we can scroll the other items below...
-	.msie &{
-		position: absolute;
-	}
-	top: 0;
-	left: 0;
-	width: 100%;
-	z-index: 2; // Ensure search box sits above #shareLinks
-
-	&:after {
-		border: none;
-	}
+  position: fixed; // So we can scroll the other items below...
+  .msie & {
+    position: absolute;
+  }
+
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 2; // Ensure search box sits above #shareLinks
+
+  &:after {
+    border: none;
+  }
 }
 
 // Main menu with icons
 #menuList {
-	overflow: hidden;
-	position: relative;
-	height: 100%;
-
-	&:before {
-		height: 0; // Fix spacing with search box
-	}
-
-	> ul {
-		margin-top: 60px; // Spacing for search box
-		margin-bottom: 0;
-		padding-top: 20px;
-		padding-bottom: 20px;
-	}
-
-	.svg-icon {
-		width: 26px;
-		height: 26px;
-		vertical-align: middle;
-	}
-
-	.v2 {
-		.svg-icon {
-			width: auto;
-			height: 20px;
-		}
-	}
-
-	// The "extra" image in the menu
-	.nav-icon {
-		margin-right: 0;
-	}
+  overflow: hidden;
+  position: relative;
+  height: 100%;
+
+  &:before {
+    height: 0; // Fix spacing with search box
+  }
+
+  > ul {
+    margin-top: 60px; // Spacing for search box
+    margin-bottom: 0;
+    padding-top: 20px;
+    padding-bottom: 20px;
+  }
+
+  .svg-icon {
+    width: 26px;
+    height: 26px;
+    vertical-align: middle;
+  }
+
+  .v2 {
+    .svg-icon {
+      width: auto;
+      height: 20px;
+    }
+  }
+
+  // The "extra" image in the menu
+  .nav-icon {
+    margin-right: 0;
+  }
 }
 
 #menu #menuClose { // Extra specificity needed to override MMenu RTL styles
-	position: absolute;
-	top: 0;
-	right: 0;
-	width: 60px;
-	height: 60px;
-	padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
-	color: @menu-text;
-	background-color: @menu-button-background;
-
-	.rtl & {
-		right: auto;
-		left: 0;
-	}
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 60px;
+  height: 60px;
+  padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
+  color: @menu-text;
+  background-color: @menu-button-background;
+
+  .rtl & {
+    right: auto;
+    left: 0;
+  }
 }
 
 #searchForm {
-	//position: fixed;
-	//top: 0;
-	//left: 0;
-	position: relative;
-	padding: 0;
-	text-align: left;
-
-	.rtl & {
-		text-align: right;
-	}
+  //position: fixed;
+  //top: 0;
+  //left: 0;
+  position: relative;
+  padding: 0;
+  text-align: left;
+
+  .rtl & {
+    text-align: right;
+  }
 }
 
 #q {
-	background-color: @menu-field-background;
-	color: @menu-field-text;
-	border: none;
-	border-radius: 0;
-	height: 60px;
-	font-size: 16px;
-	padding: 0 1em 0 70px;
-	width: 260px;
-
-	.rtl & {
-		padding: 0 70px 0 1em;
-	}
+  background-color: @menu-field-background;
+  color: @menu-field-text;
+  border: none;
+  border-radius: 0;
+  height: 60px;
+  font-size: 16px;
+  padding: 0 1em 0 70px;
+  width: 260px;
+
+  .rtl & {
+    padding: 0 70px 0 1em;
+  }
 }
 
 #submitSearch {
-	position: absolute;
-	left: 0;
-	top: 50%;
-	transform: translateY(-50%);
-	color: @menu-background;
-
-	.svg-icon {
-		width: 25px;
-		height: 25px;
-	}
-
-	.ltr & {
-		margin: 0;
-	}
-
-	.rtl & {
-		left: auto;
-		right: 0;
-	}
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  color: @menu-background;
+
+  .svg-icon {
+    width: 25px;
+    height: 25px;
+  }
+
+  .ltr & {
+    margin: 0;
+  }
+
+  .rtl & {
+    left: auto;
+    right: 0;
+  }
 }
 
 .menu-item-title {
-	margin: 0 10px;
+  margin: 0 10px;
 }
 
 #menuSearchResults, #menuSearchHints {
-	position: relative;
-	display: none; // Hidden by default, displayed via JS
+  position: relative;
+  display: none; // Hidden by default, displayed via JS
 }
 
 #menuSearchHints {
-	padding: 15px 0;
-
-	.hint {
-		padding: 13px 30px;
-		font-size: 16px;
-		display: block;
-		width: 100%;
-		height: auto;
-		position: relative;
-
-		// > arrow
-		&:after {
-			content: '';
-			position: absolute;
-			border-top: 2px solid transparent;
-			border-left: 2px solid transparent;
-			border-color: currentColor;
-			display: block;
-			width: 8px;
-			height: 8px;
-			margin: auto;
-			top: 0;
-			bottom: 0;
-			right: 25px;
-			transform: rotate(135deg);
-
-			// Reverse arrow position and direction for RTL screens
-			.rtl & {
-				right: auto;
-				left: 25px;
-				transform: rotate(315deg);
-			}
-		}
-
-		em {
-			font-style: normal;
-		}
-	}
+  padding: 15px 0;
+
+  .hint {
+    padding: 13px 30px;
+    font-size: 16px;
+    display: block;
+    width: 100%;
+    height: auto;
+    position: relative;
+
+    &:hover {
+      background-color: @menu-button-background;
+    }
+
+    &:focus {
+      .keyboard-navigating & {
+        background-color: @menu-button-background;
+      }
+    }
+
+    // > arrow
+    &:after {
+      content: '';
+      position: absolute;
+      border-top: 2px solid transparent;
+      border-left: 2px solid transparent;
+      border-color: currentColor;
+      display: block;
+      width: 8px;
+      height: 8px;
+      margin: auto;
+      top: 0;
+      bottom: 0;
+      right: 25px;
+      transform: rotate(135deg);
+
+      // Reverse arrow position and direction for RTL screens
+      .rtl & {
+        right: auto;
+        left: 25px;
+        transform: rotate(315deg);
+      }
+    }
+
+    em {
+      font-style: normal;
+    }
+  }
 }
 
 #menu #menuSearchResults {
-	position: relative;
-	height: 100%;
-	// Max height is now handled via JS
-	//max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins
-	margin: 50px auto 0 0;
-	width: 295px; // To make 25px gap to right of scrollbar (320px - 25px)
-
-	.rtl & {
-		margin-right: 0;
-		margin-left: auto;
-	}
-
-	a {
-		padding: 0 !important;
-	}
-
-	.doubleThumb {
-		display: block !important;
-		margin: 0 auto 40px auto !important;
-
-		&.singlemode {
-			margin: 0px 10px 15px 17px !important;
-			display: inline-block !important;
-			vertical-align: top;
-		}
-
-		&:not(.simple), &.simple .thumb img {
-
-		}
-	}
-
-	.padding {
-		display: none !important;
-	}
-
-	.no-results {
-		padding: 5px 25px;
-	}
-
-	// Perfect Scrollbar mods
-	.ps__scrollbar-y-rail {
-		background: rgba(0, 0, 0, 0.1);
-		width: 6px;
-		opacity: 1;
-	}
-
-	.ps__scrollbar-y {
-		right: 0;
-		background-color: @menu-text;
-	}
-
-	.ps:hover > .ps__scrollbar-y-rail:hover {
-		width: 11px;
-	}
+  position: relative;
+  height: 100%;
+  // Max height is now handled via JS
+  //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins
+  margin: 50px auto 0 0;
+  width: 295px; // To make 25px gap to right of scrollbar (320px - 25px)
+
+  .rtl & {
+    margin-right: 0;
+    margin-left: auto;
+  }
+
+  a {
+    padding: 0 !important;
+  }
+
+  .doubleThumb {
+    display: block !important;
+    margin: 0 auto 40px auto !important;
+
+    &.singlemode {
+      margin: 0px 10px 15px 17px !important;
+      display: inline-block !important;
+      vertical-align: top;
+    }
+
+    &:not(.simple), &.simple .thumb img {
+
+    }
+  }
+
+  .padding {
+    display: none !important;
+  }
+
+  .no-results {
+    padding: 5px 25px;
+  }
+
+  // Perfect Scrollbar mods
+  .ps__scrollbar-y-rail {
+    background: rgba(0, 0, 0, 0.1);
+    width: 6px;
+    opacity: 1;
+  }
+
+  .ps__scrollbar-y {
+    right: 0;
+    background-color: @menu-text;
+  }
+
+  .ps:hover > .ps__scrollbar-y-rail:hover {
+    width: 11px;
+  }
 
 }
 
 #menu #shareLinks {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	background-color: @menu-button-background;
-	line-height: 1;
-	padding: 20px 0;
-
-	.svg-icon {
-		margin: 0;
-	}
-
-	.share-icons {
-		padding-left: 29px;
-		white-space: nowrap;
-
-		.rtl & {
-			padding-left: 0;
-			padding-right: 29px;
-		}
-	}
-
-	.shareList {
-		padding: 0;
-	}
-
-	li {
-		display: inline-block;
-		padding: 0;
-
-		&:not(:last-of-type) {
-			margin-right: 33px;
-
-			.rtl & {
-				margin-right: 0;
-				margin-left: 33px;
-			}
-		}
-
-		a {
-			padding: 0 !important;
-		}
-
-		img {
-			margin: 0;
-		}
-	}
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: @menu-button-background;
+  line-height: 1;
+  padding: 20px 0;
+
+  .svg-icon {
+    margin: 0;
+  }
+
+  .share-icons {
+    padding-left: 29px;
+    white-space: nowrap;
+
+    .rtl & {
+      padding-left: 0;
+      padding-right: 29px;
+    }
+  }
+
+  .shareList {
+    padding: 0;
+  }
+
+  li {
+    display: inline-block;
+    padding: 0;
+
+    &:not(:last-of-type) {
+      margin-right: 33px;
+
+      .rtl & {
+        margin-right: 0;
+        margin-left: 33px;
+      }
+    }
+
+    a {
+      padding: 0 !important;
+    }
+
+    img {
+      margin: 0;
+    }
+  }
 }
\ No newline at end of file
-- 
2.39.5