hubl/src/js/hd-app.js

document.addEventListener("DOMContentLoaded", function(event) {
  // Constants declaration
  const navBar        = document.querySelector("#navbar");
  const searchBar     = navBar.querySelector("#search-bar");
  const searchView    = document.querySelector("#search-view");
  const searchInput   = searchBar.querySelector("#search-input");


  // 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();
      openSearchBar();
    }

    else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
      closeSearchBar();
    }
  });


  // 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");
  }


  // 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;
    });
  });
});