diff --git a/assets/js/search.js b/assets/js/search.js index 82331109..d48bc262 100644 --- a/assets/js/search.js +++ b/assets/js/search.js @@ -38,50 +38,68 @@ const initSearch = () => { const searchElement = search.querySelector("input"); + const updateSearchButtonLabels = (isOpen) => { + searchButtons.forEach((button) => { + const openLabel = button.dataset.labelOpen; + const closeLabel = button.dataset.labelClose; + const label = isOpen ? closeLabel : openLabel; + button.setAttribute("aria-label", label); + button.setAttribute("title", label); + }); + }; + const closeSearch = () => { search.querySelector(".pagefind-ui__search-clear").click(); overlay.classList.remove("overlay--show", "overlay--show-lv5"); search.classList.remove("o-search--show"); + updateSearchButtonLabels(false); }; - // Scroll to search on click - if (search && isHome) { - search.addEventListener("click", function () { - overlay.classList.add("overlay--show", "overlay--show-lv5"); - search.scrollIntoView({ behavior: "smooth", block: "start" }); - }); - } - - function showSearchOnContentPage() { - search.classList.add("o-search--show"); + const openSearch = () => { overlay.classList.add("overlay--show", "overlay--show-lv5"); + search.classList.add("o-search--show"); searchElement.focus(); search.scrollIntoView({ behavior: "smooth", block: "start" }); - } + updateSearchButtonLabels(true); + }; - function showSearchOnStartPage() { - overlay.classList.add("overlay--show", "overlay--show-lv5"); - searchElement.focus(); - search.scrollIntoView({ behavior: "smooth", block: "start" }); + if (search && isHome) { + searchElement.addEventListener("focus", () => { + openSearch(); + }); + // If focus moves outside the search, close it + search.addEventListener( + "blur", + (e) => { + if ( + e.relatedTarget && + !search.contains(e.relatedTarget) && + !Array.from(searchButtons).includes(e.relatedTarget) + ) { + closeSearch(); + } + }, + true, + ); } - searchButtons.forEach((button) => { - if (isHome) { - button.addEventListener("click", showSearchOnStartPage); - } else { - button.addEventListener("click", showSearchOnContentPage); + const toggleSearch = () => { + if (search.classList.contains("o-search--show")) { + closeSearch(); + return; } + openSearch(); + }; + + searchButtons.forEach((button) => { + button.addEventListener("click", toggleSearch); }); - // Open search on Ctrl + K or Cmd + K + // Toggle search on Ctrl + K or Cmd + K document.addEventListener("keydown", (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "k") { e.preventDefault(); - if (isHome) { - showSearchOnStartPage(); - } else { - showSearchOnContentPage(); - } + toggleSearch(); } }); diff --git a/i18n/de.yaml b/i18n/de.yaml index b8d97ce8..ea8efe6c 100644 --- a/i18n/de.yaml +++ b/i18n/de.yaml @@ -68,7 +68,9 @@ menu: dropdown-label: Verfügbare Betreiber label: Betreiber title: Betreiber-Dropdown öffnen - search: Suche öffnen + search: + close: Suche schließen + open: Suche öffnen theme: switch-to-auto: Zu automatischem Modus wechseln switch-to-dark: Zu dunklem Modus wechseln diff --git a/i18n/en.yaml b/i18n/en.yaml index 9f6f1caf..c55f8f6e 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -67,7 +67,9 @@ menu: dropdown-label: Available operators label: Operators title: Open Operator-Dropdown - search: Open search + search: + close: Close search + open: Open search theme: switch-to-auto: Switch to auto mode switch-to-dark: Switch to dark mode diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 73e25e2d..aa3fd665 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -67,7 +67,9 @@ menu: dropdown-label: Opérateurs disponibles label: Opérateurs title: Ouvrir la liste déroulante de l'opérateur - search: Ouvrir la recherche + search: + close: Fermer la recherche + open: Ouvrir la recherche theme: switch-to-auto: Passer en mode automatique switch-to-dark: Passer en mode sombre diff --git a/layouts/partials/search-button.html b/layouts/partials/search-button.html index b3b5aa09..ed7038af 100644 --- a/layouts/partials/search-button.html +++ b/layouts/partials/search-button.html @@ -1,7 +1,9 @@