From 0d408acc79f67295e334e888474100587b366962 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Thu, 28 Nov 2019 19:40:02 +0100 Subject: [PATCH] WIP #3051 @7.5 --- js/libs/fluidbook/fluidbook.search.js | 76 +++++++++++++++++++-- style/interface.less | 96 +++++++++++++++++++++++++-- 2 files changed, 161 insertions(+), 11 deletions(-) diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js index 9f8f4dd1..36b72ad1 100644 --- 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 += ''; // #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 efbb958e..6106456f 100644 --- 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; + } } } + -- 2.39.5