MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus MILLENNIUM ARTS ISP - Hilfe | FAQ
Zur Navigation springen Zur Suche springen
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 7: Zeile 7:
     var $header = $portal.find('#p-HOSTING-label');
     var $header = $portal.find('#p-HOSTING-label');
     var $content = $portal.find('.vector-menu-content-list');
     var $content = $portal.find('.vector-menu-content-list');
     var isOpen = false;
     var isOpen = true; // Standardmäßig geöffnet


     // Debugging
     // Debugging
Zeile 14: Zeile 14:
     console.log("Untermenüs:", $content.find('li').length);
     console.log("Untermenüs:", $content.find('li').length);


     // Indikator hinzufügen (Plus-Symbol als Standard)
     // Pfeil-Indikator hinzufügen (▼ für geöffnet)
     $header.prepend('<span class="menu-indicator">+</span> ');
     $header.prepend('<span class="menu-indicator"></span> ');
      
      
     // Styling für Header und Indikator
     // Styling für Header und Indikator
Zeile 21: Zeile 21:
         'cursor': 'pointer',
         'cursor': 'pointer',
         'font-weight': 'bold',
         'font-weight': 'bold',
         'display': 'flex', // Für bessere Ausrichtung
         'display': 'flex',
         'align-items': 'center'
         'align-items': 'center'
     });
     });
     $header.find('.menu-indicator').css({
     $header.find('.menu-indicator').css({
         'margin-right': '5px',
         'margin-right': '5px',
         'transition': 'transform 0.1s ease' // Sanfte Rotation
         'transition': 'transform 0.3s ease'
     });
     });
      
      
     // Inhalt standardmäßig einklappen
     // Inhalt standardmäßig sichtbar (kein .hide())
     $content.hide();
     $content.show(); // Explizit sichtbar machen


     // Klick-Event
     // Klick-Event
Zeile 36: Zeile 36:
         e.preventDefault();
         e.preventDefault();
         $content.slideToggle(300, function() {
         $content.slideToggle(300, function() {
            // Zustand aktualisieren und Indikator ändern
             isOpen = !isOpen;
             isOpen = !isOpen;
             var $indicator = $header.find('.menu-indicator');
             var $indicator = $header.find('.menu-indicator');
             if (isOpen) {
             if (isOpen) {
                 $indicator.text(''); // Minus bei geöffnet
                 $indicator.text(''); // Nach unten bei geöffnet
                 $indicator.css('transform', 'rotate(0deg)');
                 $indicator.css('transform', 'rotate(0deg)');
             } else {
             } else {
                 $indicator.text('+'); // Plus bei geschlossen
                 $indicator.text(''); // Nach rechts bei geschlossen
                 $indicator.css('transform', 'rotate(0deg)'); // Zurücksetzen
                 $indicator.css('transform', 'rotate(0deg)');
             }
             }
         });
         });
     });
     });
});
});

Version vom 30. März 2025, 11:02 Uhr

/* Das folgende JavaScript wird für alle Benutzer geladen. */
$(document).ready(function() {
    console.log("Common.js wird geladen!");

    // Ziel: Das HOSTING-Portal
    var $portal = $('#p-HOSTING');
    var $header = $portal.find('#p-HOSTING-label');
    var $content = $portal.find('.vector-menu-content-list');
    var isOpen = true; // Standardmäßig geöffnet

    // Debugging
    console.log("Portal gefunden:", $portal.length > 0 ? "Ja" : "Nein");
    console.log("Header:", $header.text());
    console.log("Untermenüs:", $content.find('li').length);

    // Pfeil-Indikator hinzufügen (▼ für geöffnet)
    $header.prepend('<span class="menu-indicator">▼</span> ');
    
    // Styling für Header und Indikator
    $header.css({
        'cursor': 'pointer',
        'font-weight': 'bold',
        'display': 'flex',
        'align-items': 'center'
    });
    $header.find('.menu-indicator').css({
        'margin-right': '5px',
        'transition': 'transform 0.3s ease'
    });
    
    // Inhalt standardmäßig sichtbar (kein .hide())
    $content.show(); // Explizit sichtbar machen

    // Klick-Event
    $header.click(function(e) {
        e.preventDefault();
        $content.slideToggle(300, function() {
            isOpen = !isOpen;
            var $indicator = $header.find('.menu-indicator');
            if (isOpen) {
                $indicator.text('▼'); // Nach unten bei geöffnet
                $indicator.css('transform', 'rotate(0deg)');
            } else {
                $indicator.text('▶'); // Nach rechts bei geschlossen
                $indicator.css('transform', 'rotate(0deg)');
            }
        });
    });
});