MediaWiki:Gadget-RightToolbar.js：修订间差异

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第1行： / 第1行： @@
 /* ================================================================
-   MediaWiki Gadget: Custom Tools Bar with Localized Clock
+   MediaWiki Gadget: Localized Clock Bar (增强版)
    功能：
+   - 显示浏览器本地时间和 UTC 时间
-   - 回到顶部 / 回到底部按钮
+   - 使用 MediaWiki 用户语言格式
-   - 本地化日期和时间显示（浏览器时区 + UTC）
+   - 动态响应语言切换，无需刷新
-   - 深色模式自动适配
-   - 动态显示按钮 + 平滑动画
+   - 深色模式适配 + 滑入动画
    作者：你自己
    ================================================================= */
-mw.loader.using(['mediawiki.util', 'mediawiki.language'], function () {
+mw.loader.using(['mediawiki.util'], function () {
+    // 工具栏主函数
-    function updateClock() {
+    function initClockBar() {
-        // 浏览器本地时间
-        var local = new Date();
-        // UTC 时间，从浏览器系统获取即可
-        var utc = new Date(local.getTime() + local.getTimezoneOffset() * 60000);
-        // MediaWiki 提供的语言设置
-        var userLang = mw.config.get('wgUserLanguage') || 'en';
-        // 本地化格式化函数
-        // dateStyle/timeStyle 采用 Intl.DateTimeFormat 可选参数，也可以用短/长格式
-        var localString = new Intl.DateTimeFormat(userLang, {
-            year: 'numeric', month: 'long', day: 'numeric',
-            hour: '2-digit', minute: '2-digit', second: '2-digit',
-            hour12: false
-        }).format(local);
-        var utcString = new Intl.DateTimeFormat(userLang, {
-            year: 'numeric', month: 'long', day: 'numeric',
-            hour: '2-digit', minute: '2-digit', second: '2-digit',
-            hour12: false, timeZone: 'UTC'
-        }).format(utc);
-        $('#current-local-time').text(localString);
-        $('#current-utc-time').text(utcString);
-    }
-    $(function () {
         var isMobile = window.innerWidth <= 768;
-        /* ---------- 深色模式检测 ---------- */
+        // ---------- 深色模式检测 ----------
         const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         const bg = isDark ? 'rgba(40,40,40,0.85)' : 'rgba(255,255,255,0.85)';
@@ 第47行： / 第21行： @@
         const color = isDark ? '#eee' : '#333';
-        /* ---------- 工具栏容器 ---------- */
+        // ---------- 创建工具栏容器 ----------
-        var $container = $('<div id="mw-custom-tools"></div>').css({
+        var $container = $('#mw-custom-tools');
+        if (!$container.length) {
-            position: 'fixed',
-            bottom: '120px',
+            $container = $('<div id="mw-custom-tools"></div>').css({
-            right: '50px',
+                position: 'fixed',
-            display: 'flex',
+                bottom: '120px',
-            flexDirection: 'column',
+                right: '50px',
-            alignItems: 'flex-end',
+                display: 'flex',
-            gap: '5px',
+                flexDirection: 'column',
-            zIndex: 9999,
+                alignItems: 'flex-end',
-            opacity: 0,
+                gap: '5px',
-            transform: 'translateY(20px)',
+                zIndex: 9999,
-        }).appendTo('body');
+                opacity: 0,
+                transform: 'translateY(20px)', // 初始位置
+            }).appendTo('body');
+        }
-        /* ---------- 按钮生成函数 ---------- */
+        // ---------- 按钮生成函数 ----------
         function createButton(id, text, tooltip, clickHandler) {
             return $('<div></div>', { id: id, title: tooltip, text: text }).css({
@@ 第82行： / 第59行： @@
         }
-        /* ---------- 按钮 ---------- */
+        // ---------- 创建按钮 ----------
-        var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
+        var $topButton = $('#mw-scroll-top');
+        if (!$topButton.length) {
-            $('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
+            $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
-        });
+                $('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
+            });
+            $container.append($topButton);
+        }
-        var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
+        var $bottomButton = $('#mw-scroll-bottom');
+        if (!$bottomButton.length) {
-            $('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
+            $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
-        });
+                $('html, body').animate({ scrollTop: $(document).height() }, { duration: 500, easing: 'swing' });
+            });
+            $container.append($bottomButton);
+        }
-        /* ---------- 时钟（桌面端） ---------- */
+        // ---------- 时钟容器（桌面端） ----------
-        if (!isMobile) {
+        var $clockDiv = $('#current-clock');
-            var $clockDiv = $('<div id="current-clock"></div>').css({
+        if (!isMobile && !$clockDiv.length) {
+            $clockDiv = $('<div id="current-clock"></div>').css({
                 padding: '6px 12px',
                 fontSize: '12px',
@@ 第105行： / 第91行： @@
                 backdropFilter: 'blur(4px)'
             }).append(
-                $('<div id="current-local-time">加载中...</div>'),
+                $('<div id="local-date">加载中...</div>'),
-                $('<div id="current-utc-time">加载中...</div>')
+                $('<div id="local-time"></div>'),
+                $('<div id="utc-time"></div>')
             );
             $container.append($clockDiv);
         }
-        /* ---------- 组装按钮 ---------- */
+        // ---------- 滚动动态显示 ----------
+        $topButton.hide(); // 初始隐藏
-        $container.append($topButton, $bottomButton);
+        $(window).on('scroll', function () {
+            var scrollTop = $(this).scrollTop();
+            if (scrollTop > 200) $topButton.fadeIn(); else $topButton.fadeOut();
+        });
-        /* ---------- 初次进入动画 ---------- */
+        // ---------- 初始动画 ----------
         $container.animate({ opacity: 1, transform: 'translateY(0)' }, 600);
-        /* ---------- 时钟定时更新 ---------- */
+        // ---------- 渲染时钟函数 ----------
-        if (!isMobile) {
+        function renderClock() {
-            updateClock();
+            var now = new Date();
-            setInterval(updateClock, 1000);
+            // 获取 MediaWiki 用户语言（wgUserLanguage）
+            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(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
+                                         .map(p => p.value).join(' ');
+            var localTimeStr = localParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
+                                         .map(p => p.value).join(':');
+            $('#local-date').text('本地日期: ' + localDateStr);
+            $('#local-time').text('本地时间: ' + localTimeStr);
+            // UTC 时间
+            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(p => p.type === 'year' || p.type === 'month' || p.type === 'day')
+                                     .map(p => p.value).join(' ');
+            var utcTimeStr = utcParts.filter(p => p.type === 'hour' || p.type === 'minute' || p.type === 'second')
+                                     .map(p => p.value).join(':');
+            $('#utc-time').text('UTC 时间: ' + utcDateStr + ' ' + utcTimeStr);
         }
-        /* ---------- 滚动动态控制按钮显示 ---------- */
+        // ---------- 定时刷新 ----------
+        setInterval(renderClock, 1000);
-        $topButton.hide(); // 初始隐藏
+        renderClock(); // 启动立即渲染
-        $(window).on('scroll', function () {
-            var scrollTop = $(this).scrollTop();
+        // ---------- 语言切换动态刷新 ----------
-            if (scrollTop > 200) {
+        // MediaWiki 用户语言修改后触发 user.languageChange hook
-                $topButton.fadeIn();
+        mw.hook('user.languageChange').add(renderClock);
-            } else {
+    }
-                $topButton.fadeOut();
-            }
+    // 初始化工具条
-        });
-    });
+    $(initClockBar);
 });