john-okeefe
0af319fef9
- Modified package.json build:ts to copy htmx.min.js from node_modules to web/static/ - This fixes the 404 error for /static/htmx.min.js that occurred after ESBuild migration - Added htmx.min.js to static files See ESBUILD_MIGRATION_PLAN.md for migration context.
267 lines
9.9 KiB
JavaScript
267 lines
9.9 KiB
JavaScript
let searchInputTimeout = null;
|
|
const SEARCH_DEBOUNCE_MS = 300;
|
|
const SEARCH_MIN_CHARS = 2;
|
|
function initializeSearch() {
|
|
const searchInput = document.getElementById("header-search");
|
|
if (!searchInput) {
|
|
console.warn("Search input not found");
|
|
return;
|
|
}
|
|
searchInput.addEventListener("input", handleSearchInput);
|
|
searchInput.addEventListener("keydown", handleSearchKeydown);
|
|
searchInput.addEventListener("focus", () => {
|
|
if (searchInput.value.length >= SEARCH_MIN_CHARS) {
|
|
performSearch(searchInput.value);
|
|
}
|
|
});
|
|
document.addEventListener("click", (e) => {
|
|
const searchResults = document.getElementById("search-results");
|
|
const searchInputEl = document.getElementById("header-search");
|
|
if (searchResults &&
|
|
!searchResults.contains(e.target) &&
|
|
e.target !== searchInputEl) {
|
|
hideSearchResults();
|
|
}
|
|
});
|
|
}
|
|
function handleSearchInput(e) {
|
|
const target = e.target;
|
|
const query = target.value.trim();
|
|
if (searchInputTimeout) {
|
|
clearTimeout(searchInputTimeout);
|
|
}
|
|
if (query.length < SEARCH_MIN_CHARS) {
|
|
hideSearchResults();
|
|
return;
|
|
}
|
|
searchInputTimeout = setTimeout(() => {
|
|
performSearch(query);
|
|
}, SEARCH_DEBOUNCE_MS);
|
|
}
|
|
function handleSearchKeydown(e) {
|
|
const searchResults = document.getElementById("search-results");
|
|
if (!searchResults || searchResults.classList.contains("hidden")) {
|
|
return;
|
|
}
|
|
const items = searchResults.querySelectorAll(".search-result-item");
|
|
const currentIndex = parseInt(searchResults.dataset.selectedIndex || "-1");
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
const nextIndex = Math.min(currentIndex + 1, items.length - 1);
|
|
selectSearchResult(items, nextIndex);
|
|
}
|
|
else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
const prevIndex = Math.max(currentIndex - 1, -1);
|
|
selectSearchResult(items, prevIndex);
|
|
}
|
|
else if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
if (currentIndex >= 0 && items[currentIndex]) {
|
|
const link = items[currentIndex].querySelector("a");
|
|
if (link)
|
|
link.click();
|
|
}
|
|
}
|
|
else if (e.key === "Escape") {
|
|
hideSearchResults();
|
|
}
|
|
}
|
|
function selectSearchResult(items, index) {
|
|
items.forEach((item, i) => {
|
|
if (i === index) {
|
|
item.classList.add("bg-opacity-80");
|
|
}
|
|
else {
|
|
item.classList.remove("bg-opacity-80");
|
|
}
|
|
});
|
|
const searchResults = document.getElementById("search-results");
|
|
if (searchResults) {
|
|
searchResults.dataset.selectedIndex = index.toString();
|
|
}
|
|
}
|
|
function performSearch(query) {
|
|
const token = localStorage.getItem("token");
|
|
if (!token) {
|
|
console.warn("No authentication token found");
|
|
return;
|
|
}
|
|
showSearchLoading();
|
|
fetch(`/api/media-items/search?q=${encodeURIComponent(query)}`, {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
})
|
|
.then((response) => {
|
|
if (response.status === 404) {
|
|
return { error: "no results found", results: [] };
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
hideSearchLoading();
|
|
if (data && "error" in data && data.error === "no results found") {
|
|
showNoResults(query);
|
|
}
|
|
else if (Array.isArray(data) && data.length > 0) {
|
|
showSearchResults(data, query);
|
|
}
|
|
else if (Array.isArray(data)) {
|
|
showNoResults(query);
|
|
}
|
|
else {
|
|
showNoResults(query);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
hideSearchLoading();
|
|
console.error("Search error:", error);
|
|
showSearchError();
|
|
});
|
|
}
|
|
function showSearchLoading() {
|
|
createSearchResultsContainer();
|
|
const searchResults = document.getElementById("search-results");
|
|
if (!searchResults)
|
|
return;
|
|
searchResults.innerHTML = `
|
|
<div class="p-4 text-center" style="color: var(--text-secondary)">
|
|
<div class="inline-block animate-spin rounded-full h-6 w-6 border-b-2" style="border-color: var(--accent)"></div>
|
|
<p class="mt-2 text-sm">Searching...</p>
|
|
</div>
|
|
`;
|
|
searchResults.classList.remove("hidden");
|
|
}
|
|
function hideSearchLoading() { }
|
|
function showSearchResults(results, query) {
|
|
createSearchResultsContainer();
|
|
const searchResults = document.getElementById("search-results");
|
|
if (!searchResults)
|
|
return;
|
|
searchResults.dataset.selectedIndex = "-1";
|
|
const libraryIconMap = {
|
|
ebooks: "📚",
|
|
comics: "📖",
|
|
manga: "🗾",
|
|
};
|
|
let html = `
|
|
<div class="p-3 border-b" style="border-color: var(--border)">
|
|
<p class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-secondary)">
|
|
${results.length} result${results.length !== 1 ? "s" : ""} for "${searchEscapeHtml(query)}"
|
|
</p>
|
|
</div>
|
|
<div class="max-h-96 overflow-y-auto">
|
|
`;
|
|
results.forEach((item, index) => {
|
|
const icon = libraryIconMap[item.library_type_name] || "📁";
|
|
const titleHtml = highlightMatch(item.title, query);
|
|
const authorHtml = item.author ? highlightMatch(item.author, query) : "";
|
|
html += `
|
|
<div class="search-result-item p-3 border-b hover:bg-opacity-50 transition-colors cursor-pointer"
|
|
style="border-color: var(--border); background-color: var(--bg-secondary)"
|
|
data-index="${index}">
|
|
<a href="/bookshelf"
|
|
class="block"
|
|
onclick="window.selectLibraryAndBook('${item.library_id}', '${item.id}')">
|
|
<div class="flex items-start space-x-3">
|
|
<div class="text-2xl">${icon}</div>
|
|
<div class="flex-1 min-w-0">
|
|
<h4 class="text-sm font-medium truncate" style="color: var(--text-primary)">
|
|
${titleHtml}
|
|
</h4>
|
|
${authorHtml ? `<p class="text-xs truncate" style="color: var(--text-secondary)">${authorHtml}</p>` : ""}
|
|
<p class="text-xs mt-1" style="color: var(--text-secondary)">
|
|
${searchEscapeHtml(item.library_name)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
`;
|
|
});
|
|
html += `
|
|
</div>
|
|
<div class="p-2 border-t text-center" style="border-color: var(--border)">
|
|
<p class="text-xs" style="color: var(--text-secondary)">
|
|
Press <kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">↑↓</kbd> to navigate,
|
|
<kbd class="px-1 py-0.5 rounded" style="background-color: var(--bg-primary)">Enter</kbd> to select
|
|
</p>
|
|
</div>
|
|
`;
|
|
searchResults.innerHTML = html;
|
|
searchResults.classList.remove("hidden");
|
|
}
|
|
function showNoResults(query) {
|
|
createSearchResultsContainer();
|
|
const searchResults = document.getElementById("search-results");
|
|
if (!searchResults)
|
|
return;
|
|
searchResults.innerHTML = `
|
|
<div class="p-4 text-center">
|
|
<div class="text-4xl mb-2">🔍</div>
|
|
<p class="text-sm" style="color: var(--text-primary)">No results found for "${searchEscapeHtml(query)}"</p>
|
|
<p class="text-xs mt-1" style="color: var(--text-secondary)">Try different keywords</p>
|
|
</div>
|
|
`;
|
|
searchResults.classList.remove("hidden");
|
|
}
|
|
function showSearchError() {
|
|
createSearchResultsContainer();
|
|
const searchResults = document.getElementById("search-results");
|
|
if (!searchResults)
|
|
return;
|
|
searchResults.innerHTML = `
|
|
<div class="p-4 text-center">
|
|
<div class="text-4xl mb-2">⚠️</div>
|
|
<p class="text-sm" style="color: var(--text-primary)">Search error</p>
|
|
<p class="text-xs mt-1" style="color: var(--text-secondary)">Please try again</p>
|
|
</div>
|
|
`;
|
|
searchResults.classList.remove("hidden");
|
|
}
|
|
function hideSearchResults() {
|
|
const searchResults = document.getElementById("search-results");
|
|
if (searchResults) {
|
|
searchResults.classList.add("hidden");
|
|
}
|
|
}
|
|
function createSearchResultsContainer() {
|
|
let searchResults = document.getElementById("search-results");
|
|
if (!searchResults) {
|
|
searchResults = document.createElement("div");
|
|
searchResults.id = "search-results";
|
|
searchResults.className =
|
|
"hidden absolute z-50 w-full max-w-2xl mt-2 rounded-lg shadow-lg border";
|
|
searchResults.style.cssText =
|
|
"background-color: var(--bg-secondary); border-color: var(--border)";
|
|
const searchInput = document.getElementById("header-search");
|
|
if (searchInput) {
|
|
const searchContainer = searchInput.closest(".relative");
|
|
if (searchContainer) {
|
|
searchContainer.appendChild(searchResults);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
function highlightMatch(text, query) {
|
|
if (!text)
|
|
return "";
|
|
const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
const regex = new RegExp(`(${escapedQuery})`, "gi");
|
|
return searchEscapeHtml(text).replace(regex, '<mark style="background-color: var(--accent); color: var(--bg-primary); padding: 0 2px; border-radius: 2px;">$1</mark>');
|
|
}
|
|
function searchEscapeHtml(text) {
|
|
const div = document.createElement("div");
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
function selectLibraryAndBook(libraryId, bookId) {
|
|
localStorage.setItem("selectedLibrary", libraryId);
|
|
localStorage.setItem("selectedBook", bookId);
|
|
hideSearchResults();
|
|
}
|
|
document.addEventListener("DOMContentLoaded", initializeSearch);
|
|
window.selectLibraryAndBook = selectLibraryAndBook;
|
|
//# sourceMappingURL=search.js.map
|