MediaWiki:Common.js: различия между версиями
Внешний вид
Glamyr (обсуждение | вклад) Нет описания правки |
Glamyr (обсуждение | вклад) Нет описания правки |
||
| (не показано 17 промежуточных версий этого же участника) | |||
| Строка 1: | Строка 1: | ||
(function () { | $(function () { | ||
const | const classes = ['theme-stddark', 'theme-nanotrasen', 'theme-syndicate', 'theme-plasmafire', 'theme-clockcult', 'theme-bloodcult', 'theme-heretic', 'theme-default']; | ||
function applyTheme(themeId) { | function applyTheme(themeId) { | ||
classes.forEach(id => document.body.classList.remove(id)); | |||
document.body.classList.remove('theme-active-dark'); | document.body.classList.remove('theme-active-dark'); | ||
if (themeId && | if (themeId && classes.includes(themeId)) { | ||
document.body.classList.add(themeId); | document.body.classList.add(themeId); | ||
if (themeId !== 'theme-default') { | if (themeId !== 'theme-default') { | ||
| Строка 21: | Строка 12: | ||
} | } | ||
localStorage.setItem('mw-tg-theme', themeId); | localStorage.setItem('mw-tg-theme', themeId); | ||
} | } | ||
} | } | ||
function injectSelector() { | |||
if (document.getElementById('p-tg-theme')) return; | |||
const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark'; | const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark'; | ||
applyTheme(activeTheme); | applyTheme(activeTheme); | ||
let selectHtml = '<div id="p-tg-theme | let selectHtml = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block !important; vertical-align: middle !important; position: relative; width: 36px !important; height: 36px !important;">'; | ||
selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true | selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display: none !important;">'; | ||
selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox | selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display: flex !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;">'; | ||
selectHtml += '<span class=" | selectHtml += '<span class="tg-custom-palette-icon"></span>'; | ||
selectHtml += '</label>'; | selectHtml += '</label>'; | ||
selectHtml += '<div class="vector-dropdown-content" style="padding: 8px; min-width: 180px;">'; | selectHtml += '<div class="vector-dropdown-content" id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000;">'; | ||
selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">'; | selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">'; | ||
const names = { 'theme-stddark': 'Standard Dark', 'theme-nanotrasen': 'Nanotrasen TGUI', 'theme-syndicate': 'Syndicate TGUI', 'theme-plasmafire': 'Plasmafire', 'theme-clockcult': 'Clock Cult', 'theme-bloodcult': 'Blood Cult', 'theme-heretic': 'Heretic', 'theme-default': 'Standard Light' }; | |||
classes.forEach(id => { | |||
selectHtml += | selectHtml += '<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="' + id + '" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none;">' + names[id] + '</a></li>'; | ||
}); | }); | ||
selectHtml += '</ul></div></div>'; | |||
const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')]; | |||
for (let target of targets) { if (target) { $(target).before(selectHtml); break; } } | |||
} | |||
injectSelector(); | |||
$(document).on('change', '#p-tg-theme-dropdown-checkbox', function() { | |||
$(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none'); | |||
}); | |||
$(document).on('click', '.tg-theme-item', function (e) { | |||
e.preventDefault(); | |||
applyTheme($(this).data('theme')); | |||
$('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change'); | |||
}); | }); | ||
} | }); | ||
Текущая версия от 13:50, 14 июня 2026
$(function () {
const classes = ['theme-stddark', 'theme-nanotrasen', 'theme-syndicate', 'theme-plasmafire', 'theme-clockcult', 'theme-bloodcult', 'theme-heretic', 'theme-default'];
function applyTheme(themeId) {
classes.forEach(id => document.body.classList.remove(id));
document.body.classList.remove('theme-active-dark');
if (themeId && classes.includes(themeId)) {
document.body.classList.add(themeId);
if (themeId !== 'theme-default') {
document.body.classList.add('theme-active-dark');
}
localStorage.setItem('mw-tg-theme', themeId);
}
}
function injectSelector() {
if (document.getElementById('p-tg-theme')) return;
const activeTheme = localStorage.getItem('mw-tg-theme') || 'theme-stddark';
applyTheme(activeTheme);
let selectHtml = '<div id="p-tg-theme" style="margin: 0 10px; display: inline-block !important; vertical-align: middle !important; position: relative; width: 36px !important; height: 36px !important;">';
selectHtml += '<input type="checkbox" id="p-tg-theme-dropdown-checkbox" role="button" aria-haspopup="true" class="vector-dropdown-checkbox" style="display: none !important;">';
selectHtml += '<label id="p-tg-theme-dropdown-label" for="p-tg-theme-dropdown-checkbox" aria-label="Смена темы" title="Выбрать тему фракции" style="display: flex !important; width: 36px !important; height: 36px !important; align-items: center; justify-content: center; cursor: pointer; padding: 0 !important; margin: 0 !important; border: none !important; background: transparent !important;">';
selectHtml += '<span class="tg-custom-palette-icon"></span>';
selectHtml += '</label>';
selectHtml += '<div class="vector-dropdown-content" id="p-tg-dropdown-menu" style="padding: 8px; min-width: 180px; display: none; position: absolute; top: 110%; right: 0; z-index: 10000;">';
selectHtml += '<ul class="vector-menu-content-list" style="margin: 0; padding: 0; list-style: none;">';
const names = { 'theme-stddark': 'Standard Dark', 'theme-nanotrasen': 'Nanotrasen TGUI', 'theme-syndicate': 'Syndicate TGUI', 'theme-plasmafire': 'Plasmafire', 'theme-clockcult': 'Clock Cult', 'theme-bloodcult': 'Blood Cult', 'theme-heretic': 'Heretic', 'theme-default': 'Standard Light' };
classes.forEach(id => {
selectHtml += '<li style="margin: 4px 0;"><a href="#" class="tg-theme-item" data-theme="' + id + '" style="display: block; padding: 6px 8px; border-radius: 4px; text-decoration: none;">' + names[id] + '</a></li>';
});
selectHtml += '</ul></div></div>';
const targets = [document.querySelector('.vector-user-links-main'), document.getElementById('p-personal-more'), document.getElementById('p-userlinks'), document.querySelector('.vector-user-links'), document.querySelector('.vector-header-end')];
for (let target of targets) { if (target) { $(target).before(selectHtml); break; } }
}
injectSelector();
$(document).on('change', '#p-tg-theme-dropdown-checkbox', function() {
$(this).siblings('.vector-dropdown-content').css('display', this.checked ? 'block' : 'none');
});
$(document).on('click', '.tg-theme-item', function (e) {
e.preventDefault();
applyTheme($(this).data('theme'));
$('#p-tg-theme-dropdown-checkbox').prop('checked', false).trigger('change');
});
});