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将为所有用户在每次页面加载时加载。 */
// 侧边栏广告
$(function() {
if ($('#p-navigation').length) {
var adHtml = '<div id="sidebar-ad"></div>';
$('#p-navigation').after(adHtml);
$.get(mw.util.wikiScript('api'), {
action: 'parse',
text: '{{CitizenAd}}',
format: 'json'
}, function(data) {
$('#sidebar-ad').html(data.parse.text['*']);
});
}
});
/**
* 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, #citizen-sidebar-lastmod, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox, .mwe-popups-container, .oo-ui-popupWidget-popup';
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 DURATION = 250;
// 注入初始隐藏样式
var style = document.createElement('style');
style.textContent = '.mwe-popups .mwe-popups-container { opacity: 0 !important; } .mwe-popups.popup-animated .mwe-popups-container { opacity: 1 !important; }';
document.head.appendChild(style);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.classList && node.classList.contains('mwe-popups')) {
handlePopup(node);
}
});
});
});
function handlePopup(popup) {
var container = popup.querySelector('.mwe-popups-container');
if (!container) return;
// 初始化光效
if (window._liquidGlassInitPopup) {
window._liquidGlassInitPopup(container);
}
// 禁用鼠标
popup.style.pointerEvents = 'none';
// 执行动画
var anim = container.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: DURATION,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
fill: 'forwards'
});
anim.onfinish = function() {
popup.style.pointerEvents = '';
popup.classList.add('popup-animated');
anim.cancel();
};
}
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
/**
* Section19. 通知面板动画控制
*/
(function() {
'use strict';
var DURATION = 250;
var animated = false;
// 注入初始隐藏样式
var style = document.createElement('style');
style.textContent = '.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { opacity: 0 !important; } .mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-animated .oo-ui-popupWidget-popup { opacity: 1 !important; }';
document.head.appendChild(style);
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
mutation.addedNodes.forEach(function(node) {
if (node.classList && node.classList.contains('mw-echo-ui-notificationBadgeButtonPopupWidget-popup')) {
handleNotificationPopup(node);
}
});
});
});
// 也监听已存在元素的显示
setInterval(function() {
if (animated) return;
var popup = document.querySelector('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup');
if (popup && !popup.classList.contains('popup-animated')) {
var style = window.getComputedStyle(popup);
if (style.display !== 'none' && style.visibility !== 'hidden') {
handleNotificationPopup(popup);
}
}
}, 50);
function handleNotificationPopup(popup) {
if (popup.classList.contains('popup-animated')) return;
var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup');
if (!innerPopup) return;
animated = true;
// 初始化光效
if (window._liquidGlassInitPopup) {
window._liquidGlassInitPopup(innerPopup);
}
// 禁用鼠标
popup.style.pointerEvents = 'none';
// 执行动画
var anim = innerPopup.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: DURATION,
easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
fill: 'forwards'
});
anim.onfinish = function() {
popup.style.pointerEvents = '';
popup.classList.add('popup-animated');
anim.cancel();
// 监听关闭，重置状态
var closeCheck = setInterval(function() {
var s = window.getComputedStyle(popup);
if (s.display === 'none' || s.visibility === 'hidden') {
popup.classList.remove('popup-animated');
animated = false;
clearInterval(closeCheck);
}
}, 100);
};
}
observer.observe(document.body, {
childList: true,
subtree: true
});
})();