MediaWiki:Gadget-RightToolbar.js：修订间差异
删除的内容 添加的内容
小 修正 |
功能增强和优化 |
||
第1行：
/* ================================================================
MediaWiki Gadget: Custom Tools Bar（增强版）
功能：
- 深色模式适配
- 动态显示按钮 + 平滑动画
作者：你自己（改进自 Wikipedia 风格）
================================================================= */
mw.loader.using(['mediawiki.util'], function () {
function updateClock() {
var now = new Date();
var dateString = now.getFullYear() + "年" +
var timeString = now.toLocaleTimeString();
$('#current-date').text(dateString);
$('#current-time').text(timeString);
第13行 ⟶ 第21行：
$(function () {
var isMobile = window.innerWidth <= 768;
/* ---------- 深色模式检测 ---------- */
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
var $container = $('<div id="mw-custom-tools"></div>').css({▼
const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)';
position: 'fixed',▼
const border = isDark ? '#555' : '#aaa';
const color = isDark ? '#eee' : '#333';
display: 'flex',▼
flexDirection: 'column',▼
alignItems: 'flex-end',▼
gap: '5px',▼
zIndex: 9999▼
/* ---------- 工具栏容器 ---------- */
bottom: '120px',
right: '50px',
opacity: 0,
transform: 'translateY(20px)', // 初始位置
}).appendTo('body');
/* ---------- 按钮生成函数 ---------- */
function createButton(id, text, tooltip, clickHandler) {
return $('<div></div>', { id: id, title: tooltip, text: text }).css({
padding: '5px 10px',
fontSize: '12px',
background:
border: '1px solid
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color:
cursor: 'pointer',
textAlign: 'center',
opacity: 0.7,
transition: 'background 0.3s, opacity 0.3s, transform 0.3s',
function () { $(this).css({ background:
}
/
var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
});
▲ // 创建回到底部按钮
var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
});
/
if (!isMobile) {
var $clockDiv = $('<div id="current-clock"></div>').css({
padding: '6px 12px',
fontSize: '12px',
background:
border: '1px solid
borderRadius: '4px',
boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
color:
textAlign: 'center',
lineHeight: '1.4',
backdropFilter: 'blur(4px)'
}).append(
$('<div id="current-date">加载中...</div>'),
第77行 ⟶ 第93行：
}
/
$container.append($topButton, $bottomButton);
/* ---------- 初次进入的动画效果 ---------- */
▲ // 启动时钟更新（仅桌面端）
$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);
/* ---------- 时钟定时更新 ---------- */
if (!isMobile) {
updateClock();
setInterval(updateClock, 1000);
}
/* ---------- 滚动动态控制按钮显示 ---------- */
$topButton.hide(); // 初始隐藏
$(window).on('scroll', function () {
var scrollTop = $(this).scrollTop();
if (scrollTop > 200) {
$topButton.fadeIn();
} else {
$topButton.fadeOut();
}
});
});
});
| |||