MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Lost Dreams Of Tomorrow Wiki
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 4: Zeile 4:
      
      
     function initSidebar() {
     function initSidebar() {
         // Finde alle sidebar-collapsible Überschriften
         // Suche nach ALLEN h3 Elementen in mw-portlet Containern
         var headers = document.querySelectorAll('.sidebar-collapsible');
         var portlets = document.querySelectorAll('.mw-portlet');
          
          
         console.log('Gefundene Headers:', headers.length); // Debug
         console.log('Gefundene Portlets:', portlets.length); // Debug
          
          
         headers.forEach(function(header) {
         portlets.forEach(function(portlet) {
             var portletBody = header.nextElementSibling;
            var header = portlet.querySelector('h3');
             var portletBody = portlet.querySelector('.mw-portlet-body');
              
              
             if (!portletBody || !portletBody.classList.contains('mw-portlet-body')) {
             if (!header || !portletBody) {
                 console.log('Kein portlet-body gefunden für:', header);
                 console.log('Header oder Body fehlt in Portlet');
                 return;
                 return;
             }
             }
           
            console.log('Initialisiere:', header.textContent); // Debug
              
              
             // Füge Icon hinzu
             // Füge Icon hinzu
Zeile 22: Zeile 25:
                 icon.className = 'toggle-icon';
                 icon.className = 'toggle-icon';
                 icon.textContent = '▼ ';
                 icon.textContent = '▼ ';
                icon.style.marginRight = '5px';
                 header.insertBefore(icon, header.firstChild);
                 header.insertBefore(icon, header.firstChild);
             }
             }
Zeile 27: Zeile 31:
             // Cursor
             // Cursor
             header.style.cursor = 'pointer';
             header.style.cursor = 'pointer';
            header.style.userSelect = 'none';
              
              
             // Initial Status
             // Initial Status - prüfe ob "open" Klasse existiert
             if (!header.classList.contains('open')) {
             var isOpen = header.classList.contains('open');
            if (!isOpen) {
                 portletBody.style.display = 'none';
                 portletBody.style.display = 'none';
                 header.querySelector('.toggle-icon').textContent = '▶ ';
                 header.querySelector('.toggle-icon').textContent = '▶ ';
Zeile 37: Zeile 43:
             header.addEventListener('click', function(e) {
             header.addEventListener('click', function(e) {
                 e.preventDefault();
                 e.preventDefault();
                 console.log('Klick auf:', this); // Debug
                 console.log('KLICK!'); // Debug
                  
                  
                 var icon = this.querySelector('.toggle-icon');
                 var icon = this.querySelector('.toggle-icon');
                 var body = this.nextElementSibling;
                 var body = portlet.querySelector('.mw-portlet-body');
                  
                  
                 if (body.style.display === 'none') {
                 if (body.style.display === 'none') {
Zeile 46: Zeile 52:
                     icon.textContent = '▼ ';
                     icon.textContent = '▼ ';
                     this.classList.add('open');
                     this.classList.add('open');
                    console.log('Geöffnet');
                 } else {
                 } else {
                     body.style.display = 'none';
                     body.style.display = 'none';
                     icon.textContent = '▶ ';
                     icon.textContent = '▶ ';
                     this.classList.remove('open');
                     this.classList.remove('open');
                    console.log('Geschlossen');
                 }
                 }
             });
             });

Version vom 11. Januar 2026, 04:29 Uhr

// MediaWiki Sidebar Toggle Script - Vanilla JS
(function() {
    'use strict';
    
    function initSidebar() {
        // Suche nach ALLEN h3 Elementen in mw-portlet Containern
        var portlets = document.querySelectorAll('.mw-portlet');
        
        console.log('Gefundene Portlets:', portlets.length); // Debug
        
        portlets.forEach(function(portlet) {
            var header = portlet.querySelector('h3');
            var portletBody = portlet.querySelector('.mw-portlet-body');
            
            if (!header || !portletBody) {
                console.log('Header oder Body fehlt in Portlet');
                return;
            }
            
            console.log('Initialisiere:', header.textContent); // Debug
            
            // Füge Icon hinzu
            if (!header.querySelector('.toggle-icon')) {
                var icon = document.createElement('span');
                icon.className = 'toggle-icon';
                icon.textContent = '▼ ';
                icon.style.marginRight = '5px';
                header.insertBefore(icon, header.firstChild);
            }
            
            // 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';
                header.querySelector('.toggle-icon').textContent = '▶ ';
            }
            
            // Click Event
            header.addEventListener('click', function(e) {
                e.preventDefault();
                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.textContent = '▼ ';
                    this.classList.add('open');
                    console.log('Geöffnet');
                } else {
                    body.style.display = 'none';
                    icon.textContent = '▶ ';
                    this.classList.remove('open');
                    console.log('Geschlossen');
                }
            });
        });
    }
    
    // Warte bis DOM geladen ist
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebar);
    } else {
        initSidebar();
    }
})();