MediaWiki:Common.js: Unterschied zwischen den Versionen

// MediaWiki Sidebar Toggle Script - Vanilla JS (Sichere Version)
/*------------------------Sidebar Toggle Script ------------------------------------------*/
// MediaWiki Sidebar Toggle Script - Mobile Optimiert
(function() {
    'use strict';
    
    function initSidebar() {
        var portlets = document.querySelectorAll('#p-Players, #p-World, #p-Items_and_Gear, #p-Guides, #p-Community');
        
        console.log('Gefundene Portlets:', portlets.length);
        
        portlets.forEach(function(portlet) {
            var header = portlet.querySelector('h3');
            var portletBody = portlet.querySelector('.mw-portlet-body');
            
            if (!header || !portletBody) {
                return;
            }
            
            console.log('Initialisiere:', header.textContent);
            
            // Entferne altes Icon falls vorhanden
            var oldIcon = header.querySelector('.toggle-icon');
            if (oldIcon) {
                oldIcon.remove();
            }
            
            // Erstelle Icon-Container
            var icon = document.createElement('span');
            icon.className = 'toggle-icon';
            icon.style.marginLeft = '8px';
            icon.style.display = 'inline-flex';
            icon.style.alignItems = 'center';
            icon.style.justifyContent = 'center';
            icon.style.transition = 'transform 0.2s ease';
            icon.style.verticalAlign = 'middle';
            icon.style.flexShrink = '0';
            
            // SVG Icon
            icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>';
            
            // Füge Icon am Ende des Headers hinzu
            header.appendChild(icon);
            
            // Header Styles
            header.style.cursor = 'pointer';
            header.style.userSelect = 'none';
            header.style.display = 'flex';
            header.style.alignItems = 'center';
            header.style.justifyContent = 'space-between';
            
            // Initial Status - DEFAULT OFFEN
            var isOpen = !header.classList.contains('closed');
            if (!isOpen) {
                portletBody.style.display = 'none';
                icon.style.transform = 'rotate(-90deg)';
            } else {
                portletBody.style.display = 'block';
                icon.style.transform = 'rotate(0deg)';
            }
            
            // Click Event mit Touch-Support
            var toggleMenu = function(e) {
                e.preventDefault();
                e.stopPropagation();
                
                var icon = header.querySelector('.toggle-icon');
                var body = portlet.querySelector('.mw-portlet-body');
                
                if (body.style.display === 'none') {
                    // Öffnen
                    body.style.display = 'block';
                    icon.style.transform = 'rotate(0deg)';
                    header.classList.remove('closed');
                    header.classList.add('open');
                    console.log('Geöffnet:', header.textContent);
                } else {
                    // Schließen
                    body.style.display = 'none';
                    icon.style.transform = 'rotate(-90deg)';
                    header.classList.add('closed');
                    header.classList.remove('open');
                    console.log('Geschlossen:', header.textContent);
                }
            };
            
            // Sowohl click als auch touchstart für besseres Mobile-Erlebnis
            header.addEventListener('click', toggleMenu);
            
            // Verhindere Doppel-Trigger auf Mobile
            var touchHandled = false;
            header.addEventListener('touchstart', function(e) {
                if (!touchHandled) {
                    touchHandled = true;
                    toggleMenu(e);
                    setTimeout(function() {
                        touchHandled = false;
                    }, 300);
                }
            });
        });
    }
    
    // Warte bis DOM geladen ist
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebar);
    } else {
        initSidebar();
    }
    
    // Re-initialisiere wenn Sidebar dynamisch geladen wird
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                initSidebar();
            }
        });
    });
    
    if (document.body) {
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });
    }
})();


/*------------------------Landing Features------------------------------------------*/

(function() {
    'use strict';
    
    function initLandingTabs() {
        const tabs = document.querySelectorAll('.tab-button');
        const grids = document.querySelectorAll('.landing-grid');
        
        console.log('Tabs gefunden:', tabs.length); // Debug
        console.log('Grids gefunden:', grids.length); // Debug
        
        if (tabs.length === 0 || grids.length === 0) {
            console.log('Landing Features nicht gefunden - warte...');
            return;
        }
        
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                console.log('Tab geklickt:', this.dataset.tab); // Debug
                
                // Remove active from all tabs
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // Hide all grids
                grids.forEach(g => g.classList.remove('active'));
                
                // Show selected grid
                const targetGrid = document.getElementById(this.dataset.tab);
                if (targetGrid) {
                    targetGrid.classList.add('active');
                    console.log('Grid aktiviert:', this.dataset.tab);
                } else {
                    console.log('Grid nicht gefunden:', this.dataset.tab);
                }
            });
        });
        
        console.log('Landing Tabs initialisiert!');
    }
    
    // Mehrfache Versuche, den Code zu laden
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initLandingTabs);
    } else {
        initLandingTabs();
    }
    
    // Zusätzlicher Versuch nach 500ms (falls MediaWiki später lädt)
    setTimeout(initLandingTabs, 500);
    
})();

// Collapsible Sidebar Sections - Mobile
$(document).ready(function() {
    // Toggle für collapsible sections
    $('.sidebar-collapsible, h3[style*="cursor: pointer"]').click(function(e) {
        e.preventDefault();
        $(this).toggleClass('closed');
        $(this).next('.mw-portlet-body, ul').slideToggle(200);
    });
    
    // Schließe Sidebar beim Klick außerhalb (Mobile)
    if (window.innerWidth <= 850) {
        $('#mw-sidebar-checkbox:checked ~ .mw-sidebar').on('click', function(e) {
            if (e.target === this) {
                $('#mw-sidebar-checkbox').prop('checked', false);
            }
        });
    }
});