From 9bbbb5b80d82f7fe42209c0404c127459be99373 Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Fri, 21 Jan 2022 13:20:46 +0100
Subject: [PATCH] add fulltext highligh to snuippets

---
 src/components/Article.vue | 25 +++++++++++++++++++++++--
 src/components/Header.vue  |  2 +-
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/Article.vue b/src/components/Article.vue
index 5a391fdf..fc24be1a 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -92,6 +92,9 @@ export default {
         return {bm: 'nob', nn: 'nno'}[this.dictionary]
       }
     },
+    fulltext: function() {
+      return this.$store.state.fulltext
+    },
     collapsable: function() {
       if (this.$parent.$options.name != 'SearchResults') {
         this.is_collapsed = false
@@ -228,10 +231,28 @@ export default {
         definitionTexts = []
       }
 
-      let definitions = definitionTexts.join("\u00A0•\u00A0")
-      return definitions
+      let snippet = definitionTexts.join("\u00A0•\u00A0")
+      return snippet
 
     },
+    highlight_hits: function(text, type) {
+      if (text != "" && this.fulltext) {
+        let regex_split = new RegExp("([a-zà-ÿ]?"+this.fulltext+"[a-zà-ÿ]?)", "i")
+        let regex_include = new RegExp("^"+this.fulltext+"$", "i")
+        if (regex_split.test(text)) {
+          let components = text.split(regex_split)
+        return components.map(item => {
+          if (regex_include.test(item)) {
+            return {text: item, type: "highlighted"+(type?' '+type:'')}
+          }
+          else {
+            return {text: item, type}
+          }
+        })
+        }
+      }
+      return [{text, type}]
+    },
     toggle_collapse: function() {
       this.$plausible.trackEvent('toggle collapse', {props: {from: this.collapsed, to: !this.collapsed}})
       this.collapsed = !this.collapsed
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 571e0e28..b87310eb 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -59,7 +59,7 @@
     
 
         <span v-if="!lemma_groups[1] && $parent.collapsed && $parent.snippet && $parent.has_content" class="definition_snippet">
-    {{$parent.snippet}}
+    <span v-for="(subitem, index) in $parent.highlight_hits($parent.snippet)" :key="index" :class="subitem.type">{{subitem.text}}</span>
     </span> 
 
     </div>
-- 
GitLab