From 1c342064dc8393c629ee800e933287eca8ec81b8 Mon Sep 17 00:00:00 2001
From: Stephen Cameron <stephen@cubedesigners.com>
Date: Wed, 27 Nov 2019 19:23:08 +0100
Subject: [PATCH] WIP #3051 @8

---
 js/libs/fluidbook/fluidbook.search.js | 43 +++++++++++++++++++++++++++
 style/interface.less                  | 19 ++++++++++++
 2 files changed, 62 insertions(+)

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index f6efe6a4..9f8f4dd1 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -7,6 +7,8 @@ function FluidbookSearch(fluidbook) {
     this.resultPages = [];
     this.plugins = [];
     this.singleMode = fluidbook.singleMode;
+    this.resultsNavID = 'searchResultsNav';
+    this.hideableElements = $('header,footer,#interface'); // Which elements to show/hide when in search results nav mode
 
     this.init();
 }
@@ -30,6 +32,44 @@ FluidbookSearch.prototype = {
             }
             return true;
         });
+
+        this.initResultsNav();
+    },
+
+    // The results nav bar provides navigation between results without needing the menu to be open
+    // When it is active, the rest of the interface is hidden
+    initResultsNav: function() {
+        var $this = this;
+
+        $(document).on('click', '#menuSearchResults a', function(event) {
+            $this.openResultsNav();
+        });
+
+        var html = '';
+        html += '<div id="' + this.resultsNavID + '" class="hidden">';
+        html += '<button class="searchResultsNavField">';
+        html += getSpriteIcon('nav-search');
+        html += '<div class="searchResultsNavQuery"></div>';
+        html += '</button>'; // .searchResultsNavField
+        html += '<div class="searchResultsNavArrows">';
+        html += '<button class="searchResultsPrev">' + getSpriteIcon('interface-previous') + '</button>';
+        html += '<div class="searchResultsNavCounter"></div>';
+        html += '<button class="searchResultsNext">' + getSpriteIcon('interface-next') + '</button>';
+        html += '</div>'; // .searchResultsNavArrows
+        html += getSpriteIcon('interface-close');
+        html += '</div>'; // #searchResultsNav
+
+        $('body').append(html);
+
+        this.resultsNav = $('#' + this.resultsNavID);
+    },
+    openResultsNav: function() {
+        this.hideableElements.addClass('hidden');
+        this.resultsNav.removeClass('hidden');
+    },
+    closeResultsNav: function() {
+        this.hideableElements.removeClass('hidden');
+        this.resultsNav.addClass('hidden');
     },
     getHints: function (q, callback) {
         var $this = this;
@@ -371,6 +411,8 @@ FluidbookSearch.prototype = {
             pageNrs.reverse();
         }
 
+        console.log('HIGHLIGHTS', this.highlights);
+
         for (var i in this.highlights) {
             var h = this.highlights[i];
             for (var j in h.occurences) {
@@ -543,6 +585,7 @@ FluidbookSearch.prototype = {
 
         var $this = this;
         this.find(q, function (results) {
+            console.log('Search results', results);
             $this.openResults(results);
         });
     },
diff --git a/style/interface.less b/style/interface.less
index ad07d64b..efbb958e 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -88,3 +88,22 @@
   }
 }
 
+#searchResultsNav {
+  position: absolute;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 600px;
+  display: flex;
+  align-items: center;
+
+  > * {
+    flex: 1 1 auto;
+  }
+
+  &.hidden {
+    visibility: hidden;
+    opacity: 0;
+  }
+}
-- 
2.39.5