MediaWiki:Common.js:修订间差异
标签:撤销 |
标签:撤销 |
||
| 第31行: | 第31行: | ||
// logo 切换逻辑 | // logo 切换逻辑 | ||
$(function () { | $(function () { | ||
// | // 获取当前“实际使用”的主题:'dark' 或 'light' | ||
function getEffectiveTheme() { | function getEffectiveTheme() { | ||
var cls = document.documentElement.classList; | var cls = document.documentElement.classList; | ||
| 第48行: | 第43行: | ||
return 'light'; | return 'light'; | ||
} | } | ||
// | // 兜底:根据系统偏好判断 | ||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { | ||
return 'dark'; | return 'dark'; | ||
| 第55行: | 第50行: | ||
} | } | ||
// 如果元素存在就设置 src(并记录日志) | |||
// 如果元素存在就设置 | |||
function setSrcIfExists(selector, src) { | function setSrcIfExists(selector, src) { | ||
var $el = $(selector); | var $el = $(selector); | ||
| 第66行: | 第56行: | ||
$el.attr('src', src); | $el.attr('src', src); | ||
console.log('[logo-switch] set', selector, '->', src); | console.log('[logo-switch] set', selector, '->', src); | ||
} else { | |||
console.log('[logo-switch] not found', selector); | |||
} | } | ||
} | } | ||
// | // 主更新函数 —— 每次都重新 select 元素 | ||
function updateLogos() { | function updateLogos() { | ||
var theme = getEffectiveTheme(); | var theme = getEffectiveTheme(); | ||
if (theme === 'dark') { | if (theme === 'dark') { | ||
setSrcIfExists('#footer-copyrightico img', '/resources/assets/cc-by-nc-sa-dark.svg'); | |||
setSrcIfExists('#footer-poweredbyico img', '/resources/assets/poweredby-mediawiki-dark.svg'); | |||
setSrcIfExists('#footer-poweredbysmwico img', '/resources/assets/poweredby-smw-dark.svg'); | |||
} else { | |||
setSrcIfExists('#footer-copyrightico img', '/resources/assets/cc-by-nc-sa.svg'); | |||
setSrcIfExists('#footer-poweredbyico img', '/resources/assets/poweredby-mediawiki.svg'); | |||
setSrcIfExists('#footer-poweredbysmwico img', '/resources/assets/poweredby-smw.svg'); | |||
setSrcIfExists('#footer- | |||
} | } | ||
} | } | ||
// 首次运行 | // 首次运行 | ||
updateLogos(); | updateLogos(); | ||
// 监听 <html> class | // 监听 <html> class 变化(用户在 UI 切换浅/深/自动) | ||
var htmlObserver = new MutationObserver(function (mutations) { | var htmlObserver = new MutationObserver(function (mutations) { | ||
for (var i = 0; i < mutations.length; i++) { | for (var i = 0; i < mutations.length; i++) { | ||
| 第114行: | 第89行: | ||
htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); | htmlObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); | ||
// 监听 body DOM 变动,防止 footer | // 监听 body 的 DOM 变动,防止 footer 异步插入或被替换 | ||
var bodyObserver = new MutationObserver(function () { | var bodyObserver = new MutationObserver(function () { | ||
updateLogos(); | updateLogos(); | ||
| 第120行: | 第95行: | ||
bodyObserver.observe(document.body, { childList: true, subtree: true }); | bodyObserver.observe(document.body, { childList: true, subtree: true }); | ||
// | // 监听系统主题变化(适用于 skin-theme-clientpref-os) | ||
if (window.matchMedia) { | if (window.matchMedia) { | ||
var | var mq = window.matchMedia('(prefers-color-scheme: dark)'); | ||
if (typeof | if (typeof mq.addEventListener === 'function') { | ||
mq.addEventListener('change', updateLogos); | |||
} else if (typeof | } else if (typeof mq.addListener === 'function') { | ||
// 兼容旧浏览器 | |||
mq.addListener(updateLogos); | |||
} | } | ||
} | } | ||
// MediaWiki | // 如果存在 MediaWiki 的 hook(例如偏好保存后),也触发一次 | ||
if (window.mw && mw.hook) { | if (window.mw && mw.hook) { | ||
mw.hook('user.preferencesSaved').add(updateLogos); | mw.hook('user.preferencesSaved').add(updateLogos); | ||
} | } | ||
// 兜底:页面 load | // 兜底:页面 load 后、以及延迟 1.5s 再试一次 | ||
$(window).on('load', updateLogos); | $(window).on('load', updateLogos); | ||
setTimeout(updateLogos, 1500); | setTimeout(updateLogos, 1500); | ||
}); | }); | ||