* In search, clicking on excerpt text goes to the corresponding ancho…

…r, if there is one. * Fix image paths in search * Bump pagefind version
esphome · Oct 28, 2024 · 2156491 · 2156491
1 parent bac5e2a
commit 2156491
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 14 deletions.
diff --git a/Makefile b/Makefile
@@ -1,6 +1,6 @@
 ESPHOME_PATH = ../esphome
 ESPHOME_REF = 2024.10.2
-PAGEFIND_VERSION=1.1.0
+PAGEFIND_VERSION=1.1.1
 PAGEFIND=pagefind
 NET_PAGEFIND=../pagefindbin/pagefind
 

diff --git a/_templates/searchbox.html b/_templates/searchbox.html
@@ -60,7 +60,7 @@
         if (!inpel)
             return;
 
-        var mobileWidth = getComputedStyle(document.body).getPropertyValue("--mobile-width-stop");
+        const mobileWidth = getComputedStyle(document.body).getPropertyValue("--mobile-width-stop");
 
         function isMobile() {
             return window.innerWidth <= mobileWidth;
@@ -74,26 +74,39 @@
 
         const margin = 20;
 
+        function getLink(location, anchors, url) {
+            anchor = anchors.filter(a => a.location === location)[0];
+            if (anchor) {
+                return url + "#" + anchor.id;
+            }
+            return null;
+        }
+
         const resultTemplate = (result) => {
-            let wrapper = new El("li").class("pagefind-modular-list-result");
+            const wrapper = new El("li").class("pagefind-modular-list-result");
 
-            let thumb = new El("div").class("pagefind-modular-list-thumb").addTo(wrapper);
-            if (result?.meta?.image) {
+            const thumb = new El("div").class("pagefind-modular-list-thumb").addTo(wrapper);
+            let image = result?.meta?.image;
+            if (image) {
+                if (image.includes("/_images/"))
+                    image = image.substring(image.indexOf("/_images/"));
                 new El("img").class("pagefind-modular-list-image").attrs({
-                    src: result.meta.image,
+                    src: image,
                     alt: result.meta.image_alt || result.meta.title
                 }).addTo(thumb);
             }
 
-            let inner = new El("div").class("pagefind-modular-list-inner").addTo(wrapper);
-            let title = new El("p").class("pagefind-modular-list-title").addTo(inner);
+            const inner = new El("div").class("pagefind-modular-list-inner").addTo(wrapper);
+            const title = new El("p").class("pagefind-modular-list-title").addTo(inner);
             new El("a").class("pagefind-modular-list-link").text(result.meta?.title).attrs({
                 href: result.meta?.url || result.url
             }).addTo(title);
 
-            let excerpt = new El("p").class("pagefind-modular-list-excerpt").addTo(inner);
+            const excerpt = new El("p").class("pagefind-modular-list-excerpt").addTo(inner);
+            const locations = result.weighted_locations.sort((a, b) => b.weight - a.weight);
+            const url = getLink(locations[0]?.location, result.anchors, result.url) || result.meta?.url || result.url;
             new El("a").class("pagefind-modular-list-link").html(result.excerpt).attrs({
-                href: result.meta?.url || result.url
+                href: url
             }).addTo(excerpt);
 
             return wrapper.element;
@@ -102,9 +115,9 @@
 
         function resizeTarget() {
             const searchPos = inpel.getBoundingClientRect();
-            var leftPos;
-            var topPos;
-            var maxWidth = 650;
+            let leftPos;
+            let topPos;
+            const maxWidth = 650;
             target.style.width = "auto;"
             target.style.height = "fit-content";
             target.style.maxWidth = maxWidth + "px";
@@ -171,7 +184,7 @@
 
         const clickCallback = (event) => {
             const path = event.composedPath();
-            if (path.includes(target) || path.includes(inpel))
+            if (path.includes(inpel))
                 return;
             hideTargets();
         };
@@ -184,5 +197,14 @@
                 }
             });
         }
+        input_field = document.querySelector("#pfmod-input-0");
+        if (input_field) {
+            input_field.focus({preventScroll: true});
+            input_field.addEventListener("blur", () => {
+                setTimeout(() => {
+                    input_field.focus({preventScroll: true});
+                }, 100);
+            })
+        }
     });
 </script>