mirror of
https://github.com/esphome/esphome-docs.git
synced 2024-12-27 17:37:45 +01:00
83 lines
2.8 KiB
HTML
83 lines
2.8 KiB
HTML
|
<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>
|