MediaWiki:Citizen.js:修订间差异
外观
添加页脚logo |
小 完善整体逻辑 |
||
| (未显示同一用户的1个中间版本) | |||
| 第2行: | 第2行: | ||
// 添加powered by logo | // 添加powered by logo | ||
$(function () { | (function ($) { | ||
$(function () { | |||
// ---------- 辅助:判断当前实际主题(dark / light) ---------- | |||
function getEffectiveTheme() { | |||
var cls = document.documentElement.classList; | |||
if (cls.contains('skin-theme-clientpref-night')) return 'dark'; | |||
if (cls.contains('skin-theme-clientpref-day')) return 'light'; | |||
if (cls.contains('skin-theme-clientpref-os')) { | |||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |||
return 'dark'; | |||
} | |||
return 'light'; | |||
} | |||
// 兜底:根据系统偏好判断 | |||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | |||
return 'dark'; | |||
} | |||
return 'light'; | |||
} | |||
// ---------- 辅助:安全设置 img src(若元素存在) ---------- | |||
function setSrcIfExists(selector, src) { | |||
var $el = $(selector); | |||
if ($el.length) { | |||
$el.attr('src', src); | |||
console.log('[citizen-footer] set', selector, '->', src); | |||
} else { | |||
console.log('[citizen-footer] not found', selector); | |||
} | |||
} | |||
// ---------- 检查是否是 Citizen 皮肤(有多重后备检测) ---------- | |||
function isCitizenSkin() { | |||
if (window.mw && mw.config && mw.config.get) { | |||
try { | |||
var s = mw.config.get('skin'); | |||
if (s) return s.toString().toLowerCase() === 'citizen'; | |||
} catch (e) { | |||
// ignore | |||
} | |||
} | |||
// 后备:看 html/body class | |||
return document.documentElement.classList.contains('skin-citizen') || | |||
document.body.classList.contains('skin-citizen'); | |||
} | |||
// ---------- 插入 / 移除 Citizen footer icon ---------- | |||
function ensureCitizenFooterIcon() { | |||
// 如果不是 Citizen 皮肤,确保移除(防止用户在偏好切换皮肤后残留) | |||
if (!isCitizenSkin()) { | |||
$('#footer-poweredbycitizenico').remove(); | |||
return; | |||
} | |||
// 已存在则不再插入 | |||
if ($('#footer-poweredbycitizenico').length) return; | |||
// 优先插入在 SMW 图标之后;若找不到 SMW,则在 MediaWiki 图标之后插入 | |||
var $smw = $('#footer-poweredbysmwico'); | |||
var $mw = $('#footer-poweredbyico'); | |||
var $target = $smw.length ? $smw : ($mw.length ? $mw : $('#footer-icons ul li').last()); | |||
var theme = getEffectiveTheme(); | |||
var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg'; | |||
var html = '' + | |||
'<li id="footer-poweredbycitizenico">' + | '<li id="footer-poweredbycitizenico">' + | ||
'<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen" ' + | |||
'class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled" ' + | |||
'target="_blank" rel="noopener">' + | |||
); | '<img src="' + src + '" alt="Powered by Citizen" width="88" height="31" loading="lazy">' + | ||
'</a>' + | |||
'</li>'; | |||
if ($target && $target.length) { | |||
$target.after(html); | |||
} else { | |||
// 兜底:追加到 ul | |||
$('#footer-icons ul').append(html); | |||
} | |||
console.log('[citizen-footer] inserted'); | |||
} | } | ||
// ---------- 根据主题更新 Citizen icon 的 src ---------- | |||
function updateCitizenIcon() { | |||
var theme = getEffectiveTheme(); | |||
var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg'; | |||
setSrcIfExists('#footer-poweredbycitizenico img', src); | |||
} | |||
// ---------- 总更新入口:确保插入并更新 src ---------- | |||
function updateAll() { | |||
var | ensureCitizenFooterIcon(); | ||
updateCitizenIcon(); | |||
} | |||
// ---------- 首次运行 ---------- | |||
updateAll(); | |||
// ---------- 监听 <html> class 变化(皮肤主题切换时会触发) ---------- | |||
var htmlObserver = new MutationObserver(function (mutations) { | |||
for (var i = 0; i < mutations.length; i++) { | |||
if (mutations[i].attributeName === 'class') { | |||
updateAll(); | |||
break; | |||
} | |||
} | |||
}); | |||
htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); | |||
// ---------- 监听 body DOM 变动(footer 可能是异步插入 / 被替换) ---------- | |||
var bodyObserver = new MutationObserver(function () { | |||
updateAll(); | |||
}); | |||
bodyObserver.observe(document.body, { childList: true, subtree: true }); | |||
// ---------- 监听系统主题偏好变化(prefers-color-scheme) ---------- | |||
if (window.matchMedia) { | |||
var mq = window.matchMedia('(prefers-color-scheme: dark)'); | |||
if (typeof mq.addEventListener === 'function') { | |||
mq.addEventListener('change', updateAll); | |||
} else if (typeof mq.addListener === 'function') { | |||
mq.addListener(updateAll); // 兼容旧浏览器 | |||
} | |||
} | |||
// ---------- 如果 MediaWiki 有 hook(比如用户保存偏好后切换皮肤),也触发一次 ---------- | |||
if (window.mw && mw.hook) { | |||
mw.hook('user.preferencesSaved').add(updateAll); | |||
} | |||
// ---------- 兜底:页面 load 后 & 延迟再试一次 ---------- | |||
$(window).on('load', updateAll); | |||
setTimeout(updateAll, 1500); | |||
}); | }); | ||
})(jQuery); | |||
2025年9月28日 (日) 06:12的最新版本
/* 这里所有JavaScript都会加载给Citizen皮肤的用户 */
// 添加powered by logo
(function ($) {
$(function () {
// ---------- 辅助:判断当前实际主题(dark / light) ----------
function getEffectiveTheme() {
var cls = document.documentElement.classList;
if (cls.contains('skin-theme-clientpref-night')) return 'dark';
if (cls.contains('skin-theme-clientpref-day')) return 'light';
if (cls.contains('skin-theme-clientpref-os')) {
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
}
// 兜底:根据系统偏好判断
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
}
// ---------- 辅助:安全设置 img src(若元素存在) ----------
function setSrcIfExists(selector, src) {
var $el = $(selector);
if ($el.length) {
$el.attr('src', src);
console.log('[citizen-footer] set', selector, '->', src);
} else {
console.log('[citizen-footer] not found', selector);
}
}
// ---------- 检查是否是 Citizen 皮肤(有多重后备检测) ----------
function isCitizenSkin() {
if (window.mw && mw.config && mw.config.get) {
try {
var s = mw.config.get('skin');
if (s) return s.toString().toLowerCase() === 'citizen';
} catch (e) {
// ignore
}
}
// 后备:看 html/body class
return document.documentElement.classList.contains('skin-citizen') ||
document.body.classList.contains('skin-citizen');
}
// ---------- 插入 / 移除 Citizen footer icon ----------
function ensureCitizenFooterIcon() {
// 如果不是 Citizen 皮肤,确保移除(防止用户在偏好切换皮肤后残留)
if (!isCitizenSkin()) {
$('#footer-poweredbycitizenico').remove();
return;
}
// 已存在则不再插入
if ($('#footer-poweredbycitizenico').length) return;
// 优先插入在 SMW 图标之后;若找不到 SMW,则在 MediaWiki 图标之后插入
var $smw = $('#footer-poweredbysmwico');
var $mw = $('#footer-poweredbyico');
var $target = $smw.length ? $smw : ($mw.length ? $mw : $('#footer-icons ul li').last());
var theme = getEffectiveTheme();
var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
var html = '' +
'<li id="footer-poweredbycitizenico">' +
'<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen" ' +
'class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled" ' +
'target="_blank" rel="noopener">' +
'<img src="' + src + '" alt="Powered by Citizen" width="88" height="31" loading="lazy">' +
'</a>' +
'</li>';
if ($target && $target.length) {
$target.after(html);
} else {
// 兜底:追加到 ul
$('#footer-icons ul').append(html);
}
console.log('[citizen-footer] inserted');
}
// ---------- 根据主题更新 Citizen icon 的 src ----------
function updateCitizenIcon() {
var theme = getEffectiveTheme();
var src = theme === 'dark' ? '/resources/assets/poweredby-citizen-dark.svg' : '/resources/assets/poweredby-citizen.svg';
setSrcIfExists('#footer-poweredbycitizenico img', src);
}
// ---------- 总更新入口:确保插入并更新 src ----------
function updateAll() {
ensureCitizenFooterIcon();
updateCitizenIcon();
}
// ---------- 首次运行 ----------
updateAll();
// ---------- 监听 <html> class 变化(皮肤主题切换时会触发) ----------
var htmlObserver = new MutationObserver(function (mutations) {
for (var i = 0; i < mutations.length; i++) {
if (mutations[i].attributeName === 'class') {
updateAll();
break;
}
}
});
htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
// ---------- 监听 body DOM 变动(footer 可能是异步插入 / 被替换) ----------
var bodyObserver = new MutationObserver(function () {
updateAll();
});
bodyObserver.observe(document.body, { childList: true, subtree: true });
// ---------- 监听系统主题偏好变化(prefers-color-scheme) ----------
if (window.matchMedia) {
var mq = window.matchMedia('(prefers-color-scheme: dark)');
if (typeof mq.addEventListener === 'function') {
mq.addEventListener('change', updateAll);
} else if (typeof mq.addListener === 'function') {
mq.addListener(updateAll); // 兼容旧浏览器
}
}
// ---------- 如果 MediaWiki 有 hook(比如用户保存偏好后切换皮肤),也触发一次 ----------
if (window.mw && mw.hook) {
mw.hook('user.preferencesSaved').add(updateAll);
}
// ---------- 兜底:页面 load 后 & 延迟再试一次 ----------
$(window).on('load', updateAll);
setTimeout(updateAll, 1500);
});
})(jQuery);