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

以互动方式浏览历史

←上一编辑下一编辑→

删除的内容添加的内容

行内

@@ 第1行： / 第1行： @@
+/* ================================================================
+   MediaWiki Gadget: Custom Tools Bar（增强版）
+   功能：
+   - 回到顶部 / 回到底部按钮
+   - 实时时钟（桌面端）
+   - 深色模式适配
+   - 动态显示按钮 + 平滑动画
+   作者：你自己（改进自 Wikipedia 风格）
+   ================================================================= */
 mw.loader.using(['mediawiki.util'], function () {
     function updateClock() {
         var now = new Date();
         var dateString = now.getFullYear() + "年" +
-                         (now.getMonth() + 1).toString().padStart(2, '0') + "月" +
+            (now.getMonth() + 1).toString().padStart(2, '0') + "月" +
-                         now.getDate().toString().padStart(2, '0') + "日";
+            now.getDate().toString().padStart(2, '0') + "日";
         var timeString = now.toLocaleTimeString();
         $('#current-date').text(dateString);
         $('#current-time').text(timeString);
@@ 第13行： / 第21行： @@
     $(function () {
-        var isMobile = window.innerWidth <= 768; // 判断是否为移动端
+        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';
-		    bottom: '120px', // 避免与其他工具重叠
+        const color = isDark ? '#eee' : '#333';
-		    right: '50px',  // 这里调整 right 值，使按钮向左移动
-		    display: 'flex',
-		    flexDirection: 'column',
-		    alignItems: 'flex-end',
-		    gap: '5px',
-		    zIndex: 9999
-		});
+        /* ---------- 工具栏容器 ---------- */
-        // 统一按钮样式
+        var $container = $('<div id="mw-custom-tools"></div>').css({
+            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) {
             return $('<div></div>', { id: id, title: tooltip, text: text }).css({
                 padding: '5px 10px',
                 fontSize: '12px',
-                background: '#f1f1f1',
+                background: bg,
-                border: '1px solid #aaa',
+                border: '1px solid ' + border,
                 borderRadius: '4px',
                 boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-                color: '#333',
+                color: color,
                 cursor: 'pointer',
                 textAlign: 'center',
                 opacity: 0.7,
-                transition: 'background 0.3s, opacity 0.3s'
+                transition: 'background 0.3s, opacity 0.3s, transform 0.3s',
-            }).hover(function () {
+                backdropFilter: 'blur(4px)'
-                $(this).css({ background: '#ddd', opacity: 1 });
+            }).hover(
-            }, function () {
+                function () { $(this).css({ background: isDark ? '#555' : '#ddd', opacity: 1 }); },
-                $(this).css({ background: '#f1f1f1', opacity: 0.7 });
+                function () { $(this).css({ background: bg, opacity: 0.7 }); }
-            }).click(clickHandler);
+            ).click(clickHandler);
         }
-        // 创建回到顶部按钮
+        /* ---------- 按钮 ---------- */
         var $topButton = createButton('mw-scroll-top', '▲', '回到顶部', function () {
-            $('html, body').animate({ scrollTop: 0 }, 500);
+            $('html, body').animate({ scrollTop: 0 }, { duration: 500, easing: 'swing' });
         });
-        // 创建回到底部按钮
         var $bottomButton = createButton('mw-scroll-bottom', '▼', '回到底部', function () {
-            $('html, body').animate({ scrollTop: $(document).height() }, 500);
+            $('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: '#f1f1f1',
+                background: bg,
-                border: '1px solid #aaa',
+                border: '1px solid ' + border,
                 borderRadius: '4px',
                 boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
-                color: '#333',
+                color: color,
                 textAlign: 'center',
-                lineHeight: '1.4'
+                lineHeight: '1.4',
+                backdropFilter: 'blur(4px)'
             }).append(
                 $('<div id="current-date">加载中...</div>'),
@@ 第77行： / 第93行： @@
         }
-        // 组装按钮
+        /* ---------- 组装按钮 ---------- */
         $container.append($topButton, $bottomButton);
-        $('body').append($container);
+        /* ---------- 初次进入的动画效果 ---------- */
-        // 启动时钟更新（仅桌面端）
+        $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();
+            }
+        });
     });
 });