From: Stephen Cameron <stephen@cubedesigners.com>
Date: Tue, 3 Dec 2019 18:25:25 +0000 (+0100)
Subject: WIP #3051 @8
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a537788a0edd69e072e3ce0f6318592434cb75ad;p=fluidbook-html5.git

WIP #3051 @8
---

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index ac8a4665..04fdde47 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -36,13 +36,13 @@ Fluidbook.prototype = {
         this.contentlock = new FluidbookContentLock(this);
         this.menu = new FluidbookMenu(this);
         this.support = new FluidbookSupport(this);
+        this.search = new FluidbookSearch(this);
         this.mobilefirst = new FluidbookMobileFirst(this);
         this.zoom = new FluidbookZoom(this);
         this.zoom.resetZoom();
         this.cache = new FluidbookCache(datas);
         this.service = new FluidbookService(this, datas.id);
         this.loader = new FluidbookLoader(this);
-        this.search = new FluidbookSearch(this);
         this.pad = new FluidbookPad(this);
         this.scorm = new FluidbookScorm(this);
         this.links = new FluidbookLinks(this);
@@ -345,8 +345,13 @@ Fluidbook.prototype = {
         if (!this.canChangePage()) {
             return;
         }
-        this.transitionAxis = 'x';
-        this.setCurrentPage(this.normalizePage(this.currentPage) + this.getNextOffset());
+
+        if (this.search.resultsNavActive()) {
+            this.search.nextResultsPage();
+        } else {
+            this.transitionAxis = 'x';
+            this.setCurrentPage(this.normalizePage(this.currentPage) + this.getNextOffset());
+        }
     },
     goFirstPage: function () {
         if (!this.canChangePage()) {
@@ -359,8 +364,13 @@ Fluidbook.prototype = {
         if (!this.canChangePage()) {
             return;
         }
-        this.transitionAxis = 'x';
-        this.setCurrentPage(this.normalizePage(this.currentPage) - this.getNextOffset());
+
+        if (this.search.resultsNavActive()) {
+            this.search.previousResultsPage();
+        } else {
+            this.transitionAxis = 'x';
+            this.setCurrentPage(this.normalizePage(this.currentPage) - this.getNextOffset());
+        }
     },
     goLastPage: function () {
         if (!this.canChangePage()) {
diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 66032517..fc17c3d0 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -5,10 +5,12 @@ function FluidbookSearch(fluidbook) {
     this.highlights = [];
     this.highlightEnabled = fluidbook.datas.highlightResults;
     this.resultPages = [];
+    this.resultNavPages = [];
     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.resultsActiveClass = 'searchResultsNavActive';
 
     this.init();
 }
@@ -41,20 +43,23 @@ FluidbookSearch.prototype = {
     initResultsNav: function() {
         var $this = this;
 
+        // Previously we used buttons in the HTML for clickable elements
+        // but there's a problem in iOS 9 where buttons don't work properly
+        // with flexbox so they were swapped for <div>s instead...
         var html = '';
         html += '<div id="' + this.resultsNavID + '" class="hidden">';
-        html += '<button class="searchResultsNavField">';
+        html += '<div class="button searchResultsNavField">';
         html += getSpriteIcon('nav-search');
         html += '<div class="searchResultsNavQuery"></div>';
-        html += '</button>'; // .searchResultsNavField
+        html += '</div>'; // .searchResultsNavField
         html += '<div class="searchResultsNavArrows">';
-        html += '<button class="searchResultsPrev"></button>';
+        html += '<div class="button searchResultsPrev"></div>';
         html += '<div class="searchResultsNavCounter"></div>';
-        html += '<button class="searchResultsNext"></button>';
+        html += '<div class="button searchResultsNext"></div>';
         html += '</div>'; // .searchResultsNavArrows
-        html += '<button class="searchResultsNavClose">';
+        html += '<div class="button searchResultsNavClose">';
         html += getSpriteIcon('interface-close');
-        html += '</button>'; // .searchResultsNavField
+        html += '</div>'; // .searchResultsNavClose
         html += '</div>'; // #searchResultsNav
 
         $('body').append(html);
@@ -85,14 +90,47 @@ FluidbookSearch.prototype = {
             $this.closeResultsNav();
         });
 
+        $(this.fluidbook).on('fluidbook.resize.orientation', function (event, details) {
+            if (!$this.resultsNavActive()) return;
+
+            $this.updateResultsNav($this.fluidbook.currentPage);
+        });
+
 
+    },
+    resultsNavActive: function() {
+      return $('body').hasClass(this.resultsActiveClass);
     },
     updateResultsNav: function(resultPage) {
-        var resultPagePosition = this.resultPages.indexOf(resultPage);
+
+        // If we are in landscape view, there are 2 pages visible,
+        // so we only want even pages in our results. The resultPages
+        // includes all pages by default so we need to convert odd pages
+        // to even and remove duplicates created.
+        if (this.fluidbook.resize.orientation === "landscape") {
+
+            var noOddPages = this.resultPages.map(function(page) {
+                if (page % 2 === 1) page--; // Change to preceding even number
+                return page;
+            });
+
+            // Remove any duplicates created when converting pages to even numbers
+            // Ref: https://stackoverflow.com/a/14438954
+            this.resultNavPages = noOddPages.filter(function(value, index, self) {
+                return self.indexOf(value) === index;
+            });
+
+        } else {
+            this.resultNavPages = this.resultPages;
+        }
+
+        console.log('updateResultsNav...', this.resultNavPages);
+
+        var resultPagePosition = this.resultNavPages.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;
+        var counterText = resultPagePosition + '/' + this.resultNavPages.length;
 
         this.resultsNav.find('.searchResultsNavQuery').text($('#q').val());
         this.resultsNav.find('.searchResultsNavCounter').text(counterText);
@@ -101,35 +139,35 @@ FluidbookSearch.prototype = {
         this.updateResultsNav(resultPage);
         this.hideableElements.addClass('hidden');
         this.resultsNav.removeClass('hidden');
-        $('body').addClass('searchResultsNavActive');
+        $('body').addClass(this.resultsActiveClass);
     },
     closeResultsNav: function() {
         this.hideableElements.removeClass('hidden');
         this.resultsNav.addClass('hidden');
-        $('body').removeClass('searchResultsNavActive');
+        $('body').removeClass(this.resultsActiveClass);
     },
     nextResultsPage: function() {
-        var currentIndex = this.resultPages.indexOf(fluidbook.currentPage);
+        var currentIndex = this.resultNavPages.indexOf(fluidbook.currentPage);
         var nextIndex = currentIndex + 1;
 
-        if (nextIndex > this.resultPages.length) {
+        if (nextIndex > this.resultNavPages.length) {
             nextIndex = 0; // Go back to beginning
         }
 
-        var nextPage = this.resultPages[nextIndex];
+        var nextPage = this.resultNavPages[nextIndex];
 
         this.updateResultsNav(nextPage);
         this.fluidbook.setCurrentPage(nextPage);
     },
     previousResultsPage: function() {
-        var currentIndex = this.resultPages.indexOf(fluidbook.currentPage);
+        var currentIndex = this.resultNavPages.indexOf(fluidbook.currentPage);
         var prevIndex = currentIndex - 1;
 
         if (prevIndex < 0) {
-            prevIndex = this.resultPages.length - 1; // Go back to end
+            prevIndex = this.resultNavPages.length - 1; // Go back to end
         }
 
-        var prevPage = this.resultPages[prevIndex];
+        var prevPage = this.resultNavPages[prevIndex];
 
         this.updateResultsNav(prevPage);
         this.fluidbook.setCurrentPage(prevPage);
@@ -244,6 +282,8 @@ FluidbookSearch.prototype = {
 
                 matchedWord = INDEX[indexWord];
 
+                console.log('match found', indexWord, 'pages : ' + Object.keys(matchedWord.p).join(','));
+
                 for (page in matchedWord.p) {
                     var occurrences = matchedWord.p[page];
                     page = parseInt(page);
@@ -251,9 +291,9 @@ FluidbookSearch.prototype = {
                         continue;
                     }
 
-                    if (!this.singleMode && (page % 2) === 1) {
-                        page--;
-                    }
+                    // if (!this.singleMode && (page % 2) === 1) {
+                    //     page--;
+                    // }
 
                     if (doublePages[page] == null || doublePages[page] == undefined) {
                         doublePages[page] = [];
@@ -477,8 +517,6 @@ 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) {
diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index b37855b9..99782bcc 100644
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -199,7 +199,7 @@ FluidbookZoom.prototype = {
         }
 
         // When the search results nav is active, don't reveal interface elements when zooming out...
-        if (!$('body').hasClass('searchResultsNavActive')) {
+        if (!this.fluidbook.search.resultsNavActive()) {
 
             var hiddenElements = $("header,footer,#interface,#links a.bookmark");
 
diff --git a/style/interface.less b/style/interface.less
index e90342e9..e039c87c 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -88,6 +88,15 @@
   }
 }
 
+
+//=== Search Results Navigation Bar
+.searchResultsNavActive {
+  // Disable links when in search results mode
+  #links .link {
+    pointer-events: none;
+  }
+}
+
 #searchResultsNav {
   position: absolute;
   top: 0;
@@ -122,12 +131,7 @@
     transform: translateY(-100%) translateX(-50%);
   }
 
-  button {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: none;
-    border: none;
+  .button {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -135,6 +139,7 @@
     width: 100%;
     color: inherit;
     font-size: 1em;
+    cursor: pointer;
   }
 
   .searchResultsNavField {
@@ -145,7 +150,7 @@
     .svg-icon {
       flex: 0 0 auto;
       height: 26px;
-      padding-left: 1em;
+      margin-left: 1em;
     }
   }
 
@@ -197,6 +202,7 @@
     padding: 0 1em;
     font-size: 0.9em;
     opacity: 0.5;
+    flex-shrink: 0;
   }
 
   .searchResultsNavClose {