MediaWiki:Common.js: Różnice pomiędzy wersjami

Aktualna wersja na dzień 15:23, 16 paź 2025

// Dark Mode Manager with Cookie Storage
(function() {
    'use strict';
    
    const DARK_MODE_CLASS = 'skin-dark-mode';
    const COOKIE_NAME = 'mw_dark_mode';
    const COOKIE_EXPIRE_DAYS = 365;
    
    class DarkModeManager {
        constructor() {
            this.init();
        }
        
        init() {
            this.applySavedPreference();
            this.processTemplateMarkers();
            this.createFixedToggle();
            this.watchForDynamicContent();
        }
        
        // Cookie management
        setCookie(name, value, days) {
            const date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            const expires = "expires=" + date.toUTCString();
            document.cookie = name + "=" + value + ";" + expires + ";path=/";
        }
        
        getCookie(name) {
            const nameEQ = name + "=";
            const ca = document.cookie.split(';');
            for(let i = 0; i < ca.length; i++) {
                let c = ca[i];
                while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
            }
            return null;
        }
        
        isDarkMode() {
            const cookie = this.getCookie(COOKIE_NAME);
            return cookie === 'true';
        }
        
        setDarkMode(enabled) {
            this.setCookie(COOKIE_NAME, enabled, COOKIE_EXPIRE_DAYS);
            this.applyDarkMode(enabled);
            this.updateAllToggleButtons(enabled);
        }
        
        toggle() {
            this.setDarkMode(!this.isDarkMode());
        }
        
        applyDarkMode(enabled) {
            if (enabled) {
                document.documentElement.classList.add(DARK_MODE_CLASS);
            } else {
                document.documentElement.classList.remove(DARK_MODE_CLASS);
            }
            this.protectImages();
        }
        
        applySavedPreference() {
            const isDark = this.isDarkMode();
            this.applyDarkMode(isDark);
        }
        
        protectImages() {
            const images = document.querySelectorAll('img, .image, .thumbimage, .mw-file-element');
            images.forEach(img => {
                img.style.filter = 'none';
                img.style.backgroundColor = 'transparent';
            });
        }
        
        processTemplateMarkers() {
            this.replaceCustomElements();
        }
        
        replaceCustomElements() {
            const customElements = document.querySelectorAll('dark-toggle');
            customElements.forEach(element => {
                element.innerHTML = this.createToggleButtonHTML(this.isDarkMode());
                setTimeout(() => {
                    const button = element.querySelector('button');
                    if (button) {
                        button.addEventListener('click', () => this.toggle());
                    }
                }, 0);
            });
        }
        
        createToggleButtonHTML(isDark) {
            const icon = isDark ? '☀️' : '🌙';
            const text = isDark ? ' Light Mode' : ' Dark Mode';
            const modeClass = isDark ? 'light' : '';
            
            return `<button class="dark-mode-toggle-button ${modeClass}">
                <span class="toggle-icon">${icon}</span>
                <span class="toggle-text">${text}</span>
            </button>`;
        }
        
        createFixedToggle() {
            const existingToggle = document.getElementById('darkModeToggleFixed');
            if (existingToggle) existingToggle.remove();
            
            const button = document.createElement('button');
            button.id = 'darkModeToggleFixed';
            button.className = `dark-mode-toggle-fixed ${this.isDarkMode() ? 'light' : ''}`;
            button.innerHTML = this.isDarkMode() ? 
                '<span class="toggle-icon">☀️</span><span class="toggle-text">Light Mode</span>' :
                '<span class="toggle-icon">🌙</span><span class="toggle-text">Dark Mode</span>';
            button.title = this.isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode';
            
            button.addEventListener('click', () => this.toggle());
            document.body.appendChild(button);
        }
        
        updateAllToggleButtons(isDark) {
            const inlineButtons = document.querySelectorAll('.dark-mode-toggle-button');
            inlineButtons.forEach(button => {
                const icon = button.querySelector('.toggle-icon');
                const text = button.querySelector('.toggle-text');
                
                if (isDark) {
                    icon.textContent = '☀️';
                    text.textContent = ' Light Mode';
                    button.classList.add('light');
                } else {
                    icon.textContent = '🌙';
                    text.textContent = ' Dark Mode';
                    button.classList.remove('light');
                }
            });
            
            const fixedButton = document.getElementById('darkModeToggleFixed');
            if (fixedButton) {
                const icon = fixedButton.querySelector('.toggle-icon');
                const text = fixedButton.querySelector('.toggle-text');
                
                if (isDark) {
                    icon.textContent = '☀️';
                    text.textContent = 'Light Mode';
                    fixedButton.classList.add('light');
                    fixedButton.title = 'Switch to light mode';
                } else {
                    icon.textContent = '🌙';
                    text.textContent = 'Dark Mode';
                    fixedButton.classList.remove('light');
                    fixedButton.title = 'Switch to dark mode';
                }
            }
        }
        
        watchForDynamicContent() {
            const observer = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.addedNodes.length) {
                        mutation.addedNodes.forEach((node) => {
                            if (node.nodeType === Node.ELEMENT_NODE) {
                                if (node.querySelector && node.querySelector('dark-toggle')) {
                                    this.replaceCustomElements();
                                }
                            }
                        });
                    }
                });
            });
            
            observer.observe(document.body, {
                childList: true,
                subtree: true
            });
        }
    }
    
    // Initialize when DOM is ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            window.DarkModeManager = new DarkModeManager();
        });
    } else {
        window.DarkModeManager = new DarkModeManager();
    }
})();