john-okeefe
4571a19159
- Add data-wood attribute to collections container for CSS targeting - Update woodPaneling.ts and woodPanelingInit.ts to set/remove attribute - Add CSS variables for wood-specific text colors (dark text on light wood, light text on dark wood) - Add !important rules to override theme colors when wood is active - Replace wood-dark and wood-mahogany textures with darker variants - Add subtle borders to book cards on wood backgrounds
87 lines
2.8 KiB
TypeScript
87 lines
2.8 KiB
TypeScript
// Wood paneling management functionality
|
|
|
|
type WoodPanelingType = 'none' | 'wood-light' | 'wood-dark' | 'wood-mahogany';
|
|
|
|
const WOOD_STORAGE_KEY = 'wood-paneling';
|
|
|
|
// Apply wood paneling to collections container
|
|
const applyWoodPaneling = (paneling: WoodPanelingType): void => {
|
|
const container = document.getElementById('collections-container');
|
|
if (!container) return;
|
|
|
|
// Remove all wood background classes
|
|
container.classList.remove('bg-wood-light', 'bg-wood-dark', 'bg-wood-mahogany');
|
|
container.removeAttribute('data-wood');
|
|
|
|
if (paneling !== 'none') {
|
|
// Add selected wood background class
|
|
container.classList.add(`bg-${paneling}`);
|
|
container.setAttribute('data-wood', paneling);
|
|
}
|
|
|
|
// Save to localStorage
|
|
localStorage.setItem(WOOD_STORAGE_KEY, paneling);
|
|
};
|
|
|
|
// Load wood paneling from localStorage on page load
|
|
const loadWoodPaneling = (): void => {
|
|
const stored = localStorage.getItem(WOOD_STORAGE_KEY) as WoodPanelingType | null;
|
|
if (stored) {
|
|
applyWoodPaneling(stored);
|
|
} else {
|
|
// Default to none
|
|
applyWoodPaneling('none');
|
|
}
|
|
};
|
|
|
|
// Change wood paneling (called from theme dropdown)
|
|
const changeWoodPaneling = (paneling: WoodPanelingType): void => {
|
|
applyWoodPaneling(paneling);
|
|
|
|
// Update active indicators
|
|
updateWoodPanelingIndicators();
|
|
|
|
// Close dropdown
|
|
const dropdown = document.getElementById('theme-dropdown');
|
|
if (dropdown) {
|
|
dropdown.classList.add('hidden');
|
|
}
|
|
};
|
|
|
|
// Update visual indicators for wood paneling buttons
|
|
const updateWoodPanelingIndicators = (): void => {
|
|
const currentWood = localStorage.getItem(WOOD_STORAGE_KEY) || 'none';
|
|
|
|
// Update wood paneling buttons
|
|
document.querySelectorAll('.wood-paneling-btn').forEach(btn => {
|
|
const wood = btn.getAttribute('data-wood');
|
|
if (wood === currentWood) {
|
|
// Active state - use CSS class instead of inline style
|
|
btn.classList.add('bg-wood-active');
|
|
btn.classList.remove('bg-wood-inactive');
|
|
} else {
|
|
// Inactive state
|
|
btn.classList.remove('bg-wood-active');
|
|
btn.classList.add('bg-wood-inactive');
|
|
}
|
|
});
|
|
};
|
|
|
|
// Make functions available globally
|
|
(window as any).changeWoodPaneling = changeWoodPaneling;
|
|
(window as any).loadWoodPaneling = loadWoodPaneling;
|
|
(window as any).updateWoodPanelingIndicators = updateWoodPanelingIndicators;
|
|
|
|
// Auto-initialize when DOM is ready
|
|
if (typeof document !== 'undefined') {
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadWoodPaneling();
|
|
updateWoodPanelingIndicators();
|
|
});
|
|
} else {
|
|
loadWoodPaneling();
|
|
updateWoodPanelingIndicators();
|
|
}
|
|
}
|