|
Tags: Blanking Manual revert |
| Line 1: |
Line 1: |
| /* =====================================================
| |
| EARLY THEME APPLICATION (Prevents FOUC as much as possible)
| |
| ===================================================== */
| |
|
| |
|
| (function () {
| |
| try {
| |
| const savedTheme = localStorage.getItem('lt-theme');
| |
|
| |
| if (savedTheme === 'mementos') {
| |
| document.documentElement.classList.add('theme-mementos');
| |
| } else if (savedTheme === 'courtroom') {
| |
| document.documentElement.classList.add('theme-courtroom');
| |
| }
| |
| } catch (e) {}
| |
| })();
| |
|
| |
| console.log("Theme system loaded");
| |
|
| |
| /* =====================================================
| |
| MAIN LOGIC
| |
| ===================================================== */
| |
|
| |
| mw.loader.using(['mediawiki.util']).then(function () {
| |
|
| |
| console.log("mw loader ready");
| |
|
| |
| /* ======================
| |
| APPLY THEME
| |
| ====================== */
| |
|
| |
| function applyTheme(theme, skipSave) {
| |
|
| |
| document.documentElement.classList.remove('theme-courtroom', 'theme-mementos');
| |
|
| |
| if (theme === 'mementos') {
| |
| document.documentElement.classList.add('theme-mementos');
| |
| }
| |
|
| |
| if (theme === 'courtroom') {
| |
| document.documentElement.classList.add('theme-courtroom');
| |
| }
| |
|
| |
| if (!skipSave) {
| |
| localStorage.setItem('lt-theme', theme);
| |
| }
| |
|
| |
| updateThemeSelection(theme);
| |
| }
| |
|
| |
| /* ======================
| |
| UPDATE BUTTON STATE
| |
| ====================== */
| |
|
| |
| function updateThemeSelection(theme) {
| |
|
| |
| const buttons = document.querySelectorAll('.lt-theme-button');
| |
|
| |
| buttons.forEach(function (btn) {
| |
| btn.classList.remove('is-active');
| |
| });
| |
|
| |
| const active = document.querySelector('[data-theme="' + theme + '"]');
| |
|
| |
| if (active) {
| |
| active.classList.add('is-active');
| |
| }
| |
| }
| |
|
| |
| /* ======================
| |
| INJECT MENU
| |
| ====================== */
| |
|
| |
| function injectThemeControls(container) {
| |
|
| |
| if (document.getElementById('custom-theme-menu')) return;
| |
|
| |
| const wrapper = document.createElement('div');
| |
| wrapper.id = 'custom-theme-menu';
| |
| wrapper.className = 'mw-portlet citizen-menu';
| |
|
| |
| const heading = document.createElement('div');
| |
| heading.className = 'citizen-menu__heading';
| |
| heading.textContent = 'Theme';
| |
|
| |
| const content = document.createElement('div');
| |
| content.className = 'citizen-menu__content';
| |
|
| |
| const list = document.createElement('ul');
| |
| list.className = 'citizen-menu__content-list';
| |
|
| |
| const item = document.createElement('li');
| |
| item.className = 'mw-list-item mw-list-item-js';
| |
|
| |
| const inner = document.createElement('div');
| |
|
| |
| function createButton(label, theme) {
| |
|
| |
| const btn = document.createElement('button');
| |
| btn.className = 'lt-theme-button';
| |
| btn.textContent = label;
| |
| btn.dataset.theme = theme;
| |
|
| |
| btn.addEventListener('click', function () {
| |
| applyTheme(theme);
| |
| });
| |
|
| |
| return btn;
| |
| }
| |
|
| |
| inner.appendChild(createButton('Velvet Room', 'default'));
| |
| inner.appendChild(createButton('Mementos', 'mementos'));
| |
| inner.appendChild(createButton('Courtroom', 'courtroom'));
| |
|
| |
| item.appendChild(inner);
| |
| list.appendChild(item);
| |
| content.appendChild(list);
| |
|
| |
| wrapper.appendChild(heading);
| |
| wrapper.appendChild(content);
| |
|
| |
| container.appendChild(wrapper);
| |
|
| |
| const currentTheme = localStorage.getItem('lt-theme') || 'default';
| |
| updateThemeSelection(currentTheme);
| |
| }
| |
|
| |
| /* ======================
| |
| WATCH FOR MENU LOAD
| |
| ====================== */
| |
|
| |
| const observer = new MutationObserver(function () {
| |
| const container = document.querySelector('.citizen-preferences-content');
| |
| if (container) {
| |
| injectThemeControls(container);
| |
| }
| |
| });
| |
|
| |
| observer.observe(document.body, { childList: true, subtree: true });
| |
|
| |
| });
| |
