|
|
| Zeile 1: |
Zeile 1: |
| // ========================
| | mw.loader.using( 'mediawiki.util' ).then( function () { |
| // Toggle-Switch-CSS nachladen
| | var $stickyHeader = $( '#vector-sticky-header' ); |
| // ========================
| | var $stickyToggle = $stickyHeader.find( |
| | | '.vector-sticky-header-icon-start.vector-button-flush-left.vector-button-flush-right' |
| (function () {
| | ); |
| var href = '/darktest/toggle-switch.css';
| | var $typeahead = $( '.vector-typeahead-search-container' ); |
| | |
| 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/light-mode.css';
| |
| const DARK_CSS = '/darktest/dark-mode.css';
| |
|
| |
|
| let linkEl = document.getElementById('theme-css'); | | // Normale Suche ausblenden, nur Sticky-Variante verwenden |
| if (!linkEl) { | | $typeahead.hide(); |
| linkEl = document.createElement('link');
| |
| linkEl.id = 'theme-css';
| |
| linkEl.rel = 'stylesheet';
| |
| linkEl.href = LIGHT_CSS;
| |
| document.head.appendChild(linkEl);
| |
| }
| |
|
| |
|
| function applyTheme(theme) { | | // Klick auf das Icon toggelt die Sticky-Header-Suche |
| var checkbox = document.getElementById('theme-toggle-checkbox');
| | $stickyToggle.on( 'click', function () { |
| | | $stickyHeader.toggleClass( 'vector-header-search-toggled' ); |
| 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');
| |
| }
| |
| }); | | }); |
