wip #3766 @3

diff --git a/js/libs/fluidbook/fluidbook.keyboard.js b/js/libs/fluidbook/fluidbook.keyboard.js
index 20279dee6f7c264df7e750613c17d43fb7590639..3fdecb8ed989b71673f35182a4390a52925db2be 100644 (file)
--- 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 4315a7286efdbd4c6c6399a27e267ea2895d1894..596c41533ffc8db75f23fae0e81093a6dc92f4b6 100644 (file)
--- 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 77fbbf902757bf672c2de8f12396fc379904c3c0..4299a2977777108517afc926d9171f8d8fd807db 100644 (file)
--- 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