Zum Inhalt springen

MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Pixopedia
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 3: Zeile 3:
         var $body = $('body');
         var $body = $('body');


         // eigenen Header einfügen
         /***********************
        * Eigenen Header einfügen
        ***********************/
         var headerHtml = '' +
         var headerHtml = '' +
             '<div id="pixo-custom-header">' +
             '<div id="pixo-custom-header">' +
                 '<div id="pixo-custom-header-inner">' +             // NEU: innerer Container
                 '<div id="pixo-custom-header-inner">' +
                     '<div id="pixo-custom-header-left"></div>' +
                     '<div id="pixo-custom-header-left"></div>' +
                     '<div id="pixo-custom-header-center"></div>' +
                     '<div id="pixo-custom-header-center"></div>' +
Zeile 15: Zeile 17:
         $body.prepend(headerHtml);
         $body.prepend(headerHtml);


        // Referenzen
         var $left  = $('#pixo-custom-header-left');
         var $left  = $('#pixo-custom-header-left');
         var $center = $('#pixo-custom-header-center');
         var $center = $('#pixo-custom-header-center');
         var $right  = $('#pixo-custom-header-right');
         var $right  = $('#pixo-custom-header-right');


         /* 2. Suche: Sticky-Header-Suche statt normaler Suche */
         /***********************
        * 1) Suche: Sticky-Header-Suche nutzen
        ***********************/
        // Icon aus dem Vector-Sticky-Header nehmen, falls vorhanden
         var $stickySearchIcon = $('.vector-sticky-header-icon-start').first();
         var $stickySearchIcon = $('.vector-sticky-header-icon-start').first();
         if ($stickySearchIcon.length) {
         if ($stickySearchIcon.length) {
Zeile 26: Zeile 30:
                 .addClass('pixo-header-icon')
                 .addClass('pixo-header-icon')
                 .appendTo($left);
                 .appendTo($left);
        } else {
            // Fallback: normales Suchfeld-Icon
            var $searchLink = $('<button>', {
                type: 'button',
                class: 'pixo-header-icon',
                title: 'Suche'
            }).text('🔍');
            // on click: Fokus auf das normale Suchfeld setzen
            $searchLink.on('click', function () {
                $('#searchInput, #mw-searchInput').first().trigger('focus');
            });
            $left.append($searchLink);
         }
         }


         /* 3. Logo + Titel aus <a class="mw-logo"> nach Mitte */
         /***********************
        * 2) Logo + Titel in die Mitte
        ***********************/
         var $logoLink = $('.mw-logo').first();
         var $logoLink = $('.mw-logo').first();
         if ($logoLink.length) {
         if ($logoLink.length) {
             $logoLink
             $logoLink.appendTo($center).css({ margin: 0 });
                .appendTo($center)
        } else {
                .css({ margin: 0 });
            // Fallback, falls kein .mw-logo vorhanden ist
            var $home = $('<a>', {
                href: mw.util.getUrl('Start'),
                class: 'pixo-header-icon',
                title: 'Startseite'
            }).text('Pixopedia');
            $center.append($home);
         }
         }


         /* 4./5. Benutzerbereich rechts */
         /***********************
        * 3) Benutzerbereich rechts
        ***********************/
         var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet
         var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet


         if (userName) {
         if (userName) {
             // angemeldeter User: bestehende Menüs nehmen
             // Angemeldeter User: vorhandene Menüs verwenden
             var $userPage = $('#p-vector-user-menu-userpage');
             var $userPage = $('#p-vector-user-menu-userpage').first();
             var $userMenu = $('#vector-user-links-dropdown');
             var $userMenu = $('#vector-user-links-dropdown').first();


             if ($userPage.length) {
             if ($userPage.length) {
Zeile 49: Zeile 77:
                     .addClass('pixo-header-icon');
                     .addClass('pixo-header-icon');
             }
             }
             if ($userMenu.length) {
             if ($userMenu.length) {
                 $userMenu
                 $userMenu
Zeile 55: Zeile 84:
             }
             }
         } else {
         } else {
             // nicht angemeldet: eigene Icons für Registrieren / Login
             // Kein Login: Registrieren + Login Icons
             var $register = $('<a>', {
             var $register = $('<a>', {
                 href: mw.util.getUrl('Special:CreateAccount'),
                 href: mw.util.getUrl('Special:CreateAccount'),
                 class: 'pixo-header-icon',
                 class: 'pixo-header-icon',
                 title: 'Benutzer registrieren'
                 title: 'Benutzer registrieren'
             }).html('✚'); // hier eigenes SVG/Icon einbauen
             }).text('✚');


             var $login = $('<a>', {
             var $login = $('<a>', {
Zeile 66: Zeile 95:
                 class: 'pixo-header-icon',
                 class: 'pixo-header-icon',
                 title: 'Benutzeranmeldung'
                 title: 'Benutzeranmeldung'
             }).html('⮞'); // hier eigenes SVG/Icon einbauen
             }).text('⮞');


             $right.append($register, $login);
             $right.append($register, $login);

Version vom 5. März 2026, 04:01 Uhr

mw.loader.using(['mediawiki.util'], function () {
    $(function () {
        var $body = $('body');

        /***********************
         * Eigenen Header einfügen
         ***********************/
        var headerHtml = '' +
            '<div id="pixo-custom-header">' +
                '<div id="pixo-custom-header-inner">' +
                    '<div id="pixo-custom-header-left"></div>' +
                    '<div id="pixo-custom-header-center"></div>' +
                    '<div id="pixo-custom-header-right"></div>' +
                '</div>' +
            '</div>';

        $body.prepend(headerHtml);

        var $left   = $('#pixo-custom-header-left');
        var $center = $('#pixo-custom-header-center');
        var $right  = $('#pixo-custom-header-right');

        /***********************
         * 1) Suche: Sticky-Header-Suche nutzen
         ***********************/
        // Icon aus dem Vector-Sticky-Header nehmen, falls vorhanden
        var $stickySearchIcon = $('.vector-sticky-header-icon-start').first();
        if ($stickySearchIcon.length) {
            $stickySearchIcon
                .addClass('pixo-header-icon')
                .appendTo($left);
        } else {
            // Fallback: normales Suchfeld-Icon
            var $searchLink = $('<button>', {
                type: 'button',
                class: 'pixo-header-icon',
                title: 'Suche'
            }).text('🔍');

            // on click: Fokus auf das normale Suchfeld setzen
            $searchLink.on('click', function () {
                $('#searchInput, #mw-searchInput').first().trigger('focus');
            });

            $left.append($searchLink);
        }

        /***********************
         * 2) Logo + Titel in die Mitte
         ***********************/
        var $logoLink = $('.mw-logo').first();
        if ($logoLink.length) {
            $logoLink.appendTo($center).css({ margin: 0 });
        } else {
            // Fallback, falls kein .mw-logo vorhanden ist
            var $home = $('<a>', {
                href: mw.util.getUrl('Start'),
                class: 'pixo-header-icon',
                title: 'Startseite'
            }).text('Pixopedia');
            $center.append($home);
        }

        /***********************
         * 3) Benutzerbereich rechts
         ***********************/
        var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet

        if (userName) {
            // Angemeldeter User: vorhandene Menüs verwenden
            var $userPage = $('#p-vector-user-menu-userpage').first();
            var $userMenu = $('#vector-user-links-dropdown').first();

            if ($userPage.length) {
                $userPage
                    .appendTo($right)
                    .addClass('pixo-header-icon');
            }

            if ($userMenu.length) {
                $userMenu
                    .appendTo($right)
                    .addClass('pixo-header-icon');
            }
        } else {
            // Kein Login: Registrieren + Login Icons
            var $register = $('<a>', {
                href: mw.util.getUrl('Special:CreateAccount'),
                class: 'pixo-header-icon',
                title: 'Benutzer registrieren'
            }).text('✚');

            var $login = $('<a>', {
                href: mw.util.getUrl('Special:UserLogin'),
                class: 'pixo-header-icon',
                title: 'Benutzeranmeldung'
            }).text('⮞');

            $right.append($register, $login);
        }
    });
});