kova/hugo-profile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

on escape and schortcut functionality added for search

Browse Source
This commit is contained in:
gurusabarish
2023-01-22 01:10:14 +05:30
parent c28b579ab6
commit 123418edea
2 changed files with 76 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/search.js
+74 -15
View File
@@ -1,22 +1,11 @@
async function searchOnChange(evt) {
let searchQuery = evt.target.value;
var inputEle = document.querySelectorAll("input#search");
inputEle.forEach((element) => {
element.value = searchQuery;
});
if (searchQuery !== "") {
const searchButtonEle = document.querySelectorAll("#search");
let searchButtonPosition;
if (window.innerWidth > 768) {
searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
document.getElementById("search-content").style.width = "500px";
} else {
searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
document.getElementById("search-content").style.width = "300px";
}
document.getElementById("search-content").style.top =
searchButtonPosition.top + 50 + "px";
document.getElementById("search-content").style.left =
searchButtonPosition.left + "px";
let searchJson = await fetch("/index.json").then((res) => res.json());
let searchResults = searchJson.filter((item) => {
let res = false;
@@ -65,9 +54,79 @@ async function searchOnChange(evt) {
let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
document.getElementById("search-results").innerHTML = searchResultsHtml;
}
alignSearchContent();
document.getElementById("search-content").style.display = "block";
} else {
document.getElementById("search-content").style.display = "none";
document.getElementById("search-results").innerHTML = "";
}
}
function alignSearchContent() {
const searchButtonEle = document.querySelectorAll("#search");
if (searchButtonEle.value !== "") {
let searchButtonPosition;
if (window.innerWidth > 768) {
searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
document.getElementById("search-content").style.width = "500px";
} else {
var navbarCollapse = document.querySelector("#navbarContent");
navbarCollapse.classList.add("show");
searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
document.getElementById("search-content").style.width = "300px";
}
document.getElementById("search-content").style.top =
searchButtonPosition.top + 50 + "px";
document.getElementById("search-content").style.left =
searchButtonPosition.left + "px";
}
}
function resetSearch(e) {
if (
e.keyCode === 27 ||
(e.target.id !== "search" &&
e.target.closest("section#search-content") === null)
) {
if (document.getElementById("search-results").innerHTML !== "") {
document.getElementById("search-content").style.display = "none";
document.getElementById("search-results").innerHTML = "";
var inputEle = document.querySelectorAll("input#search");
inputEle.forEach((element) => {
element.value = "";
element.blur();
});
}
}
}
document.onkeyup = function () {
switch (event.keyCode) {
// ESC
case 27:
resetSearch(event);
break;
// ctrl + k
case 75:
if (event.ctrlKey) {
document.getElementById("search").focus();
}
break;
}
};
window.addEventListener("keydown", function (e) {
if (e.keyCode === 75 && e.ctrlKey) {
e.preventDefault();
}
});
// Close search on click outside and on resize
document.addEventListener("click", function (e) {
resetSearch(e);
});
window.addEventListener("resize", function (e) {
alignSearchContent();
});