MediaWiki:Common.js
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/**
* Blockland Wiki Liquid Glass Lighting System
*/
(function() {
'use strict';
var isPerformanceMode = function() {
return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1');
};
var GLASS_SELECTORS = '#mw-panel-toc, .bl-hero, #citizen-sidebar-lastmod, .aero-news-box, .citizen-header, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox, .mwe-popups-container, .oo-ui-popupWidget-popup, .oo-ui-menuSelectWidget, .voy-box';
var lastMouseX = 0;
var lastMouseY = 0;
var syncLight = function(e) {
if (isPerformanceMode()) return;
lastMouseX = e.clientX;
lastMouseY = e.clientY;
var elements = document.querySelectorAll(GLASS_SELECTORS);
elements.forEach(function(el) {
var rect = el.getBoundingClientRect();
if (rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0) {
var x = ((e.clientX - rect.left) / rect.width) * 100;
var y = ((e.clientY - rect.top) / rect.height) * 100;
el.style.setProperty('--mouse-x', x.toFixed(2) + '%');
el.style.setProperty('--mouse-y', y.toFixed(2) + '%');
}
});
};
var initPopupLight = function(container) {
if (isPerformanceMode()) return;
var rect = container.getBoundingClientRect();
if (rect.width > 0) {
var x = ((lastMouseX - rect.left) / rect.width) * 100;
var y = ((lastMouseY - rect.top) / rect.height) * 100;
container.style.setProperty('--mouse-x', x.toFixed(2) + '%');
container.style.setProperty('--mouse-y', y.toFixed(2) + '%');
}
};
setInterval(function() {
if (isPerformanceMode()) return;
var p = document.querySelector('.citizen-command-palette');
if (p && !p.classList.contains('glass-show')) {
p.classList.add('glass-show');
}
}, 100);
var ticking = false;
document.addEventListener('mousemove', function(e) {
if (isPerformanceMode()) return;
if (!ticking) {
window.requestAnimationFrame(function() {
syncLight(e);
ticking = false;
});
ticking = true;
}
}, { passive: true });
var modeObserver = new MutationObserver(function() {
if (isPerformanceMode()) {
document.querySelectorAll(GLASS_SELECTORS).forEach(function(el) {
el.style.removeProperty('--mouse-x');
el.style.removeProperty('--mouse-y');
});
}
});
modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
window._liquidGlassInitPopup = initPopupLight;
})();
/**
* Section25. Wiki 弹出预览菜单动画控制
*/
(function() {
'use strict';
var style = document.createElement('style');
style.textContent = `
.mwe-popups .mwe-popups-container {
opacity: 0 !important;
transform: translateY(-12px) !important;
transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.mwe-popups.popup-show .mwe-popups-container {
opacity: 1 !important;
transform: translateY(0) !important;
}
.mwe-popups.flipped-y .mwe-popups-container {
transform: translateY(12px) !important;
}
.mwe-popups.flipped-y.popup-show .mwe-popups-container {
transform: translateY(0) !important;
}
`;
document.head.appendChild(style);
var seen = new WeakSet();
new MutationObserver(function(muts) {
muts.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.classList && node.classList.contains('mwe-popups') && !seen.has(node)) {
seen.add(node);
var container = node.querySelector('.mwe-popups-container');
if (!container) return;
if (window._liquidGlassInitPopup) {
window._liquidGlassInitPopup(container);
}
node.style.pointerEvents = 'none';
container.offsetHeight;
requestAnimationFrame(function() {
requestAnimationFrame(function() {
node.classList.add('popup-show');
setTimeout(function() {
node.style.pointerEvents = '';
}, 350);
});
});
}
});
});
}).observe(document.body, { childList: true, subtree: true });
})();
/**
* Section19. 通知面板动画控制
* 检测到面板后再开始动画
*/
(function() {
'use strict';
function handlePopup(popup) {
if (popup.dataset.animatorInited) return;
popup.dataset.animatorInited = 'true';
const observer = new MutationObserver(() => {
const inner = popup.querySelector('.oo-ui-popupWidget-popup');
if (!inner) return;
const isVisible = popup.style.display !== 'none' && popup.offsetParent !== null;
if (isVisible) {
if (inner.getAttribute('data-is-active') !== 'true') {
inner.setAttribute('data-is-active', 'true');
// 1. 初始化：置于下方并透明
inner.style.setProperty('transition', 'none', 'important');
inner.style.setProperty('opacity', '0', 'important');
inner.style.setProperty('transform', 'translateY(20px)', 'important');
inner.offsetHeight; // 触发重绘
requestAnimationFrame(() => {
setTimeout(() => {
// 2. 向上滑动并渐显
inner.style.setProperty('transition', 'opacity 0.3s ease-out, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1)', 'important');
inner.style.setProperty('opacity', '1', 'important');
inner.style.setProperty('transform', 'translateY(0)', 'important');
}, 10);
});
}
} else {
// 关闭时直接重置，不加动画，确保下次打开干净利落
if (inner.getAttribute('data-is-active') === 'true') {
inner.removeAttribute('data-is-active');
inner.style.removeProperty('opacity');
inner.style.removeProperty('transform');
inner.style.removeProperty('transition');
inner.style.removeProperty('transform-origin');
}
}
});
observer.observe(popup, { attributes: true, attributeFilter: ['style', 'class'] });
}
const scanner = new MutationObserver(() => {
document.querySelectorAll('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup').forEach(handlePopup);
});
scanner.observe(document.body, { childList: true, subtree: true });
document.querySelectorAll('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup').forEach(handlePopup);
})();
(function() {
'use strict';
// 容器特征
const CONTAINER_STYLE = "font-family: -apple-system, 'Segoe UI', Roboto, sans-serif";
// 检测当前是否为暗色模式
function isDarkMode() {
const html = document.documentElement;
// 手动深色模式
if (html.classList.contains('skin-theme-clientpref-night')) {
return true;
}
// 系统深色模式（需要同时满足系统偏好为暗色，且类为 os）
if (html.classList.contains('skin-theme-clientpref-os')) {
return window.matchMedia('(prefers-color-scheme: dark)').matches;
}
return false;
}
// 查找容器
function findContainer() {
return document.querySelector(`div[style*="${CONTAINER_STYLE}"]`);
}
// 保存原始颜色并设置新颜色（用于后续恢复）
function setAndSave(el, color) {
if (!el.dataset.blOrigColor) {
el.dataset.blOrigColor = el.style.color || '';
}
el.style.color = color;
}
// 应用暗色适配（直接修改内联样式）
function applyDark(container) {
if (!container) return;
// 1. 涨幅变化区域（font-size: 13px）：保留红/绿色但调亮
container.querySelectorAll('div[style*="font-size: 13px"]').forEach(el => {
const currentColor = el.style.color;
if (currentColor === '#f43f5e' || currentColor === 'rgb(244, 63, 94)') {
setAndSave(el, '#f87171');
} else if (currentColor === '#10b981' || currentColor === 'rgb(16, 185, 129)') {
setAndSave(el, '#34d399');
}
});
// 2. 链接：改为蓝色
container.querySelectorAll('a').forEach(el => {
setAndSave(el, '#60a5fa');
});
// 3. "Core Assets / 主币" 分区标题：在暗色下过暗，调亮
container.querySelectorAll('div[style*="font-size: 13px"][style*="text-transform: uppercase"]').forEach(el => {
if (el.textContent.includes('Core Assets') || el.textContent.includes('主币')) {
setAndSave(el, '#e2e8f0');
}
});
// 4. 其他带颜色的元素：改为白色
container.querySelectorAll('[style*="color:"]').forEach(el => {
// 跳过涨幅变化区域
if (el.matches('div[style*="font-size: 13px"]')) return;
// 跳过链接
if (el.tagName === 'A') return;
const currentColor = el.style.color;
// 保留原有的红绿色转换逻辑（用于其他区域的涨跌色）
if (currentColor === '#f43f5e' || currentColor === 'rgb(244, 63, 94)') {
setAndSave(el, '#f87171');
} else if (currentColor === '#10b981' || currentColor === 'rgb(16, 185, 129)') {
setAndSave(el, '#34d399');
} else {
setAndSave(el, '#ffffff');
}
});
// 保存 border 原始颜色并设置暗色
// 同时匹配 hex (#f1f5f9) 和浏览器转义后的 rgb(241,245,249)
container.querySelectorAll('[style*="border-bottom: 1px solid #f1f5f9"], [style*="border-bottom:1px solid #f1f5f9"], [style*="border-bottom: 1px solid rgb(241, 245, 249)"], [style*="border-bottom:1px solid rgb(241, 245, 249)"]')
.forEach(el => {
if (!el.dataset.blOrigBorder) el.dataset.blOrigBorder = el.style.borderBottomColor || '';
el.style.borderBottomColor = 'rgba(255,255,255,0.08)';
});
container.querySelectorAll('[style*="border-top: 1px dashed #e2e8f0"], [style*="border-top:1px dashed #e2e8f0"], [style*="border-top: 1px dashed rgb(226, 232, 240)"], [style*="border-top:1px dashed rgb(226, 232, 240)"]')
.forEach(el => {
if (!el.dataset.blOrigBorder) el.dataset.blOrigBorder = el.style.borderTopColor || '';
el.style.borderTopColor = 'rgba(255,255,255,0.08)';
});
}
// 移除暗色适配（恢复原始内联样式）
function removeDark(container) {
if (!container) return;
// 恢复所有被修改的颜色
container.querySelectorAll('[data-bl-orig-color]').forEach(el => {
const orig = el.dataset.blOrigColor;
if (orig) {
el.style.color = orig;
} else {
el.style.color = '';
}
delete el.dataset.blOrigColor;
});
// 恢复所有被修改的边框
container.querySelectorAll('[data-bl-orig-border]').forEach(el => {
const orig = el.dataset.blOrigBorder;
if (orig) {
el.style.borderBottomColor = orig;
el.style.borderTopColor = orig;
} else {
el.style.borderBottomColor = '';
el.style.borderTopColor = '';
}
delete el.dataset.blOrigBorder;
});
}
// 主执行函数：根据当前主题状态处理
function run() {
const container = findContainer();
if (!container) return;
if (isDarkMode()) {
applyDark(container);
} else {
removeDark(container);
}
}
// 页面加载完成后执行一次
function init() {
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
}
// 监听主题切换
function setupListeners() {
// 1. 监听 html 元素的 class 变化（手动切换主题）
const html = document.documentElement;
const observer = new MutationObserver(function(mutations) {
for (const mutation of mutations) {
if (mutation.attributeName === 'class') {
run();
break;
}
}
});
observer.observe(html, { attributes: true, attributeFilter: ['class'] });
// 2. 监听系统偏好变化（当使用 os 模式时）
const darkModeMedia = window.matchMedia('(prefers-color-scheme: dark)');
// 使用现代事件监听（旧浏览器可能需要 addListener）
if (darkModeMedia.addEventListener) {
darkModeMedia.addEventListener('change', function(e) {
// 仅当当前是 os 模式时才响应，否则用户手动覆盖了
if (html.classList.contains('skin-theme-clientpref-os')) {
run();
}
});
} else if (darkModeMedia.addListener) {
darkModeMedia.addListener(function(e) {
if (html.classList.contains('skin-theme-clientpref-os')) {
run();
}
});
}
}
// 启动
init();
setupListeners();
})();
/* =========================================================
* Minecraft Skin 3D Viewer
* skinview3d 3.4.2
* 用于 Template:Infobox character
* ========================================================= */
(function () {
'use strict';
var SKINVIEW3D_URL =
'https://cdn.jsdelivr.net/npm/[email protected]/bundles/skinview3d.bundle.js';
var skinview3dLoading = null;
/**
* 加载 skinview3d
*/
function loadSkinView3D() {
if (window.skinview3d) {
return Promise.resolve(window.skinview3d);
}
if (!skinview3dLoading) {
skinview3dLoading = new Promise(function (resolve, reject) {
mw.loader.getScript(SKINVIEW3D_URL).then(
function () {
if (window.skinview3d) {
resolve(window.skinview3d);
} else {
reject(
new Error(
'skinview3d 脚本已加载，但全局对象不存在'
)
);
}
},
function (error) {
reject(error);
}
);
});
}
return skinview3dLoading;
}
/**
* 字符串转数字
*/
function numberValue(value, fallback, min, max) {
var result = Number(value);
if (!Number.isFinite(result)) {
result = fallback;
}
if (typeof min === 'number') {
result = Math.max(min, result);
}
if (typeof max === 'number') {
result = Math.min(max, result);
}
return result;
}
/**
* 设置 Minecraft 第二层
*/
function setOuterLayer(viewer, visible) {
var parts = [
'head',
'body',
'rightArm',
'leftArm',
'rightLeg',
'leftLeg'
];
parts.forEach(function (part) {
try {
viewer.playerObject.skin[part].outerLayer.visible = visible;
} catch (e) {
// 某些特殊模型不存在对应部件时忽略
}
});
}
/**
* 设置动画
*/
function setAnimation(viewer, name) {
if (!name) {
viewer.animation = null;
return;
}
name = String(name).toLowerCase();
switch (name) {
case 'idle':
case '待机':
viewer.animation = new skinview3d.IdleAnimation();
break;
case 'walk':
case 'walking':
case '走路':
case '行走':
viewer.animation = new skinview3d.WalkingAnimation();
break;
case 'run':
case 'running':
case '跑步':
viewer.animation = new skinview3d.RunningAnimation();
break;
case 'fly':
case 'flying':
case '飞行':
viewer.animation = new skinview3d.FlyingAnimation();
break;
case 'wave':
case '挥手':
viewer.animation = new skinview3d.WaveAnimation();
break;
case 'crouch':
case '蹲下':
viewer.animation = new skinview3d.CrouchAnimation();
break;
case 'hit':
case '攻击':
viewer.animation = new skinview3d.HitAnimation();
break;
case 'swim':
case '游泳':
viewer.animation = new skinview3d.SwimAnimation();
break;
case 'none':
case 'off':
case '否':
default:
viewer.animation = null;
break;
}
}
/**
* 初始化单个查看器
*/
function initViewer(container) {
if (
!container ||
container.dataset.mcSkinInitialized === '1'
) {
return;
}
container.dataset.mcSkinInitialized = '1';
var canvas = container.querySelector('.mc-skin-canvas');
var loading = container.querySelector('.mc-skin-loading');
if (!canvas) {
return;
}
var skinUrl = container.dataset.skin;
if (!skinUrl) {
if (loading) {
loading.textContent = '未指定 Minecraft 皮肤';
}
return;
}
var model = container.dataset.model || 'auto-detect';
if (
model !== 'default' &&
model !== 'slim' &&
model !== 'auto-detect'
) {
model = 'auto-detect';
}
var width = numberValue(
container.dataset.width,
260,
100,
800
);
var height = numberValue(
container.dataset.height,
340,
100,
1000
);
var zoom = numberValue(
container.dataset.zoom,
0.90,
0.1,
3
);
var overlay = container.dataset.overlay !== '0';
var autoRotate = container.dataset.autorotate === '1';
var animation = container.dataset.animation || 'none';
try {
var viewer = new skinview3d.SkinViewer({
canvas: canvas,
width: width,
height: height
});
/* 鼠标 / 触摸操作 */
viewer.controls.enableRotate = true;
viewer.controls.enableZoom = true;
viewer.controls.enablePan = false;
/* 镜头 */
viewer.zoom = zoom;
viewer.fov = 70;
/* 光照 */
viewer.globalLight.intensity = 3;
viewer.cameraLight.intensity = 0.6;
/* 自动旋转 */
viewer.autoRotate = autoRotate;
viewer.autoRotateSpeed = 0.8;
/* 动画 */
setAnimation(viewer, animation);
/* 保存实例，方便以后调试 */
container.mcSkinViewer = viewer;
viewer.loadSkin(skinUrl, {
model: model
}).then(function () {
setOuterLayer(viewer, overlay);
container.classList.add('mc-skin-loaded');
if (loading) {
loading.remove();
}
}).catch(function (error) {
console.error(
'[Minecraft Skin Viewer] 皮肤加载失败：',
skinUrl,
error
);
container.classList.add('mc-skin-error');
if (loading) {
loading.textContent = 'Minecraft 皮肤加载失败';
}
});
} catch (error) {
console.error(
'[Minecraft Skin Viewer] 初始化失败：',
error
);
container.classList.add('mc-skin-error');
if (loading) {
loading.textContent = '3D 查看器初始化失败';
}
}
}
/**
* 扫描页面
*/
function scanMinecraftSkins() {
var viewers = document.querySelectorAll(
'.mc-skin-viewer:not([data-mc-skin-initialized="1"])'
);
if (!viewers.length) {
return;
}
loadSkinView3D().then(function () {
viewers.forEach(function (viewer) {
initViewer(viewer);
});
}).catch(function (error) {
console.error(
'[Minecraft Skin Viewer] skinview3d 加载失败：',
error
);
viewers.forEach(function (viewer) {
viewer.dataset.mcSkinInitialized = '1';
var loading =
viewer.querySelector('.mc-skin-loading');
if (loading) {
loading.textContent = '3D 查看器组件加载失败';
}
});
});
}
/*
* MediaWiki 页面加载
* 同时兼容普通页面和部分 AJAX 内容刷新。
*/
mw.hook('wikipage.content').add(function () {
scanMinecraftSkins();
});
})();