diff options
Diffstat (limited to 'layouts/_partials/components')
| -rw-r--r-- | layouts/_partials/components/global-search.html | 87 |
1 files changed, 0 insertions, 87 deletions
diff --git a/layouts/_partials/components/global-search.html b/layouts/_partials/components/global-search.html deleted file mode 100644 index 674ecdcc..00000000 --- a/layouts/_partials/components/global-search.html +++ /dev/null @@ -1,87 +0,0 @@ -<style> -#global-search-overlay.shown { - z-index: 10!important; - opacity: 1!important; -} - -#global-search #pagefind input { - outline: none -} - -#global-search.shown { - z-index: 15!important; - display: flex!important; -} -</style> - -<div id="global-search-container"> - <div id="global-search" - class="fixed -z-10 hidden top-0 left-0 right-0 bottom-0 items-center justify-center"> - <div id="global-search-close" class="absolute top-0 right-0 px-4 text-12 cursor-pointer">×</div> - <!-- Pagefind Search --> - <div id="pagefind" class="max-h-[90vh] overflow-y-auto w-full m-4 md:w-[600px]"></div> - <script> - window.addEventListener('DOMContentLoaded', () => { - new PagefindUI({ element: "#pagefind", showSubResults: true }); - }); - </script> - </div> - - <div id="global-search-overlay" - class="fixed top-0 left-0 w-full h-full bg-[rgba(250,250,250,0.75)] dark:bg-[rgba(30,30,30,0.75)] - backdrop-blur-md -z-10 opacity-0 transition-opacity duration-300"> - </div> - - <script> - (() => { - const search = document.getElementById("global-search"); - const overlay = document.getElementById("global-search-overlay"); - - const turnOn = () => { - search.classList.add("shown"); - search.classList.add("animation-fade-in"); - overlay.classList.add("shown"); - - umami.track('🔍 Open search panel') - }; - const turnOff = () => { - search.classList.remove("shown"); - search.classList.remove("animation-fade-in"); - overlay.classList.remove("shown"); - }; - - window.addEventListener("keydown", (event) => { - if (event.key === 'k' && (event.metaKey || event.ctrlKey)) { - event.preventDefault(); - // Open the popup window - if (search.classList.contains("shown")) { - turnOff() - } else { - turnOn(); - } - // Focus on the search input - const input = search.querySelector("input"); - input.focus(); - } - - if (event.key === 'Escape') { - turnOff(); - } - }); - - // trigger by clicking instruction text - // to allow mobile users to search - const searchInstruction = document.getElementById("search-instruction"); - if (searchInstruction) { - searchInstruction.addEventListener("click", turnOn); - } - - // double-click to turn off search - // in case esc and ctrl/cmd+k cannot be used - search.addEventListener("dblclick", turnOff); - - const closeButton = document.getElementById("global-search-close"); - closeButton.addEventListener("click", turnOff); - })(); - </script> -</div> |
