Scroll to from search

kckern · Oct 6, 2024 · 86617b7 · 86617b7
1 parent b4d4377
commit 86617b7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/frontend/webapp/src/views/Read/Read.js b/frontend/webapp/src/views/Read/Read.js
@@ -154,7 +154,22 @@ export default function ReadScripture({ appController }) {
     }, [handleKeyDown, chapterRef, history]);
 
 
-
+    //scroll to highlighted verse on load
+    useEffect(() => {
+        const highlightedVersesFromDom = [...document.querySelectorAll(".highlighted")].map((el) => {
+            const match = el.className.match(/verse_(\d+)/);
+            return match ? parseInt(match[1]) : null;
+        }).filter(Boolean);
+
+        const maxVerse = highlightedVersesFromDom.length ? Math.max(...highlightedVersesFromDom) : 0;
+        const classNameGoto = `verse_${maxVerse}`;
+        const goToDom = document.querySelector(`.${classNameGoto}`);
+        if (goToDom) {
+            goToDom.scrollIntoView({ behavior: "smooth", block: "center" });
+        } else {
+            //console.error("Verse not found:", classNameGoto);
+        }
+    }, [highlightedVerses, chapterRef]);
 
 
 

diff --git a/frontend/webapp/src/views/Search/Search.js b/frontend/webapp/src/views/Search/Search.js
@@ -25,7 +25,7 @@ function SearchComponent({ appController }) {
 
   const highlight = (needle, haystack) => {
     const full_pattern =  new RegExp(needle.replace(/(ing|s|es|ed)$/,'') + ".*?(\\b| )", 'gi');
-    console.log(full_pattern);
+    //console.log(full_pattern);
     if(full_pattern.test(haystack)) return Parser(haystack.replace(full_pattern, (str) => `<em>${str.trim()}</em> `));
 
     let needles = needle.split(/[ ,.;!?]+/).map(str=>(new RegExp("\\b"+str.replace(/(ing|s|es|ed)$/,'')  + ".*?\\b", 'gi')));
@@ -87,7 +87,8 @@ function SearchComponent({ appController }) {
               e.preventDefault();
               e.stopPropagation();
               const chapterSlug = ref.split(":")[0];
-              history.push("/read/" + chapterSlug);
+              const verse = ref.split(":")[1];
+              history.push("/read/" + chapterSlug + "/" + verse);
             }
 
             const handleImgClick = (e) => {