WIP #3051 @7.5

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 9f8f4dd11bd428256d104cc86d3db7c89da1b758..36b72ad1bb97db48abdf84295e739263e021d322 100644 (file)
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -41,10 +41,6 @@ FluidbookSearch.prototype = {
     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">';
@@ -52,18 +48,57 @@ FluidbookSearch.prototype = {
         html += '<div class="searchResultsNavQuery"></div>';
         html += '</button>'; // .searchResultsNavField
         html += '<div class="searchResultsNavArrows">';
-        html += '<button class="searchResultsPrev">' + getSpriteIcon('interface-previous') + '</button>';
+        html += '<button class="searchResultsPrev"></button>';
         html += '<div class="searchResultsNavCounter"></div>';
-        html += '<button class="searchResultsNext">' + getSpriteIcon('interface-next') + '</button>';
+        html += '<button class="searchResultsNext"></button>';
         html += '</div>'; // .searchResultsNavArrows
+        html += '<button class="searchResultsNavClose">';
         html += getSpriteIcon('interface-close');
+        html += '</button>'; // .searchResultsNavField
         html += '</div>'; // #searchResultsNav
 
         $('body').append(html);
 
         this.resultsNav = $('#' + this.resultsNavID);
+
+        //=== Event handlers
+        $(document).on('click', '#menuSearchResults a', function() {
+            // Find the page number of the result so we can see where it sits in the list of returned results
+            var pageNumber = parseInt($(this).parents('.doubleThumb').attr('page'));
+            $this.openResultsNav(pageNumber);
+        });
+
+        $(document).on('click', '.searchResultsNavField', function() {
+            $this.closeResultsNav();
+            $this.fluidbook.nav.openSearch();
+        });
+
+        $(document).on('click', '.searchResultsNext', function() {
+            $this.nextResultsPage();
+        });
+
+        $(document).on('click', '.searchResultsPrev', function() {
+            $this.previousResultsPage();
+        });
+
+        $(document).on('click', '.searchResultsNavClose', function() {
+            $this.closeResultsNav();
+        });
+
+
     },
-    openResultsNav: function() {
+    updateResultsNav: function(resultPage) {
+        var resultPagePosition = this.resultPages.indexOf(resultPage);
+        // Convert from zero-based index. If page clicked isn't found in results pages, default to 1
+        resultPagePosition = (resultPagePosition === -1) ? 1 : resultPagePosition + 1;
+
+        var counterText = resultPagePosition + '/' + this.resultPages.length;
+
+        this.resultsNav.find('.searchResultsNavQuery').text($('#q').val());
+        this.resultsNav.find('.searchResultsNavCounter').text(counterText);
+    },
+    openResultsNav: function(resultPage) {
+        this.updateResultsNav(resultPage);
         this.hideableElements.addClass('hidden');
         this.resultsNav.removeClass('hidden');
     },
@@ -71,6 +106,33 @@ FluidbookSearch.prototype = {
         this.hideableElements.removeClass('hidden');
         this.resultsNav.addClass('hidden');
     },
+    nextResultsPage: function() {
+        var currentIndex = this.resultPages.indexOf(fluidbook.currentPage);
+        var nextIndex = currentIndex + 1;
+
+        if (nextIndex > this.resultPages.length) {
+            nextIndex = 0; // Go back to beginning
+        }
+
+        var nextPage = this.resultPages[nextIndex];
+
+        this.updateResultsNav(nextPage);
+        this.fluidbook.setCurrentPage(nextPage);
+    },
+    previousResultsPage: function() {
+        var currentIndex = this.resultPages.indexOf(fluidbook.currentPage);
+        var prevIndex = currentIndex - 1;
+
+        if (prevIndex < 0) {
+            prevIndex = this.resultPages.length - 1; // Go back to end
+        }
+
+        var prevPage = this.resultPages[prevIndex];
+
+        this.updateResultsNav(prevPage);
+        this.fluidbook.setCurrentPage(prevPage);
+    },
+
     getHints: function (q, callback) {
         var $this = this;
         this._loadLib(function () {

diff --git a/style/interface.less b/style/interface.less
index efbb958ee3723761554a80225ff2fbb591b3a835..6106456f3b2c98e17c5fcb75f5d2b97c7d7c52f7 100644 (file)
--- a/style/interface.less
+++ b/style/interface.less
@@ -90,20 +90,108 @@
 
 #searchResultsNav {
   position: absolute;
-  top: 100px;
+  top: 0;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%) translateY(50%);
   width: 100%;
-  max-width: 600px;
+  max-width: 465px;
+  height: 60px;
   display: flex;
   align-items: center;
+  transition: all 0.3s ease-out;
+  background: @menu-text;
+  color: @menu-background;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  font-size: 16px; // Controls size of text and padding
 
   > * {
-    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    flex: 0 1 auto;
   }
 
   &.hidden {
     visibility: hidden;
     opacity: 0;
+    transform: translateY(-100%) translateX(-50%);
+  }
+
+  button {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    color: inherit;
+    font-size: 1em;
+  }
+
+  .searchResultsNavField {
+    flex: 1; // Always fill whatever space other elements don't take
+    text-align: left;
+    min-width: 0; // Stops query field growing too big (see: https://css-tricks.com/flexbox-truncated-text/)
+
+    .svg-icon {
+      flex: 0 0 auto;
+      height: 26px;
+      padding-left: 1em;
+    }
+  }
+
+  .searchResultsNavQuery {
+    flex: 1 1 auto;
+    padding: 0 1em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .searchResultsNavArrows {
+    padding: 0 1.25em;
+  }
+
+  .searchResultsPrev, .searchResultsNext {
+    position: relative;
+    font-size: 12px; // Controls arrow size
+
+    &:after {
+      content: '';
+      border-width: 2px 0 0 2px;
+      border-style: solid;
+      border-color: currentColor;
+      display: block;
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  .searchResultsPrev:after {
+    transform: rotate(-45deg);
+  }
+
+  .searchResultsNext:after {
+    transform: rotate(135deg);
+  }
+
+  .searchResultsNavCounter {
+    text-align: center;
+    padding: 0 1em;
+    font-size: 0.9em;
+    opacity: 0.5;
+  }
+
+  .searchResultsNavClose {
+    background-color: @menu-background;
+    color: @menu-text;
+    width: 60px;
+
+    .svg-icon {
+      height: 20px;
+    }
   }
 }
+