62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
|
|
// Constants declaration
|
|
const navBar = document.querySelector("#navbar");
|
|
const searchBar = document.querySelector("#search-bar");
|
|
const searchView = document.querySelector("#search-view");
|
|
const searchInput = searchBar.querySelector("#search-input");
|
|
const btnToggle = document.querySelector(".btn-toggle");
|
|
|
|
|
|
// Shortcuts
|
|
window.addEventListener("keydown", function(e) {
|
|
// CTRL + K triggers the search feature
|
|
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
openSearchBar();
|
|
}
|
|
|
|
// Escape key
|
|
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
|
|
closeSearchBar();
|
|
}
|
|
});
|
|
|
|
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
|
|
|
|
function openSearchBar(e) {
|
|
navBar.classList.add("search-mode");
|
|
searchBar.querySelector("#search-input").focus();
|
|
searchView.classList.add("search-mode");
|
|
}
|
|
|
|
function closeSearchBar(e) {
|
|
navBar.classList.remove("search-mode");
|
|
searchView.classList.remove("search-mode");
|
|
}
|
|
|
|
function emptySearchBar(e) {
|
|
searchInput.value = '';
|
|
openSearchBar();
|
|
searchInput.focus;
|
|
}
|
|
|
|
|
|
// Synchronizes the search input with the <ldp-form>s
|
|
searchInput.addEventListener("keyup", (e) => {
|
|
searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
|
|
el.value = searchInput.value;
|
|
});
|
|
});
|
|
|
|
|
|
btnToggle.addEventListener('click', e => {
|
|
navBar.classList.toggle('open');
|
|
e.stopPropagation();
|
|
});
|
|
|
|
window.addEventListener('click', e=>{
|
|
navBar.classList.remove('open');
|
|
});
|
|
});
|