MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus MILLENNIUM ARTS ISP - Hilfe | FAQ
Zur Navigation springen Zur Suche springen
KKeine Bearbeitungszusammenfassung
KKeine Bearbeitungszusammenfassung
Zeile 3: Zeile 3:
     console.log("Common.js wird geladen!");
     console.log("Common.js wird geladen!");


     // Ziel: Das HOSTING-Portal
     // Liste der Standard-Menüs, die eingeklappt starten
     var $portal = $('#p-HOSTING');
     var defaultCollapsed = ['navigation', 'SEARCH', 'TOOLBOX', 'LANGUAGES'];
    var $header = $portal.find('#p-HOSTING-label');
    var $content = $portal.find('.vector-menu-content-list');
    var isOpen = true; // Standardmäßig geöffnet


     // Debugging
     // Alle Vector-Menü-Portale durchlaufen
     console.log("Portal gefunden:", $portal.length > 0 ? "Ja" : "Nein");
     $('.vector-menu-portal').each(function() {
    console.log("Header:", $header.text());
        var $portal = $(this);
    console.log("Untermenüs:", $content.find('li').length);
        var $header = $portal.find('.vector-menu-heading');
        var $content = $portal.find('.vector-menu-content-list');
        var portalId = $portal.attr('id'); // z. B. "p-HOSTING"
        var portalName = portalId ? portalId.replace('p-', '') : '';


    // Pfeil-Indikator hinzufügen (▼ für geöffnet)
        // Nur Portale mit Untermenüs bearbeiten
    $header.prepend('<span class="menu-indicator">▼</span> ');
        if ($content.find('li').length > 0) {
   
            console.log("Portal:", portalName, "Untermenüs:", $content.find('li').length);
    // 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' // Sanfte Rotation über 0.3 Sekunden
    });
   
    // Inhalt standardmäßig sichtbar
    $content.show();


    // Klick-Event mit synchroner Animation
            // Indikator hinzufügen (▼ für ausgeklappt, ▶ für eingeklappt)
    $header.click(function(e) {
            $header.prepend('<span class="menu-indicator">▼</span> ');
        e.preventDefault();
 
       
             // Styling
        var $indicator = $header.find('.menu-indicator');
             $header.css({
       
                 'cursor': 'pointer',
        if (isOpen) {
                'font-weight': 'bold',
             // Schließen: Inhalt einklappen, Pfeil nach rechts drehen
                'display': 'flex',
             $content.slideUp(300);
                'align-items': 'center'
            $indicator.css({
                 'transform': 'rotate(-90deg)' // Dreht nach rechts (▶)
             });
             });
        } else {
            $header.find('.menu-indicator').css({
             // Öffnen: Inhalt ausklappen, Pfeil nach unten drehen
                'margin-right': '5px',
             $content.slideDown(300);
                'transition': 'transform 0.3s ease'
            $indicator.css({
            });
                'transform': 'rotate(0deg)' // Dreht nach unten (▼)
 
            // Standardzustand festlegen
            var isOpen = !defaultCollapsed.includes(portalName); // Ausgeklappt, außer für defaultCollapsed
            if (isOpen) {
                $content.show();
                $header.find('.menu-indicator').css('transform', 'rotate(0deg)');
            } else {
                $content.hide();
                $header.find('.menu-indicator').css('transform', 'rotate(-90deg)');
            }
 
             // Klick-Event mit synchroner Animation
             $header.click(function(e) {
                e.preventDefault();
                var $indicator = $header.find('.menu-indicator');
 
                if (isOpen) {
                    $content.slideUp(300);
                    $indicator.css('transform', 'rotate(-90deg)');
                } else {
                    $content.slideDown(300);
                    $indicator.css('transform', 'rotate(0deg)');
                }
                isOpen = !isOpen; // Zustand umschalten
             });
             });
         }
         }
        isOpen = !isOpen; // Zustand umschalten
     });
     });
});
});

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

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

    // Liste der Standard-Menüs, die eingeklappt starten
    var defaultCollapsed = ['navigation', 'SEARCH', 'TOOLBOX', 'LANGUAGES'];

    // Alle Vector-Menü-Portale durchlaufen
    $('.vector-menu-portal').each(function() {
        var $portal = $(this);
        var $header = $portal.find('.vector-menu-heading');
        var $content = $portal.find('.vector-menu-content-list');
        var portalId = $portal.attr('id'); // z. B. "p-HOSTING"
        var portalName = portalId ? portalId.replace('p-', '') : '';

        // Nur Portale mit Untermenüs bearbeiten
        if ($content.find('li').length > 0) {
            console.log("Portal:", portalName, "Untermenüs:", $content.find('li').length);

            // Indikator hinzufügen (▼ für ausgeklappt, ▶ für eingeklappt)
            $header.prepend('<span class="menu-indicator">▼</span> ');

            // Styling
            $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'
            });

            // Standardzustand festlegen
            var isOpen = !defaultCollapsed.includes(portalName); // Ausgeklappt, außer für defaultCollapsed
            if (isOpen) {
                $content.show();
                $header.find('.menu-indicator').css('transform', 'rotate(0deg)');
            } else {
                $content.hide();
                $header.find('.menu-indicator').css('transform', 'rotate(-90deg)');
            }

            // Klick-Event mit synchroner Animation
            $header.click(function(e) {
                e.preventDefault();
                var $indicator = $header.find('.menu-indicator');

                if (isOpen) {
                    $content.slideUp(300);
                    $indicator.css('transform', 'rotate(-90deg)');
                } else {
                    $content.slideDown(300);
                    $indicator.css('transform', 'rotate(0deg)');
                }
                isOpen = !isOpen; // Zustand umschalten
            });
        }
    });
});