MediaWiki:Common.js:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第95行: | 第95行: | ||
window._liquidGlassInitPopup = initPopupLight; | window._liquidGlassInitPopup = initPopupLight; | ||
})(); | })(); | ||
/** | /** | ||
* Section25. Wiki 弹出预览菜单动画控制 | * Section25. Wiki 弹出预览菜单动画控制 | ||
* 向下滑入 + | * 向下滑入 + 淡入(加慢版本) | ||
*/ | */ | ||
(function() { | (function() { | ||
| 第108行: | 第107行: | ||
.mwe-popups .mwe-popups-container { | .mwe-popups .mwe-popups-container { | ||
opacity: 0 !important; | opacity: 0 !important; | ||
transform: translateY(- | transform: translateY(-12px) !important; | ||
transition: opacity 0. | transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), | ||
transform 0. | transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; | ||
} | } | ||
.mwe-popups.popup-show .mwe-popups-container { | .mwe-popups.popup-show .mwe-popups-container { | ||
| 第119行: | 第118行: | ||
/* 如果弹窗在下方(flipped-y),从下往上滑 */ | /* 如果弹窗在下方(flipped-y),从下往上滑 */ | ||
.mwe-popups.flipped-y .mwe-popups-container { | .mwe-popups.flipped-y .mwe-popups-container { | ||
transform: translateY( | transform: translateY(12px) !important; | ||
} | } | ||
.mwe-popups.flipped-y.popup-show .mwe-popups-container { | .mwe-popups.flipped-y.popup-show .mwe-popups-container { | ||
| 第151行: | 第150行: | ||
setTimeout(function() { | setTimeout(function() { | ||
node.style.pointerEvents = ''; | node.style.pointerEvents = ''; | ||
}, | }, 350); | ||
}); | }); | ||
}); | }); | ||
| 第161行: | 第160行: | ||
/** | /** | ||
* Section19. 通知面板动画控制 | * Section19. 通知面板动画控制 | ||
* | * 左下角缩放 + 淡入 + 修复加载阻塞 | ||
*/ | */ | ||
(function() { | (function() { | ||
| 第171行: | 第170行: | ||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { | .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { | ||
opacity: 0 !important; | opacity: 0 !important; | ||
transform: scale(0. | transform: scale(0.9) !important; | ||
transform-origin: | transform-origin: bottom left !important; | ||
transition: opacity 0. | transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), | ||
transform 0. | transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; | ||
} | } | ||
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-show .oo-ui-popupWidget-popup { | .mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-show .oo-ui-popupWidget-popup { | ||
opacity: 1 !important; | opacity: 1 !important; | ||
transform: scale(1 | transform: scale(1) !important; | ||
} | } | ||
`; | `; | ||
| 第184行: | 第183行: | ||
var lastState = false; | var lastState = false; | ||
var animating = false; | |||
setInterval(function() { | setInterval(function() { | ||
| 第189行: | 第189行: | ||
if (!popup) { | if (!popup) { | ||
lastState = false; | lastState = false; | ||
animating = false; | |||
return; | return; | ||
} | } | ||
| 第197行: | 第198行: | ||
if (isVisible && !lastState && !popup.classList.contains('popup-show')) { | if (isVisible && !lastState && !popup.classList.contains('popup-show')) { | ||
lastState = true; | lastState = true; | ||
// 关键修复:立即显示,不等待内容加载 | |||
if (animating) return; | |||
animating = true; | |||
var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup'); | var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup'); | ||
if (!innerPopup) return; | if (!innerPopup) { | ||
animating = false; | |||
return; | |||
} | |||
// 初始化光效 | // 初始化光效 | ||
| 第206行: | 第214行: | ||
} | } | ||
// 不禁用鼠标,允许立即交互 | |||
innerPopup.offsetHeight; // 强制重绘 | innerPopup.offsetHeight; // 强制重绘 | ||
// 立即触发动画 | |||
requestAnimationFrame(function() { | requestAnimationFrame(function() { | ||
popup.classList.add('popup-show'); | |||
setTimeout(function() { | |||
animating = false; | |||
}, 350); | |||
}); | }); | ||
} else if (!isVisible && lastState) { | } else if (!isVisible && lastState) { | ||
lastState = false; | lastState = false; | ||
popup.classList.remove('popup-show'); | popup.classList.remove('popup-show'); | ||
animating = false; | |||
} | } | ||
}, 50); | }, 50); | ||
})(); | })(); | ||
2026年2月22日 (日) 19:21的版本
/* 这里的任何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';
// 注入样式(transition + transform)
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;
}
/* 如果弹窗在下方(flipped-y),从下往上滑 */
.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';
// 注入样式
var style = document.createElement('style');
style.textContent = `
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup {
opacity: 0 !important;
transform: scale(0.9) !important;
transform-origin: bottom left !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;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-show .oo-ui-popupWidget-popup {
opacity: 1 !important;
transform: scale(1) !important;
}
`;
document.head.appendChild(style);
var lastState = false;
var animating = false;
setInterval(function() {
var popup = document.querySelector('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup');
if (!popup) {
lastState = false;
animating = false;
return;
}
var style = window.getComputedStyle(popup);
var isVisible = style.display !== 'none' && style.visibility !== 'hidden';
if (isVisible && !lastState && !popup.classList.contains('popup-show')) {
lastState = true;
// 关键修复:立即显示,不等待内容加载
if (animating) return;
animating = true;
var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup');
if (!innerPopup) {
animating = false;
return;
}
// 初始化光效
if (window._liquidGlassInitPopup) {
window._liquidGlassInitPopup(innerPopup);
}
// 不禁用鼠标,允许立即交互
innerPopup.offsetHeight; // 强制重绘
// 立即触发动画
requestAnimationFrame(function() {
popup.classList.add('popup-show');
setTimeout(function() {
animating = false;
}, 350);
});
} else if (!isVisible && lastState) {
lastState = false;
popup.classList.remove('popup-show');
animating = false;
}
}, 50);
})();