feat(wood-paneling): create wood paneling management system
- Add woodPaneling.ts with localStorage-based paneling preferences - Add woodPanelingInit.ts for early initialization (prevents flash) - Support none, wood-light, wood-dark, wood-mahogany options - Apply paneling to #collections-container only (not full body) - Use Tailwind utility classes for backgrounds - Use CSS variable classes for active indicators - Export functions for HTML onclick handlers - Auto-initialize on DOM ready
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
// Early initialization script to prevent flash of wrong background
|
||||
// Loads before woodPaneling.js to apply paneling immediately
|
||||
|
||||
const WOOD_INIT_STORAGE_KEY = 'wood-paneling';
|
||||
|
||||
// Apply wood paneling immediately (before DOM ready if possible)
|
||||
(function() {
|
||||
const woodPaneling = localStorage.getItem(WOOD_INIT_STORAGE_KEY) || 'none';
|
||||
if (woodPaneling !== 'none') {
|
||||
const applyPaneling = () => {
|
||||
const container = document.getElementById('collections-container');
|
||||
if (container) {
|
||||
container.classList.add(`bg-${woodPaneling}`);
|
||||
}
|
||||
};
|
||||
|
||||
// Apply immediately if DOM is ready, otherwise wait
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', applyPaneling);
|
||||
} else {
|
||||
applyPaneling();
|
||||
}
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user