Projets/Shaarli_bm_theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

search barre

Browse Source
This commit is contained in:
bruno
2026-01-13 20:53:39 -05:00
parent a9f3c009fc
commit 2da5ffcacc
3 changed files with 593 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shaarli-pro/js/script.js
+293 -31
View File
@@ -44,18 +44,250 @@ document.addEventListener('DOMContentLoaded', () => {
mobileMenuBtn?.addEventListener('click', toggleSidebar);
sidebarOverlay?.addEventListener('click', toggleSidebar);
// ===== Search Overlay =====
// ===== Search Overlay (Spotlight Style) =====
const searchOverlay = document.getElementById('search-overlay');
const searchToggleBtn = document.getElementById('search-toggle-btn');
const searchModalInput = document.getElementById('search-modal-input');
const searchResults = document.getElementById('search-results');
const searchTagsBtn = document.getElementById('search-tags-btn');
const searchAllBtn = document.getElementById('search-all-btn');
const searchForm = document.getElementById('search-form');
let searchMode = 'search'; // 'search' or 'tags'
let selectedIndex = -1;
let searchTimeout = null;
let cachedBookmarks = null;
let cachedTags = null;
// Highlight matching text with <mark> tags
function highlightMatch(text, query) {
if (!query || query.length === 0) return text;
// Escape special regex characters in query
const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(`(${escapedQuery})`, 'gi');
return text.replace(regex, '<mark>$1</mark>');
}
// Fuzzy search - matches substring anywhere in text
function fuzzyMatch(text, query) {
if (!query || query.length === 0) return true;
return text.toLowerCase().includes(query.toLowerCase());
}
// Fetch all unique tags from the page
function fetchTags() {
if (cachedTags) return cachedTags;
try {
const tagElements = document.querySelectorAll('.link-tag, .tag-link, [class*="tag"]');
const tagsSet = new Set();
tagElements.forEach(el => {
const tagText = el.textContent.trim();
if (tagText && tagText.length > 0 && !tagText.includes('•')) {
tagsSet.add(tagText);
}
});
// Convert to array and sort alphabetically
cachedTags = Array.from(tagsSet).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
return cachedTags;
} catch (e) {
console.error('Failed to fetch tags:', e);
return [];
}
}
// Fetch bookmarks for live search
async function fetchBookmarks() {
if (cachedBookmarks) return cachedBookmarks;
try {
// Try to get bookmarks from page (if already loaded)
const linkElements = document.querySelectorAll('.link-outer');
if (linkElements.length > 0) {
cachedBookmarks = Array.from(linkElements).map(el => ({
id: el.dataset.id,
title: el.querySelector('.link-title a')?.textContent || el.querySelector('.link-title')?.textContent || '',
url: el.querySelector('.link-url a')?.href || el.querySelector('.link-title a')?.href || '',
tags: Array.from(el.querySelectorAll('.link-tag')).map(t => t.textContent.trim()),
description: el.querySelector('.link-description')?.textContent || ''
}));
return cachedBookmarks;
}
} catch (e) {
console.error('Failed to fetch bookmarks:', e);
}
return [];
}
// Render search results (tags or bookmarks)
function renderResults(results, query, isTagMode = false) {
if (!searchResults) return;
if (results.length === 0) {
if (query && query.length > 0) {
searchResults.innerHTML = `
<div class="search-no-results">
No results found for "<strong>${escapeHtml(query)}</strong>"
</div>
`;
} else {
searchResults.innerHTML = `
<div class="search-results-empty">
<span class="search-results-hint">Start typing to see tag suggestions...</span>
</div>
`;
}
return;
}
let html;
if (isTagMode) {
// Render tags
html = results.slice(0, 15).map((tag, index) => {
const highlightedTag = highlightMatch(escapeHtml(tag), query);
return `
<div class="search-result-item${index === selectedIndex ? ' selected' : ''}"
data-index="${index}"
data-tag="${escapeHtml(tag)}">
<div class="search-result-item-content">
<i class="mdi mdi-tag-outline search-result-icon"></i>
<span class="search-result-text">${highlightedTag}</span>
</div>
</div>
`;
}).join('');
} else {
// Render bookmarks
html = results.slice(0, 10).map((item, index) => {
const highlightedTitle = highlightMatch(escapeHtml(item.title), query);
return `
<div class="search-result-item${index === selectedIndex ? ' selected' : ''}"
data-index="${index}"
data-url="${escapeHtml(item.url)}"
data-id="${item.id}">
<div class="search-result-item-content">
<i class="mdi mdi-bookmark-outline search-result-icon"></i>
<span class="search-result-text">${highlightedTitle}</span>
</div>
</div>
`;
}).join('');
}
searchResults.innerHTML = html;
// Add click handlers to results
searchResults.querySelectorAll('.search-result-item').forEach(item => {
item.addEventListener('click', () => {
if (isTagMode) {
const tag = item.dataset.tag;
if (tag) {
// Navigate to tag search
window.location.href = shaarli.basePath + '/?searchtags=' + encodeURIComponent(tag);
}
} else {
const url = item.dataset.url;
if (url) {
window.location.href = url;
}
}
});
});
}
// Escape HTML to prevent XSS
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
// Perform live search
async function performSearch(query) {
const tags = fetchTags();
if (!query || query.length === 0) {
// Show all tags when empty
renderResults(tags.slice(0, 15), '', true);
return;
}
// Filter tags with fuzzy matching
const results = tags.filter(tag => fuzzyMatch(tag, query));
renderResults(results, query, true);
}
// Update selected result
function updateSelection(newIndex) {
const items = searchResults?.querySelectorAll('.search-result-item');
if (!items || items.length === 0) return;
// Clamp index
if (newIndex < 0) newIndex = items.length - 1;
if (newIndex >= items.length) newIndex = 0;
selectedIndex = newIndex;
items.forEach((item, index) => {
item.classList.toggle('selected', index === selectedIndex);
});
// Scroll into view
items[selectedIndex]?.scrollIntoView({ block: 'nearest' });
}
// Navigate to selected result
function navigateToSelected() {
const selected = searchResults?.querySelector('.search-result-item.selected');
if (selected) {
// Check if it's a tag
const tag = selected.dataset.tag;
if (tag) {
window.location.href = shaarli.basePath + '/?searchtags=' + encodeURIComponent(tag);
return true;
}
// Otherwise check for URL
const url = selected.dataset.url;
if (url) {
window.location.href = url;
return true;
}
}
return false;
}
function openSearch() {
searchOverlay?.classList.add('show');
setTimeout(() => searchModalInput?.focus(), 100);
selectedIndex = -1;
setTimeout(() => {
searchModalInput?.focus();
// Trigger initial search if there's existing text
if (searchModalInput?.value) {
performSearch(searchModalInput.value);
}
}, 100);
}
function closeSearch() {
searchOverlay?.classList.remove('show');
selectedIndex = -1;
}
// Toggle search mode (tags vs search)
function setSearchMode(mode) {
searchMode = mode;
searchTagsBtn?.classList.toggle('active', mode === 'tags');
searchAllBtn?.classList.toggle('active', mode === 'search');
if (searchModalInput) {
searchModalInput.name = mode === 'tags' ? 'searchtags' : 'searchterm';
// Re-run search with new mode
performSearch(searchModalInput.value);
}
}
searchToggleBtn?.addEventListener('click', openSearch);
@@ -67,24 +299,74 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
// Keyboard shortcut: S to open search, ESC to close
// Search mode toggle buttons
searchTagsBtn?.addEventListener('click', (e) => {
e.preventDefault();
setSearchMode('tags');
});
searchAllBtn?.addEventListener('click', (e) => {
// Only prevent default if not submitting
if (selectedIndex >= 0) {
e.preventDefault();
navigateToSelected();
}
});
// Live search on input
searchModalInput?.addEventListener('input', (e) => {
const query = e.target.value;
// Debounce search
clearTimeout(searchTimeout);
searchTimeout = setTimeout(() => {
selectedIndex = -1;
performSearch(query);
}, 150);
});
// Keyboard shortcuts
document.addEventListener('keydown', (e) => {
// Don't trigger if typing in an input
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
if (e.key === 'Escape') {
const isSearchOpen = searchOverlay?.classList.contains('show');
const isTyping = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA';
// Handle ESC - always close search/filter
if (e.key === 'Escape') {
if (isSearchOpen) {
closeSearch();
e.preventDefault();
}
closeFilterPanel();
return;
}
// If search is open, handle navigation
if (isSearchOpen && e.target === searchModalInput) {
switch (e.key) {
case 'ArrowDown':
e.preventDefault();
updateSelection(selectedIndex + 1);
break;
case 'ArrowUp':
e.preventDefault();
updateSelection(selectedIndex - 1);
break;
case 'Enter':
// If an item is selected, navigate to it
if (selectedIndex >= 0 && navigateToSelected()) {
e.preventDefault();
}
// Otherwise, submit the form normally
break;
}
return;
}
if (e.key === 's' || e.key === 'S') {
// S to open search (when not typing)
if (!isTyping && (e.key === 's' || e.key === 'S')) {
e.preventDefault();
openSearch();
}
if (e.key === 'Escape') {
closeSearch();
closeFilterPanel();
}
});
// ===== Filter Panel =====
@@ -360,26 +642,6 @@ document.addEventListener('DOMContentLoaded', () => {
form.submit();
}
// ===== Search Type Toggle =====
const searchTagsBtn = document.getElementById('search-tags-btn');
const searchAllBtn = document.getElementById('search-all-btn');
const searchForm = document.getElementById('search-form');
searchTagsBtn?.addEventListener('click', (e) => {
e.preventDefault();
searchModalInput.name = 'searchtags';
searchAllBtn?.classList.remove('active');
searchTagsBtn?.classList.add('active');
searchForm?.submit();
});
searchAllBtn?.addEventListener('click', (e) => {
e.preventDefault();
searchModalInput.name = 'searchterm';
searchTagsBtn?.classList.remove('active');
searchAllBtn?.classList.add('active');
searchForm?.submit();
});
// ===== Thumbnail Update =====
const thumbnailsPage = document.querySelector('.page-thumbnails');