From: Stephen Cameron <stephen@cubedesigners.com>
Date: Mon, 2 Dec 2019 19:45:57 +0000 (+0100)
Subject: WIP #3051 @4.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=32d574b4cf5326aa6d985c3d7366a7d5df6a7a88;p=fluidbook-html5.git

WIP #3051 @4.5
---

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 36b72ad1..66032517 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -101,10 +101,12 @@ FluidbookSearch.prototype = {
         this.updateResultsNav(resultPage);
         this.hideableElements.addClass('hidden');
         this.resultsNav.removeClass('hidden');
+        $('body').addClass('searchResultsNavActive');
     },
     closeResultsNav: function() {
         this.hideableElements.removeClass('hidden');
         this.resultsNav.addClass('hidden');
+        $('body').removeClass('searchResultsNavActive');
     },
     nextResultsPage: function() {
         var currentIndex = this.resultPages.indexOf(fluidbook.currentPage);
@@ -214,34 +216,36 @@ FluidbookSearch.prototype = {
         if (algo === 'expression') {
             return this._findExpression(q, callback);
         }
-        var words = this.normalizeQuery(q, true);
+        var searchTerms = this.normalizeQuery(q, true);
         var res = {};
         var terms = [];
         var total = 0;
-        var doublesPages = [];
+        var doublePages = [];
         this.resultPages = [];
 
-        var q, v, k, kk, word, wordata, page, occurences, p;
+        var matchedWord, indexWord, searchTerm, term, page;
         var maxPage = this.fluidbook.contentlock.getMaxPage();
 
-        for (kk in words) {
-            q = words[kk];
-            terms.push(q);
-            for (k in INDEX) {
-                if (k.length < this.fluidbook.datas.ignoreWordLimit) {
+        for (searchTerm in searchTerms) {
+            term = searchTerms[searchTerm];
+            terms.push(term);
+            for (indexWord in INDEX) {
+                if (indexWord.length < this.fluidbook.datas.ignoreWordLimit) {
                     continue;
                 }
 
-                if (algo === 'begins' && k.indexOf(q) !== 0) {
+                if (algo === 'begins' && indexWord.indexOf(term) !== 0) {
                     continue;
-                } else if (algo === 'contains' && k.indexOf(q) === -1) {
+                } else if (algo === 'contains' && indexWord.indexOf(term) === -1) {
                     continue;
-                } else if (algo === 'exact' && k !== q) {
+                } else if (algo === 'exact' && indexWord !== term) {
                     continue;
                 }
-                v = INDEX[k];
-                for (page in v.p) {
-                    var occurences = v.p[page];
+
+                matchedWord = INDEX[indexWord];
+
+                for (page in matchedWord.p) {
+                    var occurrences = matchedWord.p[page];
                     page = parseInt(page);
                     if (page > maxPage) {
                         continue;
@@ -251,31 +255,31 @@ FluidbookSearch.prototype = {
                         page--;
                     }
 
-                    if (doublesPages[page] == null || doublesPages[page] == undefined) {
-                        doublesPages[page] = [];
+                    if (doublePages[page] == null || doublePages[page] == undefined) {
+                        doublePages[page] = [];
                     }
-                    if (doublesPages[page][kk] == null || doublesPages[page][kk] == undefined) {
-                        doublesPages[page][kk] = 0;
+                    if (doublePages[page][searchTerm] == null || doublePages[page][searchTerm] == undefined) {
+                        doublePages[page][searchTerm] = 0;
                     }
-                    doublesPages[page][kk] += occurences;
-                    total += occurences;
+                    doublePages[page][searchTerm] += occurrences;
+                    total += occurrences;
                 }
             }
         }
 
-        var nbwords = words.length;
+        var nbwords = searchTerms.length;
 
         total = 0;
-        for (var dpNumber in doublesPages) {
-            var doublePageOccurences = doublesPages[dpNumber];
+        for (var dpNumber in doublePages) {
+            var doublePageOccurences = doublePages[dpNumber];
             if (Object.keys(doublePageOccurences).length === nbwords || this.fluidbook.datas.searchPageSelectionAlgorithm === 'OR') {
-                var occ = 0;
+                var totalOccurrences = 0;
                 for (var ww in doublePageOccurences) {
-                    occ += doublePageOccurences[ww];
+                    totalOccurrences += doublePageOccurences[ww];
                 }
-                res[dpNumber] = occ;
+                res[dpNumber] = totalOccurrences;
                 this.resultPages.push(parseInt(dpNumber));
-                total += occ;
+                total += totalOccurrences;
             }
         }
 
diff --git a/js/libs/fluidbook/fluidbook.zoom.js b/js/libs/fluidbook/fluidbook.zoom.js
index a3c566a8..b37855b9 100644
--- a/js/libs/fluidbook/fluidbook.zoom.js
+++ b/js/libs/fluidbook/fluidbook.zoom.js
@@ -198,27 +198,32 @@ FluidbookZoom.prototype = {
             animation.origin = ['50%', '50%'];
         }
 
-        var hiddenElements = $("header,footer,#interface,#links a.bookmark");
+        // When the search results nav is active, don't reveal interface elements when zooming out...
+        if (!$('body').hasClass('searchResultsNavActive')) {
 
-        if (this.zoom != 1) {
-            if (this.fluidbook.help !== undefined) {
-                this.fluidbook.help.hide(); // Hide the help view if it's showing
-            }
-            $("#shadow").addClass('hidden');
-            if (!$('header').hasClass('hidden')) {
-                $(hiddenElements).addClass('hidden');
-                this.hideInterfaceTimeout = setTimeout(function () {
-                    $(hiddenElements).hide();
-                }, 500);
+            var hiddenElements = $("header,footer,#interface,#links a.bookmark");
+
+            if (this.zoom !== 1) {
+                if (this.fluidbook.help !== undefined) {
+                    this.fluidbook.help.hide(); // Hide the help view if it's showing
+                }
+                $("#shadow").addClass('hidden');
+                if (!$('header').hasClass('hidden')) {
+                    $(hiddenElements).addClass('hidden');
+                    this.hideInterfaceTimeout = setTimeout(function () {
+                        $(hiddenElements).hide();
+                    }, 500);
+                }
+            } else {
+                clearTimeout(this.hideInterfaceTimeout);
+                $(hiddenElements).show().removeClass('hidden');
+                this.shadowTimeout = setTimeout(function () {
+                    $("#shadow").removeClass('hidden');
+                }, 250);
             }
-        } else {
-            clearTimeout(this.hideInterfaceTimeout);
-            $(hiddenElements).show().removeClass('hidden');
-            this.shadowTimeout = setTimeout(function () {
-                $("#shadow").removeClass('hidden');
-            }, 250);
 
         }
+
         $("#z").transform(animation, {preserve: true});
         $this.triggerEvent(((this.zoom === 1) ? 'out' : 'in') + '.start');
 
@@ -234,4 +239,4 @@ FluidbookZoom.prototype = {
 
         return true;
     }
-}
\ No newline at end of file
+}
diff --git a/style/interface.less b/style/interface.less
index 6106456f..e90342e9 100644
--- a/style/interface.less
+++ b/style/interface.less
@@ -104,6 +104,12 @@
   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
 
+  @media (max-width: 599px) {
+    max-width: none;
+    left: 0;
+    transform: none;
+  }
+
   > * {
     display: flex;
     align-items: center;
@@ -120,6 +126,7 @@
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
+    background: none;
     border: none;
     display: flex;
     align-items: center;
@@ -169,12 +176,20 @@
     }
   }
 
-  .searchResultsPrev:after {
-    transform: rotate(-45deg);
+  .searchResultsPrev {
+    padding: 0.75em 0.25em 0.75em 0.75em; // Padding to make a more even focus outline
+
+    &:after {
+      transform: rotate(-45deg);
+    }
   }
 
-  .searchResultsNext:after {
-    transform: rotate(135deg);
+  .searchResultsNext {
+    padding: 0.75em 0.75em 0.75em 0.25em; // Padding to make a more even focus outline
+
+    &:after {
+      transform: rotate(135deg);
+    }
   }
 
   .searchResultsNavCounter {