From 56a2c3dc24b3ad1eaa80a0d1a426ad9e6dc99a25 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 14 Sep 2023 10:13:13 +0200
Subject: [PATCH] wip #6188 @0.75

---
 js/libs/fluidbook/fluidbook.search.js | 64 ++++++++++++++++-----------
 style/fluidbook.less                  | 18 +++++++-
 style/mixins.less                     |  3 ++
 3 files changed, 58 insertions(+), 27 deletions(-)

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 21814953..9e7b006c 100644
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -361,7 +361,6 @@ FluidbookSearch.prototype = {
             return this._findRobust(q, callback);
         }
 
-
         var algo = this.getSearchWordSelectionAlgorithm(q);
         if (algo === 'expression') {
             return this._findExpression(q, callback);
@@ -524,36 +523,48 @@ FluidbookSearch.prototype = {
         if (terms.length === 0) {
             return;
         }
-        var algo = this.getSearchWordSelectionAlgorithm(terms.join(' '));
-        if (algo === 'expression') {
-            return;
-        }
-        for (var t in terms) {
-            var term = terms[t];
-            for (var w in HIGHLIGHTS) {
-                if (algo !== 'expression' && w.length < this.fluidbook.settings.ignoreWordLimit) {
-                    continue;
-                }
 
-                if (algo === 'begins' && w.indexOf(term) !== 0) {
-                    continue;
-                } else if (algo === 'contains' && w.indexOf(term) === -1) {
-                    continue;
-                } else if (algo === 'exact' && w !== term) {
-                    continue;
-                }
+        if (this.robust) {
+            this.setRobustHighlightTerms(terms);
+        } else {
+            var algo = this.getSearchWordSelectionAlgorithm(terms.join(' '));
+            if (algo === 'expression') {
+                return;
+            }
+            for (var t in terms) {
+                var term = terms[t];
+                for (var w in HIGHLIGHTS) {
+                    if (algo !== 'expression' && w.length < this.fluidbook.settings.ignoreWordLimit) {
+                        continue;
+                    }
 
-                var color = t;
-                if (algo === 'expression') {
-                    color = 0;
-                }
+                    if (algo === 'begins' && w.indexOf(term) !== 0) {
+                        continue;
+                    } else if (algo === 'contains' && w.indexOf(term) === -1) {
+                        continue;
+                    } else if (algo === 'exact' && w !== term) {
+                        continue;
+                    }
 
-                var h = {occurences: HIGHLIGHTS[w], color: color, word: w, term: term};
-                this.highlights.push(h);
+                    var color = t;
+                    if (algo === 'expression') {
+                        color = 0;
+                    }
+
+                    var h = {occurences: HIGHLIGHTS[w], color: color, word: w, term: term};
+                    this.highlights.push(h);
+                }
             }
         }
     },
 
+    setRobustHighlightTerms: function (terms) {
+        let term = terms.join('');
+        let firstLetter = term.split('')[0];
+        var h = {occurences: HIGHLIGHTS[firstLetter], color: 0, word: firstLetter, term: term};
+        this.highlights.push(h);
+    },
+
     clearHighlights: function () {
         $("#searchHighlights").html('');
         for (var p in this.plugins) {
@@ -642,13 +653,16 @@ FluidbookSearch.prototype = {
 
         var padding = position.height * 0.2;
         var z = this.fluidbook.settings.cssScale;
-        var h = $('<div class="highlight" data-color="' + color + '"></div>');
+        var h = $('<div class="highlight' + (this.robust ? ' robust' : '') + '" data-color="' + color + '"></div>');
         var coords = {
             top: (position.y - position.height - padding * 2) * z,
             left: (position.x + x - padding) * z + offset,
             width: (width + 2 * padding) * z,
             height: (position.height + padding * 3) * z
         };
+        if (this.robust) {
+            coords.width = coords.height;
+        }
         var transform = {};
         if (position.rotation) {
             transform.rotate = -position.rotation + 'deg';
diff --git a/style/fluidbook.less b/style/fluidbook.less
index 432d5ae2..bdc5b86a 100644
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -640,6 +640,16 @@ body, html {
 
 /* Search */
 
+@keyframes pulse {
+  0% {
+    transform: scale(0.8);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
 #searchHighlights {
   position: absolute;
   top: 0px;
@@ -653,10 +663,14 @@ body, html {
     border-radius: 2px;
     border-style: solid;
 
-    -webkit-transform-origin: 0 0;
-    -moz-transform-origin: 0 0;
     transform-origin: 0 0;
 
+    &.robust {
+      border-radius: 50% 50%;
+      animation: pulse 1s infinite alternate linear;
+      transform-origin: 50% 50%;
+    }
+
     &[data-color="0"], &[data-color="5"], &[data-color="10"] {
       .highlight-area(#00ff00);
     }
diff --git a/style/mixins.less b/style/mixins.less
index f60a929c..43c01105 100644
--- a/style/mixins.less
+++ b/style/mixins.less
@@ -11,6 +11,9 @@
 .highlight-area(@color) {
   border-color: @color;
   background-color: fade(@color, 30%);
+  &.robust{
+    border-color: fade(@color, 35%);
+  }
 }
 
 .page-transition(@factor) {
-- 
2.39.5