1008 lines
37 KiB
JavaScript
1008 lines
37 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
// ===== Theme Toggle =====
|
|
const themeCheckbox = document.getElementById('theme-toggle-checkbox');
|
|
const themeIconLight = document.getElementById('theme-icon-light');
|
|
const themeLabelSpan = document.querySelector('.theme-toggle-label span');
|
|
|
|
function updateTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
localStorage.setItem('theme', theme);
|
|
|
|
if (themeCheckbox) {
|
|
themeCheckbox.checked = theme === 'dark';
|
|
}
|
|
if (themeIconLight) {
|
|
themeIconLight.className = theme === 'dark' ? 'mdi mdi-weather-night' : 'mdi mdi-weather-sunny';
|
|
}
|
|
if (themeLabelSpan) {
|
|
themeLabelSpan.textContent = theme === 'dark' ? 'Dark Mode' : 'Light Mode';
|
|
}
|
|
}
|
|
|
|
// Init Theme
|
|
const savedTheme = localStorage.getItem('theme') ||
|
|
(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
|
updateTheme(savedTheme);
|
|
|
|
if (themeCheckbox) {
|
|
themeCheckbox.addEventListener('change', () => {
|
|
const next = themeCheckbox.checked ? 'dark' : 'light';
|
|
updateTheme(next);
|
|
});
|
|
}
|
|
|
|
// ===== Mobile Sidebar Toggle =====
|
|
const sidebar = document.getElementById('sidebar');
|
|
const sidebarOverlay = document.getElementById('sidebar-overlay');
|
|
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
|
|
|
function toggleSidebar() {
|
|
sidebar?.classList.toggle('show');
|
|
sidebarOverlay?.classList.toggle('show');
|
|
}
|
|
|
|
mobileMenuBtn?.addEventListener('click', toggleSidebar);
|
|
sidebarOverlay?.addEventListener('click', toggleSidebar);
|
|
|
|
// ===== 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');
|
|
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);
|
|
|
|
// Close search on overlay click
|
|
searchOverlay?.addEventListener('click', (e) => {
|
|
if (e.target === searchOverlay) {
|
|
closeSearch();
|
|
}
|
|
});
|
|
|
|
// 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) => {
|
|
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;
|
|
}
|
|
|
|
// S to open search (when not typing)
|
|
if (!isTyping && (e.key === 's' || e.key === 'S')) {
|
|
e.preventDefault();
|
|
openSearch();
|
|
}
|
|
});
|
|
|
|
// ===== Filter Panel =====
|
|
const filterToggleBtn = document.getElementById('filter-toggle-btn');
|
|
const filterPanel = document.getElementById('filter-panel');
|
|
const filterCloseBtn = document.getElementById('filter-close-btn');
|
|
const filterPrivate = document.getElementById('filter-private');
|
|
const filterPublic = document.getElementById('filter-public');
|
|
const filterUntagged = document.getElementById('filter-untagged');
|
|
|
|
function toggleFilterPanel() {
|
|
filterPanel?.classList.toggle('show');
|
|
}
|
|
|
|
function closeFilterPanel() {
|
|
filterPanel?.classList.remove('show');
|
|
}
|
|
|
|
filterToggleBtn?.addEventListener('click', (e) => {
|
|
e.stopPropagation();
|
|
toggleFilterPanel();
|
|
});
|
|
|
|
filterCloseBtn?.addEventListener('click', closeFilterPanel);
|
|
|
|
// Close filter when clicking outside
|
|
document.addEventListener('click', (e) => {
|
|
if (filterPanel?.classList.contains('show')) {
|
|
if (!filterPanel.contains(e.target) && e.target !== filterToggleBtn) {
|
|
closeFilterPanel();
|
|
}
|
|
}
|
|
});
|
|
|
|
// Handle filter toggle switches
|
|
// Logic:
|
|
// - Visibility: all (neither checked), private (only private checked), public (only public checked)
|
|
// - Untagged: can be combined with any visibility
|
|
function applyFilters() {
|
|
const isPrivate = filterPrivate?.checked || false;
|
|
const isPublic = filterPublic?.checked || false;
|
|
const isUntagged = filterUntagged?.checked || false;
|
|
|
|
let basePath = (typeof shaarli !== 'undefined' && shaarli.basePath) ? shaarli.basePath : '';
|
|
|
|
// Get current filter state from server-side rendered variables
|
|
const currentVisibility = (typeof shaarli !== 'undefined' && shaarli.visibility) ? shaarli.visibility : '';
|
|
const currentUntagged = (typeof shaarli !== 'undefined' && shaarli.untaggedonly) || false;
|
|
|
|
console.log('[Filter] Applying filters - private:', isPrivate, 'public:', isPublic, 'untagged:', isUntagged);
|
|
console.log('[Filter] Current state - visibility:', currentVisibility, 'untagged:', currentUntagged);
|
|
|
|
let url = basePath + '/';
|
|
|
|
// Determine desired visibility
|
|
let desiredVisibility = 'all';
|
|
if (isPrivate) {
|
|
desiredVisibility = 'private';
|
|
} else if (isPublic) {
|
|
desiredVisibility = 'public';
|
|
}
|
|
|
|
// Build URL based on desired state
|
|
if (desiredVisibility === 'private') {
|
|
url = basePath + '/admin/visibility/private';
|
|
} else if (desiredVisibility === 'public') {
|
|
url = basePath + '/admin/visibility/public';
|
|
} else {
|
|
// visibility = all - need to clear visibility if it was set
|
|
if (currentVisibility && currentVisibility !== '') {
|
|
url = basePath + '/admin/visibility/all';
|
|
} else if (isUntagged !== currentUntagged) {
|
|
// Untagged state changed - /untagged-only works as toggle
|
|
url = basePath + '/untagged-only';
|
|
} else {
|
|
url = basePath + '/';
|
|
}
|
|
}
|
|
|
|
console.log('[Filter] Navigating to:', url);
|
|
window.location.href = url;
|
|
}
|
|
|
|
// Clear all filters - go back to showing all bookmarks
|
|
function clearAllFilters() {
|
|
const basePath = (typeof shaarli !== 'undefined' && shaarli.basePath) ? shaarli.basePath : '';
|
|
const currentVisibility = (typeof shaarli !== 'undefined' && shaarli.visibility) ? shaarli.visibility : '';
|
|
const currentUntagged = (typeof shaarli !== 'undefined' && shaarli.untaggedonly) || false;
|
|
|
|
// If visibility is set, clear it first
|
|
if (currentVisibility && currentVisibility !== '') {
|
|
window.location.href = basePath + '/admin/visibility/all';
|
|
} else if (currentUntagged) {
|
|
// Toggle untagged off using /untagged-only
|
|
window.location.href = basePath + '/untagged-only';
|
|
} else {
|
|
window.location.href = basePath + '/';
|
|
}
|
|
}
|
|
|
|
// Private and public are mutually exclusive
|
|
filterPrivate?.addEventListener('change', (e) => {
|
|
if (e.target.checked && filterPublic) {
|
|
filterPublic.checked = false;
|
|
}
|
|
applyFilters();
|
|
});
|
|
|
|
filterPublic?.addEventListener('change', (e) => {
|
|
if (e.target.checked && filterPrivate) {
|
|
filterPrivate.checked = false;
|
|
}
|
|
applyFilters();
|
|
});
|
|
|
|
filterUntagged?.addEventListener('change', () => {
|
|
applyFilters();
|
|
});
|
|
|
|
// Initialize filter states from server-side variables (set in includes.html)
|
|
(function initFilterStates() {
|
|
console.log('[Filter Debug] ========================================');
|
|
|
|
// Get filter state from server-side rendered variables
|
|
const visibility = (typeof shaarli !== 'undefined' && shaarli.visibility) ? shaarli.visibility : '';
|
|
const untaggedonly = (typeof shaarli !== 'undefined' && shaarli.untaggedonly) ? shaarli.untaggedonly : false;
|
|
|
|
// Detect active filters from server variables
|
|
let isPrivateActive = visibility === 'private';
|
|
let isPublicActive = visibility === 'public';
|
|
let isUntaggedActive = untaggedonly === true;
|
|
|
|
console.log('[Filter Debug] shaarli.visibility:', visibility);
|
|
console.log('[Filter Debug] shaarli.untaggedonly:', untaggedonly);
|
|
|
|
console.log('[Filter Debug] isPrivateActive:', isPrivateActive);
|
|
console.log('[Filter Debug] isPublicActive:', isPublicActive);
|
|
console.log('[Filter Debug] isUntaggedActive:', isUntaggedActive);
|
|
|
|
// Set checkbox states
|
|
if (filterPrivate && isPrivateActive) {
|
|
filterPrivate.checked = true;
|
|
console.log('[Filter Debug] ✓ Set filterPrivate to CHECKED');
|
|
}
|
|
if (filterPublic && isPublicActive) {
|
|
filterPublic.checked = true;
|
|
console.log('[Filter Debug] ✓ Set filterPublic to CHECKED');
|
|
}
|
|
if (filterUntagged && isUntaggedActive) {
|
|
filterUntagged.checked = true;
|
|
console.log('[Filter Debug] ✓ Set filterUntagged to CHECKED');
|
|
}
|
|
|
|
const hasActiveFilter = isPrivateActive || isPublicActive || isUntaggedActive;
|
|
console.log('[Filter Debug] hasActiveFilter:', hasActiveFilter);
|
|
console.log('[Filter Debug] ========================================');
|
|
|
|
// Add/update filter indicator badge on the filter button
|
|
if (filterToggleBtn && hasActiveFilter) {
|
|
filterToggleBtn.classList.add('has-active-filter');
|
|
console.log('[Filter Debug] Added has-active-filter class to button');
|
|
|
|
// Add badge indicator if not exists
|
|
if (!filterToggleBtn.querySelector('.filter-badge')) {
|
|
const badge = document.createElement('span');
|
|
badge.className = 'filter-badge';
|
|
filterToggleBtn.appendChild(badge);
|
|
console.log('[Filter Debug] Added filter badge');
|
|
}
|
|
}
|
|
|
|
// Create and display the filter info banner
|
|
if (hasActiveFilter && !document.getElementById('filter-info-banner')) {
|
|
// Get result count from page - try multiple sources
|
|
let resultCount = 0;
|
|
const pagingStats = document.querySelector('.paging-stats strong:last-child');
|
|
const linkCount = document.querySelectorAll('.link-outer').length;
|
|
|
|
if (pagingStats) {
|
|
resultCount = parseInt(pagingStats.textContent) || 0;
|
|
} else if (linkCount > 0) {
|
|
resultCount = linkCount;
|
|
}
|
|
|
|
// Check if no results (empty state)
|
|
const emptyState = document.querySelector('.empty-state');
|
|
const isEmptyResults = emptyState !== null || resultCount === 0;
|
|
|
|
// Build the message like the examples:
|
|
// "5 results without any tag"
|
|
// "5 results with status private without any tag"
|
|
// "1 result with status public without any tag"
|
|
let statusPart = '';
|
|
let untaggedPart = '';
|
|
|
|
if (isPrivateActive) {
|
|
statusPart = '<strong>private</strong>';
|
|
} else if (isPublicActive) {
|
|
statusPart = '<strong>public</strong>';
|
|
}
|
|
|
|
if (isUntaggedActive) {
|
|
untaggedPart = '<strong>without any tag</strong>';
|
|
}
|
|
|
|
// Build the message
|
|
let message = '';
|
|
if (isEmptyResults) {
|
|
message = 'Nothing found.';
|
|
} else {
|
|
const resultWord = resultCount === 1 ? 'result' : 'results';
|
|
if (statusPart && untaggedPart) {
|
|
message = `${resultCount} ${resultWord} with status ${statusPart} ${untaggedPart}`;
|
|
} else if (statusPart) {
|
|
message = `${resultCount} ${resultWord} with status ${statusPart}`;
|
|
} else if (untaggedPart) {
|
|
message = `${resultCount} ${resultWord} ${untaggedPart}`;
|
|
}
|
|
}
|
|
|
|
console.log('[Filter Debug] resultCount:', resultCount);
|
|
console.log('[Filter Debug] isEmptyResults:', isEmptyResults);
|
|
console.log('[Filter Debug] message:', message);
|
|
|
|
if (message) {
|
|
// Get base path safely
|
|
const basePath = (typeof shaarli !== 'undefined' && shaarli.basePath) ? shaarli.basePath : '';
|
|
|
|
const banner = document.createElement('div');
|
|
banner.id = 'filter-info-banner';
|
|
banner.className = 'filter-info-banner' + (isEmptyResults ? ' empty-results' : '');
|
|
banner.innerHTML = `
|
|
<div class="filter-info-content">
|
|
<span>${message}</span>
|
|
</div>
|
|
<button type="button" class="filter-clear-btn" id="filter-clear-btn" title="Clear filters">
|
|
<i class="mdi mdi-close"></i>
|
|
<span>Clear</span>
|
|
</button>
|
|
`;
|
|
|
|
// Try to find the best insertion point
|
|
const contentToolbar = document.querySelector('.content-toolbar');
|
|
const linklist = document.getElementById('linklist');
|
|
const emptyStateDiv = document.querySelector('.empty-state');
|
|
|
|
console.log('[Filter Debug] contentToolbar:', contentToolbar);
|
|
console.log('[Filter Debug] linklist:', linklist);
|
|
|
|
// Insert after the content-toolbar (pagination)
|
|
if (contentToolbar && contentToolbar.parentNode) {
|
|
contentToolbar.parentNode.insertBefore(banner, contentToolbar.nextSibling);
|
|
console.log('[Filter Debug] Banner inserted after content-toolbar');
|
|
} else if (emptyStateDiv && emptyStateDiv.parentNode) {
|
|
emptyStateDiv.parentNode.insertBefore(banner, emptyStateDiv);
|
|
console.log('[Filter Debug] Banner inserted before empty-state');
|
|
} else if (linklist) {
|
|
linklist.insertBefore(banner, linklist.firstChild);
|
|
console.log('[Filter Debug] Banner inserted at beginning of linklist');
|
|
} else {
|
|
console.log('[Filter Debug] Could not find insertion point for banner');
|
|
}
|
|
|
|
// Add click handler to clear button
|
|
document.getElementById('filter-clear-btn')?.addEventListener('click', () => {
|
|
console.log('[Filter] Clear button clicked, clearing all filters');
|
|
// Clear based on what was active
|
|
if (isPrivateActive || isPublicActive) {
|
|
window.location.href = basePath + '/admin/visibility/all';
|
|
} else if (isUntaggedActive) {
|
|
// Toggle untagged off
|
|
window.location.href = basePath + '/untagged-only';
|
|
} else {
|
|
window.location.href = basePath + '/';
|
|
}
|
|
});
|
|
}
|
|
}
|
|
})();
|
|
|
|
// Handle links per page options
|
|
|
|
|
|
// Handle custom value form submission
|
|
const filterInput = document.querySelector('.filter-input');
|
|
if (filterInput) {
|
|
filterInput.closest('form')?.addEventListener('submit', (e) => {
|
|
e.preventDefault();
|
|
const value = filterInput.value;
|
|
if (value && value > 0) {
|
|
window.location.href = shaarli.basePath + '/links-per-page?nb=' + value;
|
|
}
|
|
});
|
|
}
|
|
|
|
// ===== View Toggle (Grid/List/Compact) =====
|
|
const linksList = document.getElementById('links-list');
|
|
const viewGridBtn = document.getElementById('view-grid-btn');
|
|
const viewListBtn = document.getElementById('view-list-btn');
|
|
const viewCompactBtn = document.getElementById('view-compact-btn');
|
|
|
|
function setView(view) {
|
|
if (!linksList) return;
|
|
|
|
// Remove all view classes
|
|
linksList.classList.remove('view-grid', 'view-list', 'view-compact');
|
|
|
|
// Remove active state from all buttons
|
|
viewGridBtn?.classList.remove('active');
|
|
viewListBtn?.classList.remove('active');
|
|
viewCompactBtn?.classList.remove('active');
|
|
|
|
// Apply selected view
|
|
if (view === 'list') {
|
|
linksList.classList.add('view-list');
|
|
viewListBtn?.classList.add('active');
|
|
} else if (view === 'compact') {
|
|
linksList.classList.add('view-compact');
|
|
viewCompactBtn?.classList.add('active');
|
|
} else {
|
|
// Default to grid
|
|
linksList.classList.add('view-grid');
|
|
viewGridBtn?.classList.add('active');
|
|
}
|
|
|
|
localStorage.setItem('linksView', view);
|
|
}
|
|
|
|
// Init view from localStorage
|
|
const savedView = localStorage.getItem('linksView') || 'grid';
|
|
setView(savedView);
|
|
|
|
viewGridBtn?.addEventListener('click', () => setView('grid'));
|
|
viewListBtn?.addEventListener('click', () => setView('list'));
|
|
viewCompactBtn?.addEventListener('click', () => setView('compact'));
|
|
|
|
// ===== Multi-Select Mode =====
|
|
const selectModeBtn = document.getElementById('select-mode-btn');
|
|
const bulkActionsBar = document.getElementById('bulk-actions-bar');
|
|
const bulkCount = document.getElementById('bulk-count');
|
|
const bulkSelectAll = document.getElementById('bulk-select-all');
|
|
const bulkCancel = document.getElementById('bulk-cancel');
|
|
const bulkDelete = document.getElementById('bulk-delete');
|
|
const bulkPublic = document.getElementById('bulk-public');
|
|
const bulkPrivate = document.getElementById('bulk-private');
|
|
|
|
let selectionMode = false;
|
|
let selectedIds = new Set();
|
|
|
|
function updateBulkUI() {
|
|
if (bulkCount) {
|
|
bulkCount.textContent = selectedIds.size;
|
|
}
|
|
|
|
// Update link cards visual state
|
|
document.querySelectorAll('.link-outer').forEach(card => {
|
|
const id = card.dataset.id;
|
|
if (selectedIds.has(id)) {
|
|
card.classList.add('selected');
|
|
} else {
|
|
card.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
// Update checkboxes
|
|
document.querySelectorAll('.link-checkbox').forEach(cb => {
|
|
cb.checked = selectedIds.has(cb.dataset.id);
|
|
});
|
|
}
|
|
|
|
function enterSelectionMode() {
|
|
selectionMode = true;
|
|
document.body.classList.add('selection-mode');
|
|
bulkActionsBar?.classList.add('show');
|
|
selectModeBtn?.classList.add('active');
|
|
}
|
|
|
|
function exitSelectionMode() {
|
|
selectionMode = false;
|
|
selectedIds.clear();
|
|
document.body.classList.remove('selection-mode');
|
|
bulkActionsBar?.classList.remove('show');
|
|
selectModeBtn?.classList.remove('active');
|
|
updateBulkUI();
|
|
}
|
|
|
|
function toggleSelection(id) {
|
|
if (selectedIds.has(id)) {
|
|
selectedIds.delete(id);
|
|
} else {
|
|
selectedIds.add(id);
|
|
}
|
|
|
|
if (selectedIds.size > 0 && !selectionMode) {
|
|
enterSelectionMode();
|
|
} else if (selectedIds.size === 0 && selectionMode) {
|
|
exitSelectionMode();
|
|
}
|
|
|
|
updateBulkUI();
|
|
}
|
|
|
|
selectModeBtn?.addEventListener('click', () => {
|
|
if (selectionMode) {
|
|
exitSelectionMode();
|
|
} else {
|
|
enterSelectionMode();
|
|
}
|
|
});
|
|
|
|
bulkCancel?.addEventListener('click', exitSelectionMode);
|
|
|
|
bulkSelectAll?.addEventListener('click', () => {
|
|
document.querySelectorAll('.link-outer').forEach(card => {
|
|
if (card.dataset.id) {
|
|
selectedIds.add(card.dataset.id);
|
|
}
|
|
});
|
|
updateBulkUI();
|
|
});
|
|
|
|
// Handle checkbox clicks
|
|
document.addEventListener('change', (e) => {
|
|
if (e.target.classList.contains('link-checkbox')) {
|
|
toggleSelection(e.target.dataset.id);
|
|
}
|
|
});
|
|
|
|
// Handle card clicks in selection mode
|
|
document.addEventListener('click', (e) => {
|
|
if (!selectionMode) return;
|
|
|
|
const card = e.target.closest('.link-outer');
|
|
if (card && card.dataset.id) {
|
|
// Don't toggle if clicking on actions or links
|
|
if (e.target.closest('.link-actions') ||
|
|
e.target.closest('.link-hover-actions') ||
|
|
e.target.tagName === 'A') {
|
|
return;
|
|
}
|
|
toggleSelection(card.dataset.id);
|
|
}
|
|
});
|
|
|
|
// Bulk actions
|
|
bulkDelete?.addEventListener('click', () => {
|
|
if (selectedIds.size === 0) return;
|
|
if (!confirm(`Delete ${selectedIds.size} bookmark(s)?`)) return;
|
|
|
|
// Submit form with selected IDs
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = shaarli.basePath + '/admin/shaare/delete';
|
|
|
|
selectedIds.forEach(id => {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'id[]';
|
|
input.value = id;
|
|
form.appendChild(input);
|
|
});
|
|
|
|
const tokenInput = document.createElement('input');
|
|
tokenInput.type = 'hidden';
|
|
tokenInput.name = 'token';
|
|
tokenInput.value = document.querySelector('input[name="token"]')?.value || '';
|
|
form.appendChild(tokenInput);
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
});
|
|
|
|
bulkPublic?.addEventListener('click', () => {
|
|
if (selectedIds.size === 0) return;
|
|
bulkVisibilityChange('public');
|
|
});
|
|
|
|
bulkPrivate?.addEventListener('click', () => {
|
|
if (selectedIds.size === 0) return;
|
|
bulkVisibilityChange('private');
|
|
});
|
|
|
|
function bulkVisibilityChange(visibility) {
|
|
const form = document.createElement('form');
|
|
form.method = 'POST';
|
|
form.action = shaarli.basePath + '/admin/shaare/visibility';
|
|
|
|
selectedIds.forEach(id => {
|
|
const input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = 'id[]';
|
|
input.value = id;
|
|
form.appendChild(input);
|
|
});
|
|
|
|
const visInput = document.createElement('input');
|
|
visInput.type = 'hidden';
|
|
visInput.name = 'visibility';
|
|
visInput.value = visibility;
|
|
form.appendChild(visInput);
|
|
|
|
const tokenInput = document.createElement('input');
|
|
tokenInput.type = 'hidden';
|
|
tokenInput.name = 'token';
|
|
tokenInput.value = document.querySelector('input[name="token"]')?.value || '';
|
|
form.appendChild(tokenInput);
|
|
|
|
document.body.appendChild(form);
|
|
form.submit();
|
|
}
|
|
|
|
|
|
// ===== Thumbnail Update =====
|
|
const thumbnailsPage = document.querySelector('.page-thumbnails');
|
|
if (thumbnailsPage) {
|
|
const thumbnailPlaceholder = document.querySelector('.thumbnail-placeholder');
|
|
const thumbnailTitle = document.querySelector('.thumbnail-link-title');
|
|
const progressCurrent = document.querySelector('.progress-current');
|
|
const progressBarActual = document.querySelector('.progress-actual');
|
|
const idsInput = document.querySelector('input[name="ids"]');
|
|
|
|
if (idsInput && idsInput.value) {
|
|
const thumbnailsIdList = idsInput.value.split(',');
|
|
const total = thumbnailsIdList.length;
|
|
let i = 0;
|
|
|
|
const updateThumbnail = function (id) {
|
|
console.log('Updating thumbnail #' + i + ' with id ' + id);
|
|
|
|
fetch(shaarli.basePath + '/admin/shaare/' + id + '/update-thumbnail', {
|
|
method: 'PATCH',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
}
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
i++;
|
|
|
|
if (thumbnailTitle) {
|
|
thumbnailTitle.textContent = data.title || 'Processing...';
|
|
}
|
|
|
|
if (thumbnailPlaceholder) {
|
|
if (data.thumbnail) {
|
|
thumbnailPlaceholder.innerHTML = '<img title="Current thumbnail" src="' + data.thumbnail + '" style="max-width: 100%; height: auto;"/>';
|
|
} else {
|
|
thumbnailPlaceholder.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
if (progressCurrent) {
|
|
progressCurrent.textContent = i;
|
|
}
|
|
|
|
if (progressBarActual) {
|
|
progressBarActual.style.width = ((i * 100) / total) + '%';
|
|
}
|
|
|
|
if (i < total) {
|
|
updateThumbnail(thumbnailsIdList[i]);
|
|
} else {
|
|
if (thumbnailTitle) {
|
|
thumbnailTitle.textContent = 'Thumbnail update done!';
|
|
}
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Failed to update thumbnail:', error);
|
|
if (thumbnailTitle) {
|
|
thumbnailTitle.textContent = 'Error updating thumbnail #' + i;
|
|
}
|
|
// Continue with next thumbnail even if one fails
|
|
i++;
|
|
if (i < total) {
|
|
updateThumbnail(thumbnailsIdList[i]);
|
|
}
|
|
});
|
|
};
|
|
|
|
// Start the update process
|
|
updateThumbnail(thumbnailsIdList[0]);
|
|
}
|
|
}
|
|
// ===== Fullscreen Description Modal =====
|
|
const descModal = document.getElementById('desc-modal');
|
|
const descModalBody = document.getElementById('desc-modal-body');
|
|
const descModalClose = document.getElementById('desc-modal-close');
|
|
|
|
function openDescModal(content) {
|
|
if (descModal && descModalBody) {
|
|
descModalBody.innerHTML = content;
|
|
descModal.classList.add('show');
|
|
document.body.style.overflow = 'hidden'; // Prevent background scrolling
|
|
}
|
|
}
|
|
|
|
function closeDescModal() {
|
|
if (descModal) {
|
|
descModal.classList.remove('show');
|
|
document.body.style.overflow = '';
|
|
}
|
|
}
|
|
|
|
descModalClose?.addEventListener('click', closeDescModal);
|
|
descModal?.addEventListener('click', (e) => {
|
|
if (e.target === descModal) {
|
|
closeDescModal();
|
|
}
|
|
});
|
|
|
|
// Press ESC to close description modal
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && descModal?.classList.contains('show')) {
|
|
closeDescModal();
|
|
}
|
|
});
|
|
|
|
// Delegate click event for dynamic buttons
|
|
document.addEventListener('click', (e) => {
|
|
const btn = e.target.closest('.view-desc-btn');
|
|
if (btn) {
|
|
e.preventDefault();
|
|
const id = btn.dataset.id;
|
|
|
|
const card = document.getElementById(id);
|
|
if (card) {
|
|
// Try to find description element (even if hidden in compact view)
|
|
const descEl = card.querySelector('.link-description');
|
|
if (descEl) {
|
|
openDescModal(descEl.innerHTML);
|
|
} else {
|
|
openDescModal('<p class="text-muted">No description available.</p>');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|