MediaWiki:Common.js

Hinweis: Leere nach dem Veröffentlichen den Browser-Cache, um die Änderungen sehen zu können.

• Firefox/Safari: Umschalttaste drücken und gleichzeitig Aktualisieren anklicken oder entweder Strg+F5 oder Strg+R (⌘+R auf dem Mac) drücken
• Google Chrome: Umschalttaste+Strg+R (⌘+Umschalttaste+R auf dem Mac) drücken
• Edge: Strg+F5 drücken oder Strg drücken und gleichzeitig Aktualisieren anklicken

// ========================
// Toggle-Switch-CSS nachladen
// ========================

(function () {
    var href = '/darktest/toggle-switch.css';

    var existing = document.querySelector('link[rel="stylesheet"][href="' + href + '"]');
    if (existing) return;

    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = href;
    document.head.appendChild(link);
})();

// =============
// Sticky-Header: Logo+Titel (Mitte) und Slider (rechts) einbinden
// =============
mw.loader.using('mediawiki.util', function () {
    if (mw.config.get('skin') !== 'vector-2022') {
        return;
    }

    mw.hook('wikipage.content').add(function () {
        var stickyHeader = document.querySelector('.vector-sticky-header');
        if (!stickyHeader) return;

        // ---------- Mitte: Logo + Titel ----------
        if (!stickyHeader.querySelector('.pixo-sticky-center')) {
            var center = document.createElement('div');
            center.className = 'pixo-sticky-center';

            center.innerHTML = ''
                + '<a href="/Start" class="mw-logo pixo-sticky-logo">'
                + '  <img class="mw-logo-icon" src="/resources/assets/change-your-logo-icon.svg"'
                + '       alt="" aria-hidden="true" height="50" width="50">'
                + '  <span class="mw-logo-container skin-invert">'
                + '    <strong class="mw-logo-wordmark">Pixopedia</strong>'
                + '  </span>'
                + '</a>';

            var start = stickyHeader.querySelector('.vector-sticky-header-start');
            var end   = stickyHeader.querySelector('.vector-sticky-header-end');

            if (start && end && end.parentNode === stickyHeader) {
                stickyHeader.insertBefore(center, end);
            } else {
                stickyHeader.appendChild(center);
            }
        }

        // ---------- Rechts: Theme-Slider ----------
        if (!document.getElementById('theme-toggle-checkbox')) {
            var wrapper = document.createElement('div');
            wrapper.className = 'vector-header-dark-toggle';

            wrapper.innerHTML = ''
                + '<label class="theme-toggle-switch">'
                + '  <input type="checkbox" id="theme-toggle-checkbox" />'
                + '  <span class="theme-toggle-slider"></span>'
                + '</label>';

            // ans rechte Ende des Sticky-Headers setzen
            stickyHeader.appendChild(wrapper);
        }

        // Wenn der Slider neu eingefügt wurde, Theme-Status auf Checkbox anwenden
        if (typeof window.__applyThemeFromCurrent === 'function') {
            window.__applyThemeFromCurrent();
        }
    });
});

// ================
// Switcher als Modul
// ================
(function () {
    const THEME_KEY = 'custom-site-theme';
    const LIGHT_CSS = '/darktest/styles.css';
    const DARK_CSS  = '/darktest/dark-mode.css';

    let linkEl = document.getElementById('theme-css');
    if (!linkEl) {
        linkEl = document.createElement('link');
        linkEl.id = 'theme-css';
        linkEl.rel = 'stylesheet';
        linkEl.href = LIGHT_CSS;
        document.head.appendChild(linkEl);
    }

    function applyTheme(theme) {
        var checkbox = document.getElementById('theme-toggle-checkbox');

        if (theme === 'dark') {
            linkEl.href = DARK_CSS;
            document.documentElement.classList.add('theme-dark');
            document.documentElement.classList.remove('theme-light');
            if (checkbox) checkbox.checked = true;
        } else {
            linkEl.href = LIGHT_CSS;
            document.documentElement.classList.add('theme-light');
            document.documentElement.classList.remove('theme-dark');
            if (checkbox) checkbox.checked = false;
        }
    }

    let current = localStorage.getItem(THEME_KEY);
    if (!current) {
        const prefersDark = window.matchMedia &&
            window.matchMedia('(prefers-color-scheme: dark)').matches;
        current = prefersDark ? 'dark' : 'light';
    }

    // Helfer, damit der Slider nachträglich synchronisiert werden kann
    window.__applyThemeFromCurrent = function () {
        applyTheme(current);
    };

    // Direkt initial anwenden (falls Checkbox schon da ist, wird sie gesetzt)
    applyTheme(current);

    mw.hook('wikipage.content').add(function () {
        var checkbox = document.getElementById('theme-toggle-checkbox');
        if (!checkbox) return;

        // Doppelte Listener vermeiden
        checkbox.removeEventListener('change', checkbox.__themeChangeHandler || function () {});

        var handler = function () {
            current = checkbox.checked ? 'dark' : 'light';
            localStorage.setItem(THEME_KEY, current);
            applyTheme(current);
        };

        checkbox.__themeChangeHandler = handler;
        checkbox.addEventListener('change', handler);
    });
})();

/*   Placeholder Text in der Suchleiste überschreiben   */
mw.hook( 'wikipage.content' ).add( function () {
    var searchInput = document.querySelector(
        '.vector-sticky-header .cdx-text-input__input[type="search"]'
    );
    if (searchInput) {
        searchInput.setAttribute('placeholder', 'Suche');
    }
});