35 lines
1.2 KiB
JavaScript
35 lines
1.2 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
|
|
// Constants declaration
|
|
const navBar = document.querySelector("#navbar");
|
|
const searchBar = navBar.querySelector("#search-bar");
|
|
const searchView = document.querySelector("#search-view");
|
|
|
|
|
|
// Shortcuts
|
|
document.querySelector("body").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();
|
|
}
|
|
|
|
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
|
|
navBar.classList.remove("search-mode");
|
|
}
|
|
});
|
|
|
|
|
|
// Open the search bar via touch / click
|
|
searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
|
|
function openSearchBar(e) {
|
|
navBar.classList.add("search-mode");
|
|
searchBar.querySelector("#search-input").focus();
|
|
searchView.classList.add("search-mode");
|
|
}
|
|
searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
|
|
function closeSearchBar(e) {
|
|
navBar.classList.remove("search-mode");
|
|
searchView.classList.remove("search-mode");
|
|
}
|
|
});
|