diff --git a/static/search/actions.ts b/static/search/actions.ts index 57496a2..c624df3 100644 --- a/static/search/actions.ts +++ b/static/search/actions.ts @@ -1,13 +1,5 @@ -import { - searchInput, - searchDialog, - rememberSearchOpener, - focusLastSearchOpener, - setLastQuery, - getActiveRequestController, - setActiveRequestController, -} from "./state"; -import { setSearchState, setClearButtonState, clearResults } from "./render"; +import { searchInput } from "./state"; +import { setClearButtonState } from "./render"; import { cancelScheduledFetch, fetchSearchItems } from "./fetch"; export const openSearch = (): void => { @@ -16,37 +8,9 @@ export const openSearch = (): void => { return; } - rememberSearchOpener(); - if (searchDialog) { - setSearchState(true); - searchInput.value = ""; - setLastQuery(""); - cancelScheduledFetch(); - setClearButtonState(false); - clearResults(); - } searchInput.focus(); }; -export const closeSearch = (): void => { - if (!searchDialog || !searchInput) { - return; - } - - setSearchState(false); - cancelScheduledFetch(); - const activeRequestController = getActiveRequestController(); - if (activeRequestController) { - activeRequestController.abort(); - setActiveRequestController(undefined); - } - searchInput.value = ""; - setLastQuery(""); - setClearButtonState(false); - clearResults(); - focusLastSearchOpener(); -}; - export const clearSearchInput = (): void => { if (!searchInput) { return; diff --git a/static/search/overlay.ts b/static/search/overlay.ts index 96d386a..6940098 100644 --- a/static/search/overlay.ts +++ b/static/search/overlay.ts @@ -5,23 +5,13 @@ import { searchResults, searchRoot, searchPage, - searchOpenButtons, - searchCloseButtons, searchClearButtons, - searchDialog, getSelectedIndex, - isSearchOpen, isTypingTarget, } from "./state"; -import { setShortcutHints, selectItem, runSelectedItem, renderEmptyState } from "./render"; +import { selectItem, runSelectedItem, renderEmptyState } from "./render"; import { scheduleFetch, fetchSearchItems, onResultsScroll } from "./fetch"; -import { openSearch, closeSearch, clearSearchInput } from "./actions"; - -const onDocumentClick = (event: MouseEvent): void => { - if (event.target === searchDialog) { - closeSearch(); - } -}; +import { openSearch, clearSearchInput } from "./actions"; const onInputKeydown = (event: KeyboardEvent): void => { if (event.key === "ArrowDown") { @@ -49,8 +39,6 @@ const onDocumentKeydown = (event: KeyboardEvent): void => { event.preventDefault(); if (searchPage) { searchInput?.focus(); - } else if (isSearchOpen()) { - closeSearch(); } else { openSearch(); } @@ -66,11 +54,6 @@ const onDocumentKeydown = (event: KeyboardEvent): void => { } return; } - - if (event.key === "Escape" && isSearchOpen()) { - event.preventDefault(); - closeSearch(); - } }; export const initSearchOverlay = (): void => { @@ -83,22 +66,13 @@ export const initSearchOverlay = (): void => { return; } - setShortcutHints(); - searchOpenButtons.forEach((button) => { - button.addEventListener("click", openSearch); - }); - searchCloseButtons.forEach((button) => { - button.addEventListener("click", closeSearch); - }); searchClearButtons.forEach((button) => { button.addEventListener("click", clearSearchInput); }); searchInput.addEventListener("input", scheduleFetch); searchInput.addEventListener("keydown", onInputKeydown); searchResults.addEventListener("scroll", onResultsScroll); - document.addEventListener("click", onDocumentClick); document.addEventListener("keydown", onDocumentKeydown); - searchDialog?.setAttribute("aria-hidden", "true"); const initialQuery = new URLSearchParams(window.location.search).get("q")?.trim() || ""; if (initialQuery) { diff --git a/static/search/render.ts b/static/search/render.ts index 5dc5cde..7561f30 100644 --- a/static/search/render.ts +++ b/static/search/render.ts @@ -3,8 +3,6 @@ import type { CommandPaletteItem } from "./state"; import { searchResults, searchClearButtons, - shortcutHints, - searchDialog, responseCache, getResultItems, setResultItems, @@ -17,26 +15,8 @@ import { groupOrder, maxPosterImageRetries, isSafeImageUrl, - isMac, } from "./state"; -export const setSearchState = (open: boolean): void => { - if (!searchDialog) { - return; - } - - searchDialog.classList.toggle("hidden", !open); - searchDialog.classList.toggle("flex", open); - searchDialog.setAttribute("aria-hidden", open ? "false" : "true"); - document.body.classList.toggle("overflow-hidden", open); -}; - -export const setShortcutHints = (): void => { - shortcutHints.forEach((hint) => { - hint.textContent = isMac() ? "⌘P" : "Ctrl P"; - }); -}; - export const setClearButtonState = (hasQuery: boolean): void => { searchClearButtons.forEach((button) => { button.classList.toggle("opacity-0", !hasQuery); diff --git a/static/search/state.ts b/static/search/state.ts index 6cce06c..d984c8b 100644 --- a/static/search/state.ts +++ b/static/search/state.ts @@ -23,19 +23,13 @@ export const searchInput = document.getElementById( export const searchResults = document.querySelector( "[data-command-palette-results]", ) as HTMLElement | null; -export const searchDialog = document.querySelector( - "[data-command-palette-dialog]", -) as HTMLElement | null; export const searchRoot = document.querySelector( "[data-command-palette-root]", ) as HTMLElement | null; export const searchPage = document.querySelector( "[data-command-palette-page]", ) as HTMLElement | null; -export const searchOpenButtons = document.querySelectorAll("[data-command-palette-open]"); -export const searchCloseButtons = document.querySelectorAll("[data-command-palette-close]"); export const searchClearButtons = document.querySelectorAll("[data-command-palette-clear]"); -export const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]"); let resultItems: CommandPaletteItem[] = []; let selectedIndex = 0; @@ -175,8 +169,6 @@ export const isTypingTarget = (target: EventTarget | null): boolean => target instanceof HTMLSelectElement || (target instanceof HTMLElement && target.isContentEditable); -export const isSearchOpen = (): boolean => searchDialog?.classList.contains("flex") ?? false; - export const isSafeImageUrl = (rawUrl?: string): boolean => { if (!rawUrl) { return false;