feat: add search dialog with keyboard shortcut
This commit is contained in:
@@ -14,6 +14,9 @@ const searchInput = document.getElementById('search-input') as HTMLInputElement
|
||||
const searchDropdown = document.querySelector(
|
||||
'[data-search-results-container]'
|
||||
) as HTMLElement | null;
|
||||
const searchDialog = document.querySelector('[data-search-dialog]') as HTMLElement | null;
|
||||
const searchOpenButtons = document.querySelectorAll('[data-search-open]');
|
||||
const searchCloseButtons = document.querySelectorAll('[data-search-close]');
|
||||
|
||||
const isSafeImageUrl = (rawUrl?: string): boolean => {
|
||||
if (!rawUrl || typeof rawUrl !== 'string') {
|
||||
@@ -37,22 +40,45 @@ const clearSearchResults = (): void => {
|
||||
searchDropdown.replaceChildren();
|
||||
};
|
||||
|
||||
const openSearchDialog = (): void => {
|
||||
if (!searchDialog || !searchInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
searchDialog.classList.remove('hidden');
|
||||
searchDialog.classList.add('flex');
|
||||
searchDialog.setAttribute('aria-hidden', 'false');
|
||||
searchInput.focus();
|
||||
};
|
||||
|
||||
const closeSearchDialog = (): void => {
|
||||
if (!searchDialog || !searchInput) {
|
||||
return;
|
||||
}
|
||||
|
||||
searchDialog.classList.add('hidden');
|
||||
searchDialog.classList.remove('flex');
|
||||
searchDialog.setAttribute('aria-hidden', 'true');
|
||||
searchInput.value = '';
|
||||
clearSearchResults();
|
||||
};
|
||||
|
||||
const buildSearchResultItem = (result: QuickSearchResult): HTMLAnchorElement => {
|
||||
const item = document.createElement('a');
|
||||
item.className =
|
||||
'flex items-start gap-3 px-3 py-2 text-inherit no-underline hover:bg-(--panel-soft) hover:no-underline';
|
||||
'flex items-start gap-3 px-3 py-2 text-foreground no-underline hover:bg-surface-hover hover:no-underline';
|
||||
item.setAttribute('href', '/anime/' + encodeURIComponent(String(result.id || '')));
|
||||
|
||||
if (isSafeImageUrl(result.image)) {
|
||||
const img = document.createElement('img');
|
||||
img.className = 'aspect-2/3 w-[42px] shrink-0 object-cover bg-(--surface-thumb)';
|
||||
img.className = 'aspect-2/3 w-[42px] shrink-0 object-cover bg-background-surface';
|
||||
img.setAttribute('src', result.image || '');
|
||||
img.setAttribute('alt', String(result.title || ''));
|
||||
item.appendChild(img);
|
||||
} else {
|
||||
const noImage = document.createElement('div');
|
||||
noImage.className =
|
||||
'aspect-2/3 w-[42px] shrink-0 bg-(--surface-thumb) text-[0] text-transparent';
|
||||
'aspect-2/3 w-[42px] shrink-0 bg-background-surface text-[0] text-transparent';
|
||||
noImage.textContent = 'no image';
|
||||
item.appendChild(noImage);
|
||||
}
|
||||
@@ -61,12 +87,12 @@ const buildSearchResultItem = (result: QuickSearchResult): HTMLAnchorElement =>
|
||||
info.className = 'grid min-w-0 gap-px';
|
||||
|
||||
const itemTitle = document.createElement('div');
|
||||
itemTitle.className = 'line-clamp-1 text-[0.86rem] leading-[1.3] text-(--text)';
|
||||
itemTitle.className = 'line-clamp-1 text-[0.86rem] leading-[1.3] text-foreground';
|
||||
itemTitle.textContent = String(result.title || '');
|
||||
info.appendChild(itemTitle);
|
||||
|
||||
const itemType = document.createElement('div');
|
||||
itemType.className = 'text-[0.67rem] text-(--text-faint)';
|
||||
itemType.className = 'text-[0.67rem] text-foreground-muted';
|
||||
itemType.textContent = String(result.type || '');
|
||||
info.appendChild(itemType);
|
||||
|
||||
@@ -88,7 +114,7 @@ const renderQuickSearchResults = (query: string, results: QuickSearchResult[]):
|
||||
searchResults.className = 'grid';
|
||||
|
||||
const title = document.createElement('div');
|
||||
title.className = 'px-3 py-2 text-[0.68rem] text-(--text-faint)';
|
||||
title.className = 'px-3 py-2 text-[0.68rem] text-foreground-muted';
|
||||
title.textContent = 'Anime';
|
||||
searchResults.appendChild(title);
|
||||
|
||||
@@ -98,9 +124,9 @@ const renderQuickSearchResults = (query: string, results: QuickSearchResult[]):
|
||||
|
||||
const viewAll = document.createElement('a');
|
||||
viewAll.className =
|
||||
'bg-(--surface-search-view-all) px-3 py-2 text-center text-[0.8rem] text-(--text-muted) no-underline hover:bg-(--panel-soft) hover:text-(--text) hover:no-underline';
|
||||
viewAll.setAttribute('href', '/search?q=' + encodeURIComponent(query));
|
||||
viewAll.textContent = 'View all results for ' + query;
|
||||
'block bg-background-surface px-3 py-2 text-center text-[0.8rem] text-foreground-muted no-underline hover:bg-surface-hover hover:text-foreground hover:no-underline';
|
||||
viewAll.setAttribute('href', '/browse?q=' + encodeURIComponent(query));
|
||||
viewAll.textContent = 'Browse all results for ' + query;
|
||||
searchResults.appendChild(viewAll);
|
||||
|
||||
searchDropdown.replaceChildren(searchResults);
|
||||
@@ -151,8 +177,27 @@ const onDocumentClick = (event: MouseEvent): void => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!target.closest('[data-search-root]')) {
|
||||
clearSearchResults();
|
||||
if (target.matches('[data-search-dialog]')) {
|
||||
closeSearchDialog();
|
||||
}
|
||||
};
|
||||
|
||||
const onDocumentKeydown = (event: KeyboardEvent): void => {
|
||||
const target = event.target;
|
||||
const isTyping =
|
||||
target instanceof HTMLInputElement ||
|
||||
target instanceof HTMLTextAreaElement ||
|
||||
target instanceof HTMLSelectElement ||
|
||||
(target instanceof HTMLElement && target.isContentEditable);
|
||||
|
||||
if (event.key === 'Escape') {
|
||||
closeSearchDialog();
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === '/' && !isTyping) {
|
||||
event.preventDefault();
|
||||
openSearchDialog();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -166,9 +211,16 @@ const initQuickSearch = (): void => {
|
||||
return;
|
||||
}
|
||||
|
||||
searchOpenButtons.forEach((button) => {
|
||||
button.addEventListener('click', openSearchDialog);
|
||||
});
|
||||
searchCloseButtons.forEach((button) => {
|
||||
button.addEventListener('click', closeSearchDialog);
|
||||
});
|
||||
searchInput.addEventListener('input', onSearchInput);
|
||||
searchInput.addEventListener('blur', onSearchBlur);
|
||||
document.addEventListener('click', onDocumentClick);
|
||||
document.addEventListener('keydown', onDocumentKeydown);
|
||||
};
|
||||
|
||||
initQuickSearch();
|
||||
|
||||
@@ -10,6 +10,40 @@
|
||||
|
||||
<nav class="bg-background-sidebar h-full border-r border-border">
|
||||
<div class="flex flex-col">
|
||||
<button type="button" class="group relative flex items-center px-7 py-3 text-left transition-colors hover:bg-surface-hover" data-search-open {{if $isCollapsed}}title="Search"{{end}}>
|
||||
<svg class="size-6 shrink-0 text-foreground-muted transition-colors duration-200 group-hover:text-foreground" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
<div class="nav-label-container grid grid-cols-[1fr] opacity-100 ml-4">
|
||||
<div class="overflow-hidden min-w-0">
|
||||
<span class="whitespace-nowrap text-sm font-medium text-foreground-muted transition-colors duration-200 group-hover:text-foreground">Search</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-search-dialog aria-hidden="true">
|
||||
<form action="/browse" method="GET" class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border" data-search-root role="search">
|
||||
<label for="search-input" class="sr-only">Search anime</label>
|
||||
<div class="flex items-center border-b border-border">
|
||||
<svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8" />
|
||||
<path d="m21 21-4.35-4.35" />
|
||||
</svg>
|
||||
<input
|
||||
id="search-input"
|
||||
name="q"
|
||||
type="search"
|
||||
autocomplete="off"
|
||||
placeholder="Search anime"
|
||||
class="min-w-0 flex-1 bg-transparent py-4 pr-4 text-base text-foreground placeholder:text-foreground-muted outline-none"
|
||||
/>
|
||||
<button type="button" class="mr-3 px-2 py-1 text-xs text-foreground-muted ring-1 ring-border transition-colors hover:text-foreground" data-search-close>Esc</button>
|
||||
</div>
|
||||
<div data-search-results-container class="max-h-[60vh] overflow-y-auto"></div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{/* Home */}}
|
||||
{{$isActive := eq $currentPath "/"}}
|
||||
<a href="/" class="group relative flex items-center px-7 py-3 transition-colors hover:bg-surface-hover" {{if $isCollapsed}}title="Home"{{end}}>
|
||||
|
||||
Reference in New Issue
Block a user