MediaWiki:Common.js: Unterschied zwischen den Versionen

// MediaWiki Sidebar Toggle Script - Vanilla JS (Sichere Version)
(function() {
    'use strict';
    
    function initSidebar() {
        // NUR LINKE SIDEBAR - Suche nach Portlets in der Navigation
        var portlets = document.querySelectorAll('#mw-navigation .mw-portlet, #mw-panel .mw-portlet');
        
        console.log('Gefundene Portlets:', portlets.length); // Debug
        
        portlets.forEach(function(portlet) {
            // ÜBERSPRINGE System-Portlets (Tools, Edit, etc.)
            var portletId = portlet.id;
            var skipIds = [
                'p-cactions',      // Page actions (Edit, History, etc.)
                'p-tb',            // Toolbox
                'p-personal',      // Personal tools
                'p-namespaces',    // Namespaces
                'p-views',         // Views
                'p-search'         // Search
            ];
            
            if (skipIds.indexOf(portletId) !== -1) {
                console.log('Überspringe System-Portlet:', portletId);
                return;
            }
            
            var header = portlet.querySelector('h3');
            var portletBody = portlet.querySelector('.mw-portlet-body');
            
            if (!header || !portletBody) {
                return;
            }
            
            console.log('Initialisiere:', header.textContent); // Debug
            
            // Füge Icon hinzu (RECHTS vom Title)
            if (!header.querySelector('.toggle-icon')) {
                var icon = document.createElement('span');
                icon.className = 'toggle-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>';
                icon.style.marginLeft = '8px';
                icon.style.display = 'inline-block';
                icon.style.transition = 'transform 0.2s ease';
                icon.style.verticalAlign = 'middle';
                header.appendChild(icon);
            }
            
            // Cursor
            header.style.cursor = 'pointer';
            header.style.userSelect = 'none';
            
            // Initial Status - prüfe ob "open" Klasse existiert
            var isOpen = header.classList.contains('open');
            if (!isOpen) {
                portletBody.style.display = 'none';
                var icon = header.querySelector('.toggle-icon');
                icon.style.transform = 'rotate(-90deg)';
            }
            
            // Click Event
            header.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation(); // Verhindere Event-Bubbling
                console.log('KLICK!'); // Debug
                
                var icon = this.querySelector('.toggle-icon');
                var body = portlet.querySelector('.mw-portlet-body');
                
                if (body.style.display === 'none') {
                    body.style.display = 'block';
                    icon.style.transform = 'rotate(0deg)';
                    this.classList.add('open');
                    console.log('Geöffnet');
                } else {
                    body.style.display = 'none';
                    icon.style.transform = 'rotate(-90deg)';
                    this.classList.remove('open');
                    console.log('Geschlossen');
                }
            });
        });
    }
    
    // Warte bis DOM geladen ist
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebar);
    } else {
        initSidebar();
    }
})();