MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ | /* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */ | ||
// 侧边栏广告 | |||
$(function() { | $(function() { | ||
if ($('#p-navigation').length) { | if ($('#p-navigation').length) { | ||
var adHtml = '<div id="sidebar-ad"></div>'; | var adHtml = '<div id="sidebar-ad"></div>'; | ||
$('#p-navigation').after(adHtml); | $('#p-navigation').after(adHtml); | ||
$.get(mw.util.wikiScript('api'), { | $.get(mw.util.wikiScript('api'), { | ||
action: 'parse', | action: 'parse', | ||
| 第36行: | 第15行: | ||
} | } | ||
}); | }); | ||
/** | /** | ||
* Blockland Wiki Liquid Glass Lighting System | * Blockland Wiki Liquid Glass Lighting System | ||
* | * 全局液态玻璃光影联动系统(含弹窗支持) | ||
*/ | */ | ||
(function() { | (function() { | ||
'use strict'; | 'use strict'; | ||
var isPerformanceMode = function() { | |||
return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1'); | 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'; | |||
// 保存最后的鼠标位置 | |||
var lastMouseX = 0; | |||
var lastMouseY = 0; | |||
var syncLight = function(e) { | |||
if (isPerformanceMode()) return; | if (isPerformanceMode()) return; | ||
lastMouseX = e.clientX; | |||
elements.forEach(el | lastMouseY = e.clientY; | ||
// 查询静态元素 + 动态弹窗容器 | |||
var elements = document.querySelectorAll(GLASS_SELECTORS + ', .mwe-popups-container'); | |||
elements.forEach(function(el) { | |||
var rect = el.getBoundingClientRect(); | |||
if (rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0) { | 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-x', x.toFixed(2) + '%'); | ||
el.style.setProperty('--mouse-y', y.toFixed(2) + '%'); | el.style.setProperty('--mouse-y', y.toFixed(2) + '%'); | ||
| 第72行: | 第55行: | ||
}; | }; | ||
// | // 给新出现的弹窗立即注入光效坐标 | ||
// | 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) + '%'); | |||
} | |||
}; | |||
// 搜索面板 glass-show | |||
setInterval(function() { | |||
if (isPerformanceMode()) return; | if (isPerformanceMode()) return; | ||
var p = document.querySelector('.citizen-command-palette'); | |||
if (p && !p.classList.contains('glass-show')) { | if (p && !p.classList.contains('glass-show')) { | ||
p.classList.add('glass-show'); | p.classList.add('glass-show'); | ||
| 第83行: | 第77行: | ||
}, 100); | }, 100); | ||
// | // 鼠标跟踪 | ||
var ticking = false; | |||
document.addEventListener('mousemove', (e) | document.addEventListener('mousemove', function(e) { | ||
if (isPerformanceMode()) return; | if (isPerformanceMode()) return; | ||
if (!ticking) { | if (!ticking) { | ||
window.requestAnimationFrame(() | window.requestAnimationFrame(function() { | ||
syncLight(e); | syncLight(e); | ||
ticking = false; | ticking = false; | ||
| 第97行: | 第90行: | ||
}, { passive: true }); | }, { passive: true }); | ||
// | // 模式切换清理 | ||
var modeObserver = new MutationObserver(function() { | |||
if (isPerformanceMode()) { | if (isPerformanceMode()) { | ||
document.querySelectorAll(GLASS_SELECTORS).forEach(el | document.querySelectorAll(GLASS_SELECTORS + ', .mwe-popups-container').forEach(function(el) { | ||
el.style.removeProperty('--mouse-x'); | el.style.removeProperty('--mouse-x'); | ||
el.style.removeProperty('--mouse-y'); | el.style.removeProperty('--mouse-y'); | ||
| 第107行: | 第99行: | ||
} | } | ||
}); | }); | ||
modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }); | |||
// 暴露给弹窗动画模块使用 | |||
window._liquidGlassInitPopup = initPopupLight; | |||
})(); | })(); | ||
/** | |||
* Section25. Wiki 弹出预览菜单动画控制 | |||
* 纯 opacity 动画 + 光效初始化 | |||
*/ | |||
(function() { | (function() { | ||
'use strict'; | 'use strict'; | ||
var DURATION = 200; | |||
var observer = new MutationObserver(function(mutations) { | |||
mutations.forEach((mutation) | mutations.forEach(function(mutation) { | ||
mutation.addedNodes.forEach((node) | mutation.addedNodes.forEach(function(node) { | ||
if (node.classList && node.classList.contains('mwe-popups')) { | if (node.classList && node.classList.contains('mwe-popups')) { | ||
handlePopup(node); | |||
} | } | ||
}); | }); | ||
| 第131行: | 第125行: | ||
}); | }); | ||
function | function handlePopup(popup) { | ||
var container = popup.querySelector('.mwe-popups-container'); | |||
if (!container) return; | if (!container) return; | ||
// | // 初始化光效坐标 | ||
if (window._liquidGlassInitPopup) { | |||
window._liquidGlassInitPopup(container); | |||
} | |||
// | // 禁用鼠标防止闪烁 | ||
popup.style.pointerEvents = 'none'; | popup.style.pointerEvents = 'none'; | ||
// | // 只做 opacity 淡入 | ||
var anim = container.animate([ | |||
{ opacity: 0 | { opacity: 0 }, | ||
{ opacity: 1 | { opacity: 1 } | ||
], { | ], { | ||
duration: DURATION, | duration: DURATION, | ||
easing: | easing: 'ease-out', | ||
fill: 'forwards' | fill: 'forwards' | ||
}); | }); | ||
| 第154行: | 第149行: | ||
anim.onfinish = function() { | anim.onfinish = function() { | ||
popup.style.pointerEvents = ''; | popup.style.pointerEvents = ''; | ||
anim.cancel(); | anim.cancel(); | ||
container.style.opacity = ''; | container.style.opacity = ''; | ||
}; | }; | ||
} | } | ||
| 第167行: | 第158行: | ||
subtree: true | subtree: true | ||
}); | }); | ||
})(); | })(); | ||
2026年2月22日 (日) 18:06的版本
/* 这里的任何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';
// 保存最后的鼠标位置
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 + ', .mwe-popups-container');
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) + '%');
}
};
// 搜索面板 glass-show
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 + ', .mwe-popups-container').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 弹出预览菜单动画控制
* 纯 opacity 动画 + 光效初始化
*/
(function() {
'use strict';
var DURATION = 200;
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';
// 只做 opacity 淡入
var anim = container.animate([
{ opacity: 0 },
{ opacity: 1 }
], {
duration: DURATION,
easing: 'ease-out',
fill: 'forwards'
});
anim.onfinish = function() {
popup.style.pointerEvents = '';
anim.cancel();
container.style.opacity = '';
};
}
observer.observe(document.body, {
childList: true,
subtree: true
});
})();