MediaWiki:Gadget-RightToolbar.js:修订间差异
MediaWiki界面页面
更多操作
删除的内容 添加的内容
小 简化提示 |
Maintenance script(留言 | 贡献) 拆分样式并优化性能 |
||
| 第1行: | 第1行: | ||
/* ================================================================ |
/* ================================================================ |
||
MediaWiki Gadget: Localized Clock Bar |
MediaWiki Gadget: Localized Clock Bar |
||
功能: |
功能: |
||
- 显示浏览器本地时间和 UTC 时间 |
- 显示浏览器本地时间和 UTC 时间 |
||
- 使用 MediaWiki 用户语言格式 |
- 使用 MediaWiki 用户语言格式 |
||
- 动态响应语言切换,无需刷新 |
|||
- 深色模式适配 + 滑入动画 |
- 深色模式适配 + 滑入动画 |
||
作者:你自己 |
|||
================================================================= */ |
================================================================= */ |
||
mw.loader.using(['mediawiki.util'] |
mw.loader.using(['mediawiki.util']).then(function () { |
||
// 工具栏主函数 |
|||
function initClockBar() { |
function initClockBar() { |
||
var isMobile = window.innerWidth <= 768; |
var isMobile = window.innerWidth <= 768; |
||
var $container = $('#mw-right-toolbar'); |
|||
// ---------- 深色模式检测 ---------- |
|||
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches; |
|||
const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)'; |
|||
const border = isDark ? '#555' : '#aaa'; |
|||
const color = isDark ? '#eee' : '#333'; |
|||
// ---------- 创建工具栏容器 ---------- |
|||
var $container = $('#mw-custom-tools'); |
|||
if (!$container.length) { |
if (!$container.length) { |
||
$container = $('<div id="mw- |
$container = $('<div id="mw-right-toolbar" class="mw-right-toolbar"></div>').appendTo('body'); |
||
position: 'fixed', |
|||
bottom: '120px', |
|||
right: '50px', |
|||
display: 'flex', |
|||
flexDirection: 'column', |
|||
alignItems: 'flex-end', |
|||
gap: '5px', |
|||
zIndex: 9999, |
|||
opacity: 0, |
|||
transform: 'translateY(20px)', // 初始位置 |
|||
}).appendTo('body'); |
|||
} |
} |
||
// ---------- 按钮生成函数 ---------- |
|||
function createButton(id, text, tooltip, clickHandler) { |
function createButton(id, text, tooltip, clickHandler) { |
||
return $('< |
return $('<button></button>', { |
||
id: id, |
|||
class: 'mw-rt-button', |
|||
title: tooltip, |
|||
text: text, |
|||
type: 'button' |
|||
}).on('click', clickHandler); |
|||
color: color, |
|||
cursor: 'pointer', |
|||
textAlign: 'center', |
|||
opacity: 0.7, |
|||
transition: 'background 0.3s, opacity 0.3s, transform 0.3s', |
|||
backdropFilter: 'blur(4px)' |
|||
}).hover( |
|||
function () { $(this).css({ background: isDark ? '#555' : '#ddd', opacity: 1 }); }, |
|||
function () { $(this).css({ background: bg, opacity: 0.7 }); } |
|||
).click(clickHandler); |
|||
} |
} |
||
// ---------- 创建按钮 ---------- |
|||
var $topButton = $('#mw-scroll-top'); |
var $topButton = $('#mw-scroll-top'); |
||
if (!$topButton.length) { |
if (!$topButton.length) { |
||
| 第76行: | 第42行: | ||
} |
} |
||
var $clockDiv = $('#mw-right-toolbar-clock'); |
|||
// ---------- 时钟容器(桌面端) ---------- |
|||
var $clockDiv = $('#current-clock'); |
|||
if (!isMobile && !$clockDiv.length) { |
if (!isMobile && !$clockDiv.length) { |
||
$clockDiv = $('<div id=" |
$clockDiv = $('<div id="mw-right-toolbar-clock" class="mw-rt-clock"></div>').append( |
||
$('<div id="mw-local-date">加载中...</div>'), |
|||
$('<div id="mw-local-time"></div>'), |
|||
$('<div id="mw-utc-time"></div>') |
|||
border: '1px solid ' + border, |
|||
borderRadius: '4px', |
|||
boxShadow: '0 1px 3px rgba(0,0,0,0.2)', |
|||
color: color, |
|||
textAlign: 'center', |
|||
lineHeight: '1.4', |
|||
backdropFilter: 'blur(4px)' |
|||
}).append( |
|||
$('<div id="local-date">加载中...</div>'), |
|||
$('<div id="local-time"></div>'), |
|||
$('<div id="utc-time"></div>') |
|||
); |
); |
||
$container.append($clockDiv); |
$container.append($clockDiv); |
||
} |
} |
||
$topButton.hide(); |
|||
// ---------- 滚动动态显示 ---------- |
|||
var ticking = false; |
|||
$(window).on('scroll', function () { |
$(window).on('scroll', function () { |
||
if (ticking) { |
|||
return; |
|||
} |
|||
ticking = true; |
|||
window.requestAnimationFrame(function () { |
|||
var scrollTop = $(window).scrollTop(); |
|||
if (scrollTop > 200) { |
|||
$topButton.fadeIn(); |
|||
} else { |
|||
$topButton.fadeOut(); |
|||
} |
|||
ticking = false; |
|||
}); |
|||
}); |
}); |
||
window.requestAnimationFrame(function () { |
|||
// ---------- 初始动画 ---------- |
|||
$container.addClass('is-visible'); |
|||
$container.animate({ opacity: 1, transform: 'translateY(0)' }, 600); |
|||
}); |
|||
// ---------- 渲染时钟函数 ---------- |
|||
function renderClock() { |
function renderClock() { |
||
var now = new Date(); |
var now = new Date(); |
||
// 获取 MediaWiki 用户语言(wgUserLanguage) |
|||
var userLang = mw.config.get('wgUserLanguage') || 'en'; |
var userLang = mw.config.get('wgUserLanguage') || 'en'; |
||
// 本地时间 |
|||
var localFormatter = new Intl.DateTimeFormat(userLang, { |
var localFormatter = new Intl.DateTimeFormat(userLang, { |
||
year |
year: 'numeric', |
||
month: 'long', |
|||
day: 'numeric', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit', |
|||
hour12: false, |
hour12: false, |
||
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone |
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone |
||
}); |
}); |
||
var localParts = localFormatter.formatToParts(now); |
var localParts = localFormatter.formatToParts(now); |
||
var localDateStr = localParts.filter( |
var localDateStr = localParts.filter(function (p) { |
||
return p.type === 'year' || p.type === 'month' || p.type === 'day'; |
|||
}).map(function (p) { |
|||
var localTimeStr = localParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second') |
|||
return p.value; |
|||
}).join(' '); |
|||
$('#local-time').text(localTimeStr); |
|||
var localTimeStr = localParts.filter(function (p) { |
|||
return p.type === 'hour' || p.type === 'minute' || p.type === 'second'; |
|||
}).map(function (p) { |
|||
return p.value; |
|||
}).join(':'); |
|||
$('#mw-local-date').text(localDateStr); |
|||
$('#mw-local-time').text(localTimeStr); |
|||
// UTC 时间 |
|||
var utcFormatter = new Intl.DateTimeFormat(userLang, { |
var utcFormatter = new Intl.DateTimeFormat(userLang, { |
||
year |
year: 'numeric', |
||
month: 'long', |
|||
day: 'numeric', |
|||
hour: '2-digit', |
|||
minute: '2-digit', |
|||
second: '2-digit', |
|||
hour12: false, |
hour12: false, |
||
timeZone: 'UTC' |
timeZone: 'UTC' |
||
}); |
}); |
||
var utcParts = utcFormatter.formatToParts(now); |
var utcParts = utcFormatter.formatToParts(now); |
||
var utcDateStr = utcParts.filter( |
var utcDateStr = utcParts.filter(function (p) { |
||
return p.type === 'year' || p.type === 'month' || p.type === 'day'; |
|||
}).map(function (p) { |
|||
var utcTimeStr = utcParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second') |
|||
return p.value; |
|||
}).join(' '); |
|||
var utcTimeStr = utcParts.filter(function (p) { |
|||
return p.type === 'hour' || p.type === 'minute' || p.type === 'second'; |
|||
}).map(function (p) { |
|||
return p.value; |
|||
}).join(':'); |
|||
$('#mw-utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr); |
|||
} |
} |
||
var clockTimer = window.setInterval(renderClock, 1000); |
|||
// ---------- 定时刷新 ---------- |
|||
renderClock(); |
|||
renderClock(); // 启动立即渲染 |
|||
// ---------- 语言切换动态刷新 ---------- |
|||
// MediaWiki 用户语言修改后触发 user.languageChange hook |
|||
mw.hook('user.languageChange').add(renderClock); |
mw.hook('user.languageChange').add(renderClock); |
||
document.addEventListener('visibilitychange', function () { |
|||
if (document.hidden) { |
|||
window.clearInterval(clockTimer); |
|||
clockTimer = null; |
|||
return; |
|||
} |
|||
if (!clockTimer) { |
|||
clockTimer = window.setInterval(renderClock, 1000); |
|||
renderClock(); |
|||
} |
|||
}); |
|||
} |
} |
||
// 初始化工具条 |
|||
$(initClockBar); |
$(initClockBar); |
||
}); |
}); |
||
2025年12月27日 (六) 12:30的版本
/* ================================================================
MediaWiki Gadget: Localized Clock Bar
功能:
- 显示浏览器本地时间和 UTC 时间
- 使用 MediaWiki 用户语言格式
- 深色模式适配 + 滑入动画
================================================================= */
mw.loader.using(['mediawiki.util']).then(function () {
function initClockBar() {
var isMobile = window.innerWidth <= 768;
var $container = $('#mw-right-toolbar');
if (!$container.length) {
$container = $('<div id="mw-right-toolbar" class="mw-right-toolbar"></div>').appendTo('body');
}
function createButton(id, text, tooltip, clickHandler) {
return $('<button></button>', {
id: id,
class: 'mw-rt-button',
title: tooltip,
text: text,
type: 'button'
}).on('click', clickHandler);
}
var $topButton = $('#mw-scroll-top');
if (!$topButton.length) {
$topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
$('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
});
$container.append($topButton);
}
var $bottomButton = $('#mw-scroll-bottom');
if (!$bottomButton.length) {
$bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
$('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
});
$container.append($bottomButton);
}
var $clockDiv = $('#mw-right-toolbar-clock');
if (!isMobile && !$clockDiv.length) {
$clockDiv = $('<div id="mw-right-toolbar-clock" class="mw-rt-clock"></div>').append(
$('<div id="mw-local-date">加载中...</div>'),
$('<div id="mw-local-time"></div>'),
$('<div id="mw-utc-time"></div>')
);
$container.append($clockDiv);
}
$topButton.hide();
var ticking = false;
$(window).on('scroll', function () {
if (ticking) {
return;
}
ticking = true;
window.requestAnimationFrame(function () {
var scrollTop = $(window).scrollTop();
if (scrollTop > 200) {
$topButton.fadeIn();
} else {
$topButton.fadeOut();
}
ticking = false;
});
});
window.requestAnimationFrame(function () {
$container.addClass('is-visible');
});
function renderClock() {
var now = new Date();
var userLang = mw.config.get('wgUserLanguage') || 'en';
var localFormatter = new Intl.DateTimeFormat(userLang, {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone
});
var localParts = localFormatter.formatToParts(now);
var localDateStr = localParts.filter(function (p) {
return p.type === 'year' || p.type === 'month' || p.type === 'day';
}).map(function (p) {
return p.value;
}).join(' ');
var localTimeStr = localParts.filter(function (p) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
}).map(function (p) {
return p.value;
}).join(':');
$('#mw-local-date').text(localDateStr);
$('#mw-local-time').text(localTimeStr);
var utcFormatter = new Intl.DateTimeFormat(userLang, {
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
timeZone: 'UTC'
});
var utcParts = utcFormatter.formatToParts(now);
var utcDateStr = utcParts.filter(function (p) {
return p.type === 'year' || p.type === 'month' || p.type === 'day';
}).map(function (p) {
return p.value;
}).join(' ');
var utcTimeStr = utcParts.filter(function (p) {
return p.type === 'hour' || p.type === 'minute' || p.type === 'second';
}).map(function (p) {
return p.value;
}).join(':');
$('#mw-utc-time').text('UTC: ' + utcDateStr + ' ' + utcTimeStr);
}
var clockTimer = window.setInterval(renderClock, 1000);
renderClock();
mw.hook('user.languageChange').add(renderClock);
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
window.clearInterval(clockTimer);
clockTimer = null;
return;
}
if (!clockTimer) {
clockTimer = window.setInterval(renderClock, 1000);
renderClock();
}
});
}
$(initClockBar);
});