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 adaptColors(container) {
if (!container) return;
// 1. 所有带 color 内联样式的元素
const coloredEls = container.querySelectorAll('[style*="color:"]');
coloredEls.forEach(el => {
const style = el.style;
const currentColor = style.color;
// 如果是涨跌色，单独提亮；否则变白
if (currentColor === '#f43f5e' || currentColor === 'rgb(244, 63, 94)') {
style.color = '#f87171'; // 亮红
} else if (currentColor === '#10b981' || currentColor === 'rgb(16, 185, 129)') {
style.color = '#34d399'; // 亮绿
} else {
// 其他所有颜色（包括 #64748b, #1e293b, #0f172a, #cbd5e1 等）强制白色
style.color = '#ffffff';
}
});
// 2. 调整分割线边框颜色
container.querySelectorAll('[style*="border-bottom: 1px solid #f1f5f9"], [style*="border-bottom:1px solid #f1f5f9"]')
.forEach(el => el.style.borderBottomColor = 'rgba(255,255,255,0.08)');
container.querySelectorAll('[style*="border-top: 1px dashed #e2e8f0"], [style*="border-top:1px dashed #e2e8f0"]')
.forEach(el => el.style.borderTopColor = 'rgba(255,255,255,0.08)');
}
// 查找容器（通过 style 属性包含特征字符串）
function findContainer() {
// 注意：CSS 属性选择器在 JS 中可用，但 document.querySelector 也支持
// 使用属性包含匹配
return document.querySelector(`div[style*="${CONTAINER_STYLE}"]`);
}
// 主执行函数
function run() {
const container = findContainer();
if (container) {
adaptColors(container);
} else {
// 如果容器尚未加载，可以设置 MutationObserver 监听
// 但这里为了简单，我们只执行一次，若需要动态监听请看下文
console.log('加密货币卡片容器未找到，可能尚未加载。');
}
}
// 页面加载完成后执行
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', run);
} else {
run();
}
// ----- 可选：如果容器是动态加载（例如通过 AJAX），使用 MutationObserver 监听 -----
// 如果你确定卡片是动态插入的，取消注释下面的代码
/*
const observer = new MutationObserver(function(mutations) {
const container = findContainer();
if (container) {
adaptColors(container);
// 一旦找到并处理完成，可以断开 observer 以节省性能
// observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
*/
})();