john-okeefe
a8920a8f6c
Features: - Complete dashboard redesign with improved UI components and layout - Implement custom section builder for personalized book organization - Add new events tracking system for user interactions - Enhance search functionality with better static search.js - Update TypeScript type definitions for API responses Backend: - Update Go dependencies in go.mod - Add new frontend routes in router Templates: - Update admin and dashboard templates with new components Frontend: - Refactor analytics, collections, conflicts, and queue modules - Add new documentation features in docs.ts - Implement linking between books and collections - Add toast notifications for user feedback - Include placeholder book SVG asset This commit consolidates multiple feature additions and improvements across the entire stack including backend, templates, and frontend.
265 lines
9.9 KiB
JavaScript
265 lines
9.9 KiB
JavaScript
"use strict";
|
|
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;
|