john-okeefe
ea5ad7a41b
This commit updates the web frontend TypeScript modules: Core modules: - admin.ts: Admin panel functionality and user management - analytics.ts: Analytics dashboard and data visualization - api-explorer.ts: Interactive API documentation explorer - api.ts: Core API client with request/response handling - collections.ts: Book collection management UI - conflicts.ts: Sync conflict resolution interface - custom-section-builder.ts: Dynamic section builder for UI - docs.ts: Documentation viewer and navigation - dom.ts: DOM manipulation utilities and helpers - header.ts: Application header with navigation - library.ts: Library view and book grid management - linking.ts: Device-book linking interface - password_validation.ts: Client-side password strength validation - queue.ts: Device sync queue management UI - search.ts: Full-text search with Lunr integration - storage.ts: Local storage and cache management - theme.ts: Theme management and CSS variable updates - themeDropdown.ts: Theme selector dropdown component - toast.ts: Toast notification system - woodPaneling.ts: Visual theme effects - woodPanelingInit.ts: Visual effects initialization Type definitions: - api.d.ts: Updated TypeScript definitions for API responses These updates enhance the frontend with improved functionality for book management, device synchronization, and user experience.
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
// Theme dropdown active indicator management
|
|
|
|
// Update visual indicators for theme buttons
|
|
const updateThemeIndicators = (): void => {
|
|
const currentTheme = localStorage.getItem("theme") || "tokyo-night";
|
|
|
|
// Update theme buttons (all buttons with changeThemeTo onclick)
|
|
document.querySelectorAll('[onclick^="changeThemeTo"]').forEach((btn) => {
|
|
const onclick = btn.getAttribute("onclick") || "";
|
|
const match = onclick.match(/changeThemeTo\('(.+?)'\)/);
|
|
if (match) {
|
|
const theme = match[1];
|
|
if (theme === currentTheme) {
|
|
// Active state - use CSS class instead of inline style
|
|
btn.classList.add("bg-theme-active");
|
|
btn.classList.remove("bg-theme-inactive");
|
|
} else {
|
|
// Inactive state
|
|
btn.classList.remove("bg-theme-active");
|
|
btn.classList.add("bg-theme-inactive");
|
|
}
|
|
}
|
|
});
|
|
};
|
|
|
|
// Make function available globally
|
|
(window as any).updateThemeIndicators = updateThemeIndicators;
|
|
|
|
// Update on dropdown toggle
|
|
const originalToggleThemeDropdown = (window as any).toggleThemeDropdown;
|
|
if (originalToggleThemeDropdown) {
|
|
(window as any).toggleThemeDropdown = () => {
|
|
originalToggleThemeDropdown();
|
|
updateThemeIndicators();
|
|
(window as any).updateWoodPanelingIndicators?.();
|
|
};
|
|
}
|
|
|
|
// Update after theme changes
|
|
const originalChangeThemeTo = (window as any).changeThemeTo;
|
|
if (originalChangeThemeTo) {
|
|
(window as any).changeThemeTo = (...args: unknown[]) => {
|
|
originalChangeThemeTo(...args);
|
|
updateThemeIndicators();
|
|
};
|
|
}
|
|
|
|
// Auto-initialize when DOM is ready
|
|
if (typeof document !== "undefined") {
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", updateThemeIndicators);
|
|
} else {
|
|
updateThemeIndicators();
|
|
}
|
|
}
|