Zum Inhalt springen

MediaWiki:Common.js: Unterschied zwischen den Versionen

Aus Pixopedia
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
mw.loader.using(['mediawiki.util'], function () {
// Header so früh wie möglich einfügen – nur jQuery voraussetzen
     $(function () {
mw.loader.using('jquery').done(function () {
     // Warten, bis <body> existiert (aber NICHT auf komplettes DOM)
    var interval = setInterval(function () {
         var $body = $('body');
         var $body = $('body');
        if (!$body.length) {
            return;
        }
        clearInterval(interval);


         /***********************
         /***********************
         * Eigenen Header einfügen
         * Eigenen Header einfügen (sofort sichtbar)
         ***********************/
         ***********************/
         var headerHtml = '' +
         var headerHtml = '' +
Zeile 22: Zeile 28:


         /***********************
         /***********************
         * 1) Suche: Sticky-Header-Suche nutzen
         * 1) Suche-Icon (keine Abhängigkeit vom Sticky-Header)
         ***********************/
         ***********************/
         // Icon aus dem Vector-Sticky-Header nehmen, falls vorhanden
         // Wir bauen IMMER unser eigenes Icon, damit der Header sofort da ist
         var $stickySearchIcon = $('.vector-sticky-header-icon-start').first();
         var $searchLink = $('<button>', {
        if ($stickySearchIcon.length) {
            type: 'button',
            $stickySearchIcon
            class: 'pixo-header-icon',
                .addClass('pixo-header-icon')
            title: 'Suche'
                .appendTo($left);
        }).text('🔍');
        } 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
        // Fokus auf Standard-Suchfeld, sobald es existiert
            $searchLink.on('click', function () {
        $searchLink.on('click', function () {
                 $('#searchInput, #mw-searchInput').first().trigger('focus');
            var $input = $('#searchInput, #mw-searchInput').first();
             });
            if ($input.length) {
                $input.trigger('focus');
            } else {
                // Falls noch nicht da: später fokussieren
                 setTimeout(function () {
                    $('#searchInput, #mw-searchInput').first().trigger('focus');
                }, 200);
             }
        });


            $left.append($searchLink);
        $left.append($searchLink);
        }


         /***********************
         /***********************
         * 2) Logo + Titel in die Mitte
         * 2) Logo + Titel in die Mitte
        *    (wartet nur auf .mw-logo, blockiert aber nicht den Header)
         ***********************/
         ***********************/
         var $logoLink = $('.mw-logo').first();
         function attachLogo() {
        if ($logoLink.length) {
            var $logoLink = $('.mw-logo').first();
            $logoLink.appendTo($center).css({ margin: 0 });
            if ($logoLink.length) {
         } else {
                $logoLink.appendTo($center).css({ margin: 0 });
             // Fallback, falls kein .mw-logo vorhanden ist
                return true;
             var $home = $('<a>', {
            }
                href: mw.util.getUrl('Start'),
            return false;
                 class: 'pixo-header-icon',
         }
                 title: 'Startseite'
 
            }).text('Pixopedia');
        // 1. Versuch sofort
             $center.append($home);
        if (!attachLogo()) {
             // 2. Versuche noch kurz nachzuladen
            var logoTries = 0;
             var logoInterval = setInterval(function () {
                 logoTries++;
                 if (attachLogo() || logoTries > 20) { // max ~2s
                    clearInterval(logoInterval);
                }
             }, 100);
         }
         }


Zeile 65: Zeile 80:
         * 3) Benutzerbereich rechts
         * 3) Benutzerbereich rechts
         ***********************/
         ***********************/
         var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet
         mw.loader.using('mediawiki.user').then(function () {
            var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet
 
            if (userName) {
                // Angemeldeter User: vorhandene Menüs verwenden, sobald sie existieren
                function attachUserMenus() {
                    var done = true;


        if (userName) {
                    var $userPage = $('#p-vector-user-menu-userpage').first();
            // Angemeldeter User: vorhandene Menüs verwenden
                    if ($userPage.length && !$userPage.parent().is($right)) {
            var $userPage = $('#p-vector-user-menu-userpage').first();
                        $userPage.appendTo($right).addClass('pixo-header-icon');
            var $userMenu = $('#vector-user-links-dropdown').first();
                    } else if (!$userPage.length) {
                        done = false;
                    }


            if ($userPage.length) {
                    var $userMenu = $('#vector-user-links-dropdown').first();
                $userPage
                    if ($userMenu.length && !$userMenu.parent().is($right)) {
                    .appendTo($right)
                        $userMenu.appendTo($right).addClass('pixo-header-icon');
                    .addClass('pixo-header-icon');
                    } else if (!$userMenu.length) {
            }
                        done = false;
                    }
 
                    return done;
                }


            if ($userMenu.length) {
                // Sofort versuchen, dann noch kurz pollen
                $userMenu
                if (!attachUserMenus()) {
                     .appendTo($right)
                    var tries = 0;
                     .addClass('pixo-header-icon');
                     var userInterval = setInterval(function () {
            }
                        tries++;
        } else {
                        if (attachUserMenus() || tries > 20) {
            // Kein Login: Registrieren + Login Icons
                            clearInterval(userInterval);
            var $register = $('<a>', {
                        }
                href: mw.util.getUrl('Special:CreateAccount'),
                     }, 100);
                class: 'pixo-header-icon',
                }
                title: 'Benutzer registrieren'
            } else {
            }).text('✚');
                // Kein Login: Registrieren + Login Icons (sofort)
                var $register = $('<a>', {
                    href: mw.util.getUrl('Special:CreateAccount'),
                    class: 'pixo-header-icon',
                    title: 'Benutzer registrieren'
                }).text('✚');


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


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

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

// Header so früh wie möglich einfügen – nur jQuery voraussetzen
mw.loader.using('jquery').done(function () {
    // Warten, bis <body> existiert (aber NICHT auf komplettes DOM)
    var interval = setInterval(function () {
        var $body = $('body');
        if (!$body.length) {
            return;
        }
        clearInterval(interval);

        /***********************
         * Eigenen Header einfügen (sofort sichtbar)
         ***********************/
        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-Icon (keine Abhängigkeit vom Sticky-Header)
         ***********************/
        // Wir bauen IMMER unser eigenes Icon, damit der Header sofort da ist
        var $searchLink = $('<button>', {
            type: 'button',
            class: 'pixo-header-icon',
            title: 'Suche'
        }).text('🔍');

        // Fokus auf Standard-Suchfeld, sobald es existiert
        $searchLink.on('click', function () {
            var $input = $('#searchInput, #mw-searchInput').first();
            if ($input.length) {
                $input.trigger('focus');
            } else {
                // Falls noch nicht da: später fokussieren
                setTimeout(function () {
                    $('#searchInput, #mw-searchInput').first().trigger('focus');
                }, 200);
            }
        });

        $left.append($searchLink);

        /***********************
         * 2) Logo + Titel in die Mitte
         *    (wartet nur auf .mw-logo, blockiert aber nicht den Header)
         ***********************/
        function attachLogo() {
            var $logoLink = $('.mw-logo').first();
            if ($logoLink.length) {
                $logoLink.appendTo($center).css({ margin: 0 });
                return true;
            }
            return false;
        }

        // 1. Versuch sofort
        if (!attachLogo()) {
            // 2. Versuche noch kurz nachzuladen
            var logoTries = 0;
            var logoInterval = setInterval(function () {
                logoTries++;
                if (attachLogo() || logoTries > 20) { // max ~2s
                    clearInterval(logoInterval);
                }
            }, 100);
        }

        /***********************
         * 3) Benutzerbereich rechts
         ***********************/
        mw.loader.using('mediawiki.user').then(function () {
            var userName = mw.config.get('wgUserName'); // null, wenn nicht angemeldet

            if (userName) {
                // Angemeldeter User: vorhandene Menüs verwenden, sobald sie existieren
                function attachUserMenus() {
                    var done = true;

                    var $userPage = $('#p-vector-user-menu-userpage').first();
                    if ($userPage.length && !$userPage.parent().is($right)) {
                        $userPage.appendTo($right).addClass('pixo-header-icon');
                    } else if (!$userPage.length) {
                        done = false;
                    }

                    var $userMenu = $('#vector-user-links-dropdown').first();
                    if ($userMenu.length && !$userMenu.parent().is($right)) {
                        $userMenu.appendTo($right).addClass('pixo-header-icon');
                    } else if (!$userMenu.length) {
                        done = false;
                    }

                    return done;
                }

                // Sofort versuchen, dann noch kurz pollen
                if (!attachUserMenus()) {
                    var tries = 0;
                    var userInterval = setInterval(function () {
                        tries++;
                        if (attachUserMenus() || tries > 20) {
                            clearInterval(userInterval);
                        }
                    }, 100);
                }
            } else {
                // Kein Login: Registrieren + Login Icons (sofort)
                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);
            }
        });
    }, 10);
});