跳转到内容
打开/关闭菜单
  • 451 条目
  • 806 文件
  • 22 用户
  • 9167 编辑
Blockland Wiki
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
ETTW​(留言 | 贡献)
无编辑摘要
ETTW​(留言 | 贡献)
无编辑摘要
第1行: 第1行:
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */
/**
* 搜索面板弹性动画逻辑
*/
(function() {
    function handlePalette() {
        const palette = document.querySelector('.citizen-command-palette');
        if (palette) {
            // 确保位置居中并触发动画类
            if (!palette.classList.contains('glass-show')) {
                palette.classList.add('glass-show');
            }
        } else {
            // 当面板关闭时,移除所有带有 glass-show 的残留(虽然通常会被销毁)
            const activePalettes = document.querySelectorAll('.glass-show');
            activePalettes.forEach(p => p.classList.remove('glass-show'));
        }
    }


    // 每 50ms 检查一次搜索框状态(保持和 V20 脚本逻辑一致)
// 侧边栏广告
    setInterval(handlePalette, 50);
})();
// 在 MediaWiki:Common.js 中尝试
$(function() {
$(function() {
     if ($('#p-navigation').length) {
     if ($('#p-navigation').length) {
         var adHtml = '<div id="sidebar-ad"></div>';
         var adHtml = '<div id="sidebar-ad"></div>';
         $('#p-navigation').after(adHtml);
         $('#p-navigation').after(adHtml);
        // 使用 API 获取解析后的模板内容并注入
         $.get(mw.util.wikiScript('api'), {
         $.get(mw.util.wikiScript('api'), {
             action: 'parse',
             action: 'parse',
第36行: 第15行:
     }
     }
});
});
/**
/**
  * Blockland Wiki Liquid Glass Lighting System
  * Blockland Wiki Liquid Glass Lighting System
  * 全局液态玻璃光影联动系统
  * 全局液态玻璃光影联动系统(含弹窗支持)
  */
  */
(function() {
(function() {
     'use strict';
     'use strict';
      
      
     // 1. 判定开关:检查是否开启了性能模式(Basic)
     var isPerformanceMode = function() {
    // 这里的类名对应你反馈的 citizen-feature-performance-mode-clientpref-1
    const isPerformanceMode = () => {
         return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1');
         return document.documentElement.classList.contains('citizen-feature-performance-mode-clientpref-1');
     };
     };


     // 2. 目标选择器(包含目录 ID 和通用卡片类名)
     // 静态元素选择器
     const GLASS_SELECTORS = '#mw-panel-toc, #citizen-sidebar-lastmod, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, .mwe-popups-container';
     var GLASS_SELECTORS = '#mw-panel-toc, #citizen-sidebar-lastmod, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox';
 
    // 保存最后的鼠标位置
    var lastMouseX = 0;
    var lastMouseY = 0;


     const syncLight = (e) => {
     var syncLight = function(e) {
        // 如果是性能模式,直接退出,不消耗任何 CPU
         if (isPerformanceMode()) return;
         if (isPerformanceMode()) return;


         const elements = document.querySelectorAll(GLASS_SELECTORS);
         lastMouseX = e.clientX;
         elements.forEach(el => {
        lastMouseY = e.clientY;
             const rect = el.getBoundingClientRect();
 
        // 查询静态元素 + 动态弹窗容器
        var elements = document.querySelectorAll(GLASS_SELECTORS + ', .mwe-popups-container');
         elements.forEach(function(el) {
             var rect = el.getBoundingClientRect();
              
              
            // 只有当元素在视口内且宽度不为 0 时才计算(性能优化)
             if (rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0) {
             if (rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0) {
                 const x = ((e.clientX - rect.left) / rect.width) * 100;
                 var x = ((e.clientX - rect.left) / rect.width) * 100;
                 const y = ((e.clientY - rect.top) / rect.height) * 100;
                 var y = ((e.clientY - rect.top) / rect.height) * 100;
                  
                  
                // 注入坐标变量
                 el.style.setProperty('--mouse-x', x.toFixed(2) + '%');
                 el.style.setProperty('--mouse-x', x.toFixed(2) + '%');
                 el.style.setProperty('--mouse-y', y.toFixed(2) + '%');
                 el.style.setProperty('--mouse-y', y.toFixed(2) + '%');
第72行: 第55行:
     };
     };


     // 3. 搜索面板 glass-show 逻辑整合
     // 给新出现的弹窗立即注入光效坐标
     // 即使在性能模式,也可以保留简单的显示逻辑,或者一同禁用
    var initPopupLight = function(container) {
     const paletteCheck = setInterval(() => {
        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) + '%');
        }
    };
 
     // 搜索面板 glass-show
     setInterval(function() {
         if (isPerformanceMode()) return;  
         if (isPerformanceMode()) return;  
          
         var p = document.querySelector('.citizen-command-palette');
        const p = document.querySelector('.citizen-command-palette');
         if (p && !p.classList.contains('glass-show')) {
         if (p && !p.classList.contains('glass-show')) {
             p.classList.add('glass-show');
             p.classList.add('glass-show');
第83行: 第77行:
     }, 100);
     }, 100);


     // 4. 事件监听(使用 requestAnimationFrame 保证丝滑)
     // 鼠标跟踪
     let ticking = false;
     var ticking = false;
     document.addEventListener('mousemove', (e) => {
     document.addEventListener('mousemove', function(e) {
         if (isPerformanceMode()) return;
         if (isPerformanceMode()) return;
         if (!ticking) {
         if (!ticking) {
             window.requestAnimationFrame(() => {
             window.requestAnimationFrame(function() {
                 syncLight(e);
                 syncLight(e);
                 ticking = false;
                 ticking = false;
第97行: 第90行:
     }, { passive: true });
     }, { passive: true });


     // 5. 额外:当用户手动切换模式时清除变量(可选)
     // 模式切换清理
     // 防止从 Aero 切换到 Basic 时光效残留在一半的位置
     var modeObserver = new MutationObserver(function() {
    const observer = new MutationObserver(() => {
         if (isPerformanceMode()) {
         if (isPerformanceMode()) {
             document.querySelectorAll(GLASS_SELECTORS).forEach(el => {
             document.querySelectorAll(GLASS_SELECTORS + ', .mwe-popups-container').forEach(function(el) {
                 el.style.removeProperty('--mouse-x');
                 el.style.removeProperty('--mouse-x');
                 el.style.removeProperty('--mouse-y');
                 el.style.removeProperty('--mouse-y');
第107行: 第99行:
         }
         }
     });
     });
     observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
     modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
 
    // 暴露给弹窗动画模块使用
    window._liquidGlassInitPopup = initPopupLight;


})();
})();
/* ============================================== */
/* --- Section25.Wiki 弹出预览菜单动画控制 --- */
/* --- Web Animations API 版本 --- */
/* ============================================== */


/**
* Section25. Wiki 弹出预览菜单动画控制
* 纯 opacity 动画 + 光效初始化
*/
(function() {
(function() {
     'use strict';
     'use strict';
      
      
     const DURATION = 250;
     var DURATION = 200;
    const EASING = 'cubic-bezier(0.16, 1, 0.3, 1)';
      
      
     const observer = new MutationObserver((mutations) => {
     var observer = new MutationObserver(function(mutations) {
         mutations.forEach((mutation) => {
         mutations.forEach(function(mutation) {
             mutation.addedNodes.forEach((node) => {
             mutation.addedNodes.forEach(function(node) {
                 if (node.classList && node.classList.contains('mwe-popups')) {
                 if (node.classList && node.classList.contains('mwe-popups')) {
                     animatePopup(node);
                     handlePopup(node);
                 }
                 }
             });
             });
第131行: 第125行:
     });
     });
      
      
     function animatePopup(popup) {
     function handlePopup(popup) {
         const container = popup.querySelector('.mwe-popups-container');
         var container = popup.querySelector('.mwe-popups-container');
         if (!container) return;
         if (!container) return;
          
          
         // 判断方向
         // 初始化光效坐标
         const isFlippedY = popup.classList.contains('flipped-y');
         if (window._liquidGlassInitPopup) {
         const startY = isFlippedY ? 10 : -10;
            window._liquidGlassInitPopup(container);
         }
          
          
         // 禁用鼠标
         // 禁用鼠标防止闪烁
         popup.style.pointerEvents = 'none';
         popup.style.pointerEvents = 'none';
          
          
         // 用 Web Animations API 在 container 上做动画
         // 只做 opacity 淡入
         const anim = container.animate([
         var anim = container.animate([
             { opacity: 0, transform: 'translateY(' + startY + 'px)' },
             { opacity: 0 },
             { opacity: 1, transform: 'translateY(0)' }
             { opacity: 1 }
         ], {
         ], {
             duration: DURATION,
             duration: DURATION,
             easing: EASING,
             easing: 'ease-out',
             fill: 'forwards'
             fill: 'forwards'
         });
         });
第154行: 第149行:
         anim.onfinish = function() {
         anim.onfinish = function() {
             popup.style.pointerEvents = '';
             popup.style.pointerEvents = '';
            // 清理动画,避免残留 transform 影响后续渲染
             anim.cancel();
             anim.cancel();
             container.style.opacity = '';
             container.style.opacity = '';
            container.style.transform = '';
         };
         };
       
        console.log('✅ 动画已触发');
     }
     }
      
      
第167行: 第158行:
         subtree: true
         subtree: true
     });
     });
   
    console.log('✅ 弹窗动画监听已启动');
})();
})();

2026年2月22日 (日) 18:06的版本

/* 这里的任何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';

    // 保存最后的鼠标位置
    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 + ', .mwe-popups-container');
        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) + '%');
        }
    };

    // 搜索面板 glass-show
    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 + ', .mwe-popups-container').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 弹出预览菜单动画控制
 * 纯 opacity 动画 + 光效初始化
 */
(function() {
    'use strict';
    
    var DURATION = 200;
    
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.classList && node.classList.contains('mwe-popups')) {
                    handlePopup(node);
                }
            });
        });
    });
    
    function handlePopup(popup) {
        var container = popup.querySelector('.mwe-popups-container');
        if (!container) return;
        
        // 初始化光效坐标
        if (window._liquidGlassInitPopup) {
            window._liquidGlassInitPopup(container);
        }
        
        // 禁用鼠标防止闪烁
        popup.style.pointerEvents = 'none';
        
        // 只做 opacity 淡入
        var anim = container.animate([
            { opacity: 0 },
            { opacity: 1 }
        ], {
            duration: DURATION,
            easing: 'ease-out',
            fill: 'forwards'
        });
        
        anim.onfinish = function() {
            popup.style.pointerEvents = '';
            anim.cancel();
            container.style.opacity = '';
        };
    }
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();