chore: remove dead search dialog overlay code
This commit is contained in:
@@ -1,13 +1,5 @@
|
|||||||
import {
|
import { searchInput } from "./state";
|
||||||
searchInput,
|
import { setClearButtonState } from "./render";
|
||||||
searchDialog,
|
|
||||||
rememberSearchOpener,
|
|
||||||
focusLastSearchOpener,
|
|
||||||
setLastQuery,
|
|
||||||
getActiveRequestController,
|
|
||||||
setActiveRequestController,
|
|
||||||
} from "./state";
|
|
||||||
import { setSearchState, setClearButtonState, clearResults } from "./render";
|
|
||||||
import { cancelScheduledFetch, fetchSearchItems } from "./fetch";
|
import { cancelScheduledFetch, fetchSearchItems } from "./fetch";
|
||||||
|
|
||||||
export const openSearch = (): void => {
|
export const openSearch = (): void => {
|
||||||
@@ -16,37 +8,9 @@ export const openSearch = (): void => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
rememberSearchOpener();
|
|
||||||
if (searchDialog) {
|
|
||||||
setSearchState(true);
|
|
||||||
searchInput.value = "";
|
|
||||||
setLastQuery("");
|
|
||||||
cancelScheduledFetch();
|
|
||||||
setClearButtonState(false);
|
|
||||||
clearResults();
|
|
||||||
}
|
|
||||||
searchInput.focus();
|
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 => {
|
export const clearSearchInput = (): void => {
|
||||||
if (!searchInput) {
|
if (!searchInput) {
|
||||||
return;
|
return;
|
||||||
|
|||||||
@@ -5,23 +5,13 @@ import {
|
|||||||
searchResults,
|
searchResults,
|
||||||
searchRoot,
|
searchRoot,
|
||||||
searchPage,
|
searchPage,
|
||||||
searchOpenButtons,
|
|
||||||
searchCloseButtons,
|
|
||||||
searchClearButtons,
|
searchClearButtons,
|
||||||
searchDialog,
|
|
||||||
getSelectedIndex,
|
getSelectedIndex,
|
||||||
isSearchOpen,
|
|
||||||
isTypingTarget,
|
isTypingTarget,
|
||||||
} from "./state";
|
} from "./state";
|
||||||
import { setShortcutHints, selectItem, runSelectedItem, renderEmptyState } from "./render";
|
import { selectItem, runSelectedItem, renderEmptyState } from "./render";
|
||||||
import { scheduleFetch, fetchSearchItems, onResultsScroll } from "./fetch";
|
import { scheduleFetch, fetchSearchItems, onResultsScroll } from "./fetch";
|
||||||
import { openSearch, closeSearch, clearSearchInput } from "./actions";
|
import { openSearch, clearSearchInput } from "./actions";
|
||||||
|
|
||||||
const onDocumentClick = (event: MouseEvent): void => {
|
|
||||||
if (event.target === searchDialog) {
|
|
||||||
closeSearch();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onInputKeydown = (event: KeyboardEvent): void => {
|
const onInputKeydown = (event: KeyboardEvent): void => {
|
||||||
if (event.key === "ArrowDown") {
|
if (event.key === "ArrowDown") {
|
||||||
@@ -49,8 +39,6 @@ const onDocumentKeydown = (event: KeyboardEvent): void => {
|
|||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
if (searchPage) {
|
if (searchPage) {
|
||||||
searchInput?.focus();
|
searchInput?.focus();
|
||||||
} else if (isSearchOpen()) {
|
|
||||||
closeSearch();
|
|
||||||
} else {
|
} else {
|
||||||
openSearch();
|
openSearch();
|
||||||
}
|
}
|
||||||
@@ -66,11 +54,6 @@ const onDocumentKeydown = (event: KeyboardEvent): void => {
|
|||||||
}
|
}
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (event.key === "Escape" && isSearchOpen()) {
|
|
||||||
event.preventDefault();
|
|
||||||
closeSearch();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const initSearchOverlay = (): void => {
|
export const initSearchOverlay = (): void => {
|
||||||
@@ -83,22 +66,13 @@ export const initSearchOverlay = (): void => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
setShortcutHints();
|
|
||||||
searchOpenButtons.forEach((button) => {
|
|
||||||
button.addEventListener("click", openSearch);
|
|
||||||
});
|
|
||||||
searchCloseButtons.forEach((button) => {
|
|
||||||
button.addEventListener("click", closeSearch);
|
|
||||||
});
|
|
||||||
searchClearButtons.forEach((button) => {
|
searchClearButtons.forEach((button) => {
|
||||||
button.addEventListener("click", clearSearchInput);
|
button.addEventListener("click", clearSearchInput);
|
||||||
});
|
});
|
||||||
searchInput.addEventListener("input", scheduleFetch);
|
searchInput.addEventListener("input", scheduleFetch);
|
||||||
searchInput.addEventListener("keydown", onInputKeydown);
|
searchInput.addEventListener("keydown", onInputKeydown);
|
||||||
searchResults.addEventListener("scroll", onResultsScroll);
|
searchResults.addEventListener("scroll", onResultsScroll);
|
||||||
document.addEventListener("click", onDocumentClick);
|
|
||||||
document.addEventListener("keydown", onDocumentKeydown);
|
document.addEventListener("keydown", onDocumentKeydown);
|
||||||
searchDialog?.setAttribute("aria-hidden", "true");
|
|
||||||
|
|
||||||
const initialQuery = new URLSearchParams(window.location.search).get("q")?.trim() || "";
|
const initialQuery = new URLSearchParams(window.location.search).get("q")?.trim() || "";
|
||||||
if (initialQuery) {
|
if (initialQuery) {
|
||||||
|
|||||||
@@ -3,8 +3,6 @@ import type { CommandPaletteItem } from "./state";
|
|||||||
import {
|
import {
|
||||||
searchResults,
|
searchResults,
|
||||||
searchClearButtons,
|
searchClearButtons,
|
||||||
shortcutHints,
|
|
||||||
searchDialog,
|
|
||||||
responseCache,
|
responseCache,
|
||||||
getResultItems,
|
getResultItems,
|
||||||
setResultItems,
|
setResultItems,
|
||||||
@@ -17,26 +15,8 @@ import {
|
|||||||
groupOrder,
|
groupOrder,
|
||||||
maxPosterImageRetries,
|
maxPosterImageRetries,
|
||||||
isSafeImageUrl,
|
isSafeImageUrl,
|
||||||
isMac,
|
|
||||||
} from "./state";
|
} 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 => {
|
export const setClearButtonState = (hasQuery: boolean): void => {
|
||||||
searchClearButtons.forEach((button) => {
|
searchClearButtons.forEach((button) => {
|
||||||
button.classList.toggle("opacity-0", !hasQuery);
|
button.classList.toggle("opacity-0", !hasQuery);
|
||||||
|
|||||||
@@ -23,19 +23,13 @@ export const searchInput = document.getElementById(
|
|||||||
export const searchResults = document.querySelector(
|
export const searchResults = document.querySelector(
|
||||||
"[data-command-palette-results]",
|
"[data-command-palette-results]",
|
||||||
) as HTMLElement | null;
|
) as HTMLElement | null;
|
||||||
export const searchDialog = document.querySelector(
|
|
||||||
"[data-command-palette-dialog]",
|
|
||||||
) as HTMLElement | null;
|
|
||||||
export const searchRoot = document.querySelector(
|
export const searchRoot = document.querySelector(
|
||||||
"[data-command-palette-root]",
|
"[data-command-palette-root]",
|
||||||
) as HTMLElement | null;
|
) as HTMLElement | null;
|
||||||
export const searchPage = document.querySelector(
|
export const searchPage = document.querySelector(
|
||||||
"[data-command-palette-page]",
|
"[data-command-palette-page]",
|
||||||
) as HTMLElement | null;
|
) 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 searchClearButtons = document.querySelectorAll("[data-command-palette-clear]");
|
||||||
export const shortcutHints = document.querySelectorAll("[data-command-palette-shortcut]");
|
|
||||||
|
|
||||||
let resultItems: CommandPaletteItem[] = [];
|
let resultItems: CommandPaletteItem[] = [];
|
||||||
let selectedIndex = 0;
|
let selectedIndex = 0;
|
||||||
@@ -175,8 +169,6 @@ export const isTypingTarget = (target: EventTarget | null): boolean =>
|
|||||||
target instanceof HTMLSelectElement ||
|
target instanceof HTMLSelectElement ||
|
||||||
(target instanceof HTMLElement && target.isContentEditable);
|
(target instanceof HTMLElement && target.isContentEditable);
|
||||||
|
|
||||||
export const isSearchOpen = (): boolean => searchDialog?.classList.contains("flex") ?? false;
|
|
||||||
|
|
||||||
export const isSafeImageUrl = (rawUrl?: string): boolean => {
|
export const isSafeImageUrl = (rawUrl?: string): boolean => {
|
||||||
if (!rawUrl) {
|
if (!rawUrl) {
|
||||||
return false;
|
return false;
|
||||||
|
|||||||
Reference in New Issue
Block a user