From 8eb6c31b3a3bc4e73ac7d700c5de4ab0c0af16c9 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 25 Aug 2017 15:28:04 +0200
Subject: [PATCH] highlights disappearing at some scale levels #811 @2

---
 js/libs/fluidbook/fluidbook.search.js | 25 +++++++++++++++++++++++--
 style/fluidbook.less                  |  1 +
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 45c8c4a6..ef7fc268 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -8,10 +8,15 @@ function FluidbookSearch(fluidbook) {
 
 FluidbookSearch.prototype = {
     init: function () {
-        var $this=this;
+        var $this = this;
         $(this.fluidbook).on('fluidbook.page.change.end', function (e, pageNr) {
             $this.highlightSearchTerms(pageNr);
         });
+        $(document).on('change', '#q', function () {
+            $this.setHighlightTerms([]);
+            $this.clearHighlights();
+            return true;
+        });
     },
     getHints: function (q, callback) {
         var $this = this;
@@ -184,10 +189,26 @@ FluidbookSearch.prototype = {
     },
 
     highlightOccurence: function (position, word, term, color, offset) {
+        if (word != term) {
+            // When we just highlight a part of the word. For example, searched term is brand and word found is brands
+            var width = 0;
+            for (var i = 0; i < term.length; i++) {
+                width += position.lw[i];
+            }
+        } else {
+            width = position.width;
+        }
+
         var padding = position.height * 0.2;
         var z = this.fluidbook.datas.pageZoomFactor * 1.19;
         var h = $('<div class="highlight" data-color="' + color + '"></div>');
-        $(h).css({top: (position.y - position.height - padding * 2) * z, left: (position.x - padding) * z + offset, width: (position.width + 2 * padding) * z, height: (position.height + padding * 3) * z});
+        var coords = {top: (position.y - position.height - padding * 2) * z, left: (position.x - padding) * z + offset, width: (width + 2 * padding) * z, height: (position.height + padding * 3) * z};
+        var hash = coords.top + '|' + coords.left + '|' + coords.width + '|' + coords.height;
+        if ($('[data-hash="' + hash + '"]').length > 0) {
+            return;
+        }
+        $(h).attr('data-hash', hash);
+        $(h).css(coords);
         $("#searchHighlights").append(h);
     }
 };
diff --git a/style/fluidbook.less b/style/fluidbook.less
index c93c39b7..203d4ec0 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -303,6 +303,7 @@ body, html {
 	position: absolute;
 	top: 0px;
 	left: 0px;
+	z-index:3;
 	.highlight {
 		position: absolute;
 		border-width: 2px;
-- 
2.39.5