esphome-docs/_templates/searchbox.html

83 lines
2.8 KiB
HTML
Raw Normal View History

<script src="/pagefind/pagefind-modular-ui.js"></script>
<div class="pagefind-ui__form" id="search"></div>
<div class="search-results" id="mobile-search-results"></div>
<script>
let callbackAdded = null;
window.addEventListener('DOMContentLoaded', (event) => {
const std_target = document.getElementById("search-results");
const mobile_target = document.getElementById("mobile-search-results");
const inpel = document.getElementById("search");
function showTarget() {
var target = std_target;
if (window.innerWidth <= 875) {
target = mobile_target;
std_target.style.display = "none";
} else {
mobile_target.style.display = "none";
}
target.style.display = "block";
const rect = target.getBoundingClientRect();
const height = window.innerHeight;
target.style.width = "100%";
target.style.height = "fit-content";
target.style.maxHeight = (height - rect.top - 10) + "px";
if (!callbackAdded) {
callbackAdded = true;
document.addEventListener('click', clickCallback);
}
}
function hideTargets() {
std_target.style.display = "none";
mobile_target.style.display = "none";
std_target.style.height = "0";
mobile_target.style.height = "0";
if (callbackAdded) {
document.removeEventListener('click', clickCallback);
callbackAdded = false;
}
}
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"
}));
instance.add(new PagefindModularUI.ResultList({
containerElement: "#mobile-search-results"
}));
const clickCallback = (event) => {
const path = event.composedPath();
if (path.includes(std_target) || path.includes(mobile_target) || path.includes(inpel))
return;
hideTargets();
};
if (std_target && mobile_target) {
instance.on("results", (results) => {
if (results.results.length) {
showTarget();
} else {
hideTargets();
}
});
}
});
</script>