esphome-docs/_templates/searchbox.html

189 lines
5.9 KiB
HTML
Raw Normal View History

<script src="/pagefind/pagefind-modular-ui.js"></script>
<div class="pagefind-ui__form" id="search"></div>
<script>
class El {
constructor(tagname) {
this.element = document.createElement(tagname);
}
id(s) {
this.element.id = s;
return this;
}
class(s) {
this.element.classList.add(s);
return this;
}
attrs(obj) {
for (const [k,v] of Object.entries(obj)) {
this.element.setAttribute(k, v);
}
return this;
}
text(t) {
this.element.innerText = t;
return this;
}
html(t) {
this.element.innerHTML = t;
return this;
}
handle(e, f) {
this.element.addEventListener(e, f);
return this;
}
addTo(el) {
if (el instanceof El) {
el.element.appendChild(this.element);
} else {
el.appendChild(this.element);
}
return this.element;
}
}
window.addEventListener('DOMContentLoaded', (event) => {
const targetClass = "search-results";
const docel = document.getElementsByClassName("document");
if (docel.length === 0)
return;
const inpel = document.getElementById("search");
if (!inpel)
return;
var mobileWidth = getComputedStyle(document.body).getPropertyValue("--mobile-width-stop");
function isMobile() {
return window.innerWidth <= mobileWidth;
}
const target = document.createElement("div");
target.classList.add(targetClass);
target.id = targetClass;
target.style.display = "none";
docel.item(0).appendChild(target);
const margin = 20;
const resultTemplate = (result) => {
let 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) {
new El("img").class("pagefind-modular-list-image").attrs({
src: result.meta.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);
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);
new El("a").class("pagefind-modular-list-link").html(result.excerpt).attrs({
href: result.meta?.url || result.url
}).addTo(excerpt);
return wrapper.element;
}
function resizeTarget() {
const searchPos = inpel.getBoundingClientRect();
var leftPos;
var topPos;
var maxWidth = 650;
target.style.width = "auto;"
target.style.height = "fit-content";
target.style.maxWidth = maxWidth + "px";
let rightPos = margin;
if (isMobile()) {
// position search results left aligned with the search box, and below.
leftPos = margin / 2;
topPos = searchPos.bottom + margin / 2;
rightPos = margin / 2;
} else {
// position search results top aligned with the search box, and to its right.
leftPos = searchPos.right + margin * 2;
topPos = searchPos.top;
if (rightPos - leftPos > maxWidth)
rightPos = leftPos + maxWidth;
}
target.style.right = rightPos + "px";
target.style.top = topPos + "px";
target.style.left = leftPos + "px";
let twidth = window.innerWidth - margin - leftPos;
if (twidth > maxWidth)
twidth = maxWidth;
target.style.width = twidth + "px";
target.style.maxHeight = (window.innerHeight - margin - topPos) + "px";
}
window.addEventListener("resize", (event) => { resizeTarget(); });
function showTarget() {
if (target.style.display !== "block") {
target.style.display = "block";
document.addEventListener('click', clickCallback);
}
resizeTarget();
}
function hideTargets() {
if (target.style.display !== "none") {
target.style.display = "none";
document.removeEventListener('click', clickCallback);
}
}
const instance = new PagefindModularUI.Instance({
showSubResults: true,
showImages: false,
ranking: {
pageLength: 0.0,
termSaturation: 1.6,
termFrequency: 0.4,
termSimilarity: 6.0
}
});
instance.add(new PagefindModularUI.Input({
containerElement: "#search"
}));
instance.add(new PagefindModularUI.ResultList({
containerElement: "#search-results",
resultTemplate: resultTemplate
}));
const clickCallback = (event) => {
const path = event.composedPath();
if (path.includes(target) || path.includes(inpel))
return;
hideTargets();
};
if (target) {
instance.on("results", (results) => {
if (results.results.length) {
showTarget();
} else {
hideTargets();
}
});
}
});
</script>