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:
2026-02-24 12:59:48 -05:00
parent 891b1f3a3e
commit fffa87009a
2 changed files with 108 additions and 0 deletions
+24
View File
@@ -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();
}
}
})();