thrillwiki_django_no_react/static/js/main.js

// Initialize dark mode from localStorage
document.addEventListener('DOMContentLoaded', () => {
    // Check if dark mode was previously enabled
    const darkMode = localStorage.getItem('darkMode') === 'true';
    if (darkMode) {
        document.documentElement.classList.add('dark');
        toggleIcons(true); // Ensure correct icon is shown
    } else {
        toggleIcons(false);
    }
});

// Handle search form submission
document.addEventListener('submit', (e) => {
    if (e.target.matches('form[action*="search"]')) {
        const searchInput = e.target.querySelector('input[name="q"]');
        if (!searchInput.value.trim()) {
            e.preventDefault();
        }
    }
});

// Close mobile menu when clicking outside
document.addEventListener('click', (e) => {
    const mobileMenu = document.querySelector('[x-show="mobileMenuOpen"]');
    const menuButton = document.querySelector('[x-on\\:click="mobileMenuOpen = !mobileMenuOpen"]');
    
    if (mobileMenu && menuButton && !mobileMenu.contains(e.target) && !menuButton.contains(e.target)) {
        const alpineData = mobileMenu._x_dataStack && mobileMenu._x_dataStack[0];
        if (alpineData && alpineData.mobileMenuOpen) {
            alpineData.mobileMenuOpen = false;
        }
    }
});

// Handle flash messages
document.addEventListener('DOMContentLoaded', () => {
    const alerts = document.querySelectorAll('.alert');
    alerts.forEach(alert => {
        setTimeout(() => {
            alert.style.opacity = '0';
            setTimeout(() => alert.remove(), 300);
        }, 5000);
    });
});

// Initialize tooltips
document.addEventListener('DOMContentLoaded', () => {
    const tooltips = document.querySelectorAll('[data-tooltip]');
    tooltips.forEach(tooltip => {
        tooltip.addEventListener('mouseenter', (e) => {
            const text = e.target.getAttribute('data-tooltip');
            const tooltipEl = document.createElement('div');
            tooltipEl.className = 'tooltip bg-gray-900 text-white px-2 py-1 rounded text-sm absolute z-50';
            tooltipEl.textContent = text;
            document.body.appendChild(tooltipEl);
            
            const rect = e.target.getBoundingClientRect();
            tooltipEl.style.top = rect.bottom + 5 + 'px';
            tooltipEl.style.left = rect.left + (rect.width - tooltipEl.offsetWidth) / 2 + 'px';
        });
        
        tooltip.addEventListener('mouseleave', () => {
            const tooltips = document.querySelectorAll('.tooltip');
            tooltips.forEach(t => t.remove());
        });
    });
});

// Handle dropdown menus
document.addEventListener('click', (e) => {
    const dropdowns = document.querySelectorAll('[x-show]');
    dropdowns.forEach(dropdown => {
        if (!dropdown.contains(e.target) && 
            !e.target.matches('[x-on\\:click*="open = !open"]')) {
            const alpineData = dropdown._x_dataStack && dropdown._x_dataStack[0];
            if (alpineData && alpineData.open) {
                alpineData.open = false;
            }
        }
    });
});

// Theme management
const themeManager = {
    init() {
        // Set up toggle button when DOM is loaded
        document.addEventListener('DOMContentLoaded', () => {
            const toggleBtn = document.getElementById('theme-toggle');
            if (toggleBtn) {
                toggleBtn.addEventListener('click', () => {
                    this.toggleTheme();
                });
            }

            // Watch for system theme changes
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                if (!localStorage.theme) {
                    this.setTheme(e.matches ? 'dark' : 'light');
                }
            });

            // Set initial theme icon state
            this.updateThemeIcon();
        });
    },

    setTheme(theme) {
        if (theme === 'dark') {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark');
        }
        
        localStorage.setItem('theme', theme);
        this.updateThemeIcon();
    },

    toggleTheme() {
        const isDark = document.documentElement.classList.contains('dark');
        this.setTheme(isDark ? 'light' : 'dark');
    },

    updateThemeIcon() {
        const isDark = document.documentElement.classList.contains('dark');
        const sunIcon = document.querySelector('#theme-toggle .fa-sun');
        const moonIcon = document.querySelector('#theme-toggle .fa-moon');
        
        if (sunIcon && moonIcon) {
            // Show sun icon in dark mode (to indicate you can switch to light)
            // Show moon icon in light mode (to indicate you can switch to dark)
            if (isDark) {
                sunIcon.classList.remove('hidden');
                moonIcon.classList.add('hidden');
            } else {
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
            }
        }
    }
};

// Initialize theme management
themeManager.init();