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

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
ETTW​(留言 | 贡献)
撤销ETTW(讨论)的修订版本2451
标签:撤销
ETTW​(留言 | 贡献)
无编辑摘要
第18行: 第18行:
/**
/**
  * Blockland Wiki Liquid Glass Lighting System
  * Blockland Wiki Liquid Glass Lighting System
  * 全局液态玻璃光影联动系统(含弹窗和通知面板支持)
  * 全局液态玻璃光影联动系统
  */
  */
(function() {
(function() {
第27行: 第27行:
     };
     };


    // 静态元素选择器
     var GLASS_SELECTORS = '#mw-panel-toc, #citizen-sidebar-lastmod, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox, .mwe-popups-container, .oo-ui-popupWidget-popup';
     var GLASS_SELECTORS = '#mw-panel-toc, #citizen-sidebar-lastmod, .citizen-menu__card, .citizen-toc-card, .citizen-command-palette, .infobox, table.ambox, .mwe-popups-container, .oo-ui-popupWidget-popup';


    // 保存最后的鼠标位置
     var lastMouseX = 0;
     var lastMouseX = 0;
     var lastMouseY = 0;
     var lastMouseY = 0;
第54行: 第52行:
     };
     };


    // 给新出现的面板立即注入光效坐标
     var initPopupLight = function(container) {
     var initPopupLight = function(container) {
         if (isPerformanceMode()) return;
         if (isPerformanceMode()) return;
第67行: 第64行:
     };
     };


    // 搜索面板 glass-show
     setInterval(function() {
     setInterval(function() {
         if (isPerformanceMode()) return;  
         if (isPerformanceMode()) return;  
第76行: 第72行:
     }, 100);
     }, 100);


    // 鼠标跟踪
     var ticking = false;
     var ticking = false;
     document.addEventListener('mousemove', function(e) {
     document.addEventListener('mousemove', function(e) {
第89行: 第84行:
     }, { passive: true });
     }, { passive: true });


    // 模式切换清理
     var modeObserver = new MutationObserver(function() {
     var modeObserver = new MutationObserver(function() {
         if (isPerformanceMode()) {
         if (isPerformanceMode()) {
第100行: 第94行:
     modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
     modeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });


    // 暴露给动画模块使用
     window._liquidGlassInitPopup = initPopupLight;
     window._liquidGlassInitPopup = initPopupLight;


第107行: 第100行:
/**
/**
  * Section25. Wiki 弹出预览菜单动画控制
  * Section25. Wiki 弹出预览菜单动画控制
* 纯 opacity 动画
  */
  */
(function() {
(function() {
     'use strict';
     'use strict';
      
      
     var DURATION = 200;
     var DURATION = 250;
   
    // 注入初始隐藏样式
    var style = document.createElement('style');
    style.textContent = '.mwe-popups .mwe-popups-container { opacity: 0 !important; } .mwe-popups.popup-animated .mwe-popups-container { opacity: 1 !important; }';
    document.head.appendChild(style);
      
      
     var observer = new MutationObserver(function(mutations) {
     var observer = new MutationObserver(function(mutations) {
第128行: 第125行:
         if (!container) return;
         if (!container) return;
          
          
         // 初始化光效坐标
         // 初始化光效
         if (window._liquidGlassInitPopup) {
         if (window._liquidGlassInitPopup) {
             window._liquidGlassInitPopup(container);
             window._liquidGlassInitPopup(container);
         }
         }
          
          
         // 禁用鼠标防止闪烁
         // 禁用鼠标
         popup.style.pointerEvents = 'none';
         popup.style.pointerEvents = 'none';
          
          
         // 只做 opacity 淡入
         // 执行动画
         var anim = container.animate([
         var anim = container.animate([
             { opacity: 0 },
             { opacity: 0 },
第142行: 第139行:
         ], {
         ], {
             duration: DURATION,
             duration: DURATION,
             easing: 'ease-out',
             easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
             fill: 'forwards'
             fill: 'forwards'
         });
         });
第148行: 第145行:
         anim.onfinish = function() {
         anim.onfinish = function() {
             popup.style.pointerEvents = '';
             popup.style.pointerEvents = '';
            popup.classList.add('popup-animated');
             anim.cancel();
             anim.cancel();
            container.style.opacity = '';
         };
         };
     }
     }
第161行: 第158行:
/**
/**
  * Section19. 通知面板动画控制
  * Section19. 通知面板动画控制
* 从右下角缩放淡入(不用 transform 避免破坏 backdrop-filter)
  */
  */
(function() {
(function() {
     'use strict';
     'use strict';
      
      
     var DURATION = 200;
     var DURATION = 250;
    var animated = false;
   
    // 注入初始隐藏样式
    var style = document.createElement('style');
    style.textContent = '.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { opacity: 0 !important; } .mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-animated .oo-ui-popupWidget-popup { opacity: 1 !important; }';
    document.head.appendChild(style);
      
      
     var observer = new MutationObserver(function(mutations) {
     var observer = new MutationObserver(function(mutations) {
第177行: 第179行:
         });
         });
     });
     });
   
    // 也监听已存在元素的显示
    setInterval(function() {
        if (animated) return;
        var popup = document.querySelector('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup');
        if (popup && !popup.classList.contains('popup-animated')) {
            var style = window.getComputedStyle(popup);
            if (style.display !== 'none' && style.visibility !== 'hidden') {
                handleNotificationPopup(popup);
            }
        }
    }, 50);
      
      
     function handleNotificationPopup(popup) {
     function handleNotificationPopup(popup) {
        if (popup.classList.contains('popup-animated')) return;
       
         var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup');
         var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup');
         if (!innerPopup) return;
         if (!innerPopup) return;
          
          
         // 初始化光效坐标
        animated = true;
       
         // 初始化光效
         if (window._liquidGlassInitPopup) {
         if (window._liquidGlassInitPopup) {
             window._liquidGlassInitPopup(innerPopup);
             window._liquidGlassInitPopup(innerPopup);
         }
         }
          
          
         // 禁用鼠标防止闪烁
         // 禁用鼠标
         popup.style.pointerEvents = 'none';
         popup.style.pointerEvents = 'none';
          
          
         // 只做 opacity 淡入(避免 transform 破坏 backdrop-filter)
         // 执行动画
         var anim = innerPopup.animate([
         var anim = innerPopup.animate([
             { opacity: 0 },
             { opacity: 0 },
第202行: 第220行:
         anim.onfinish = function() {
         anim.onfinish = function() {
             popup.style.pointerEvents = '';
             popup.style.pointerEvents = '';
            popup.classList.add('popup-animated');
             anim.cancel();
             anim.cancel();
             innerPopup.style.opacity = '';
              
            // 监听关闭,重置状态
            var closeCheck = setInterval(function() {
                var s = window.getComputedStyle(popup);
                if (s.display === 'none' || s.visibility === 'hidden') {
                    popup.classList.remove('popup-animated');
                    animated = false;
                    clearInterval(closeCheck);
                }
            }, 100);
         };
         };
     }
     }

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

/* 这里的任何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, .mwe-popups-container, .oo-ui-popupWidget-popup';

    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);
        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) + '%');
        }
    };

    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).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 弹出预览菜单动画控制
 */
(function() {
    'use strict';
    
    var DURATION = 250;
    
    // 注入初始隐藏样式
    var style = document.createElement('style');
    style.textContent = '.mwe-popups .mwe-popups-container { opacity: 0 !important; } .mwe-popups.popup-animated .mwe-popups-container { opacity: 1 !important; }';
    document.head.appendChild(style);
    
    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';
        
        // 执行动画
        var anim = container.animate([
            { opacity: 0 },
            { opacity: 1 }
        ], {
            duration: DURATION,
            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
            fill: 'forwards'
        });
        
        anim.onfinish = function() {
            popup.style.pointerEvents = '';
            popup.classList.add('popup-animated');
            anim.cancel();
        };
    }
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

/**
 * Section19. 通知面板动画控制
 */
(function() {
    'use strict';
    
    var DURATION = 250;
    var animated = false;
    
    // 注入初始隐藏样式
    var style = document.createElement('style');
    style.textContent = '.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup { opacity: 0 !important; } .mw-echo-ui-notificationBadgeButtonPopupWidget-popup.popup-animated .oo-ui-popupWidget-popup { opacity: 1 !important; }';
    document.head.appendChild(style);
    
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            mutation.addedNodes.forEach(function(node) {
                if (node.classList && node.classList.contains('mw-echo-ui-notificationBadgeButtonPopupWidget-popup')) {
                    handleNotificationPopup(node);
                }
            });
        });
    });
    
    // 也监听已存在元素的显示
    setInterval(function() {
        if (animated) return;
        var popup = document.querySelector('.mw-echo-ui-notificationBadgeButtonPopupWidget-popup');
        if (popup && !popup.classList.contains('popup-animated')) {
            var style = window.getComputedStyle(popup);
            if (style.display !== 'none' && style.visibility !== 'hidden') {
                handleNotificationPopup(popup);
            }
        }
    }, 50);
    
    function handleNotificationPopup(popup) {
        if (popup.classList.contains('popup-animated')) return;
        
        var innerPopup = popup.querySelector('.oo-ui-popupWidget-popup');
        if (!innerPopup) return;
        
        animated = true;
        
        // 初始化光效
        if (window._liquidGlassInitPopup) {
            window._liquidGlassInitPopup(innerPopup);
        }
        
        // 禁用鼠标
        popup.style.pointerEvents = 'none';
        
        // 执行动画
        var anim = innerPopup.animate([
            { opacity: 0 },
            { opacity: 1 }
        ], {
            duration: DURATION,
            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
            fill: 'forwards'
        });
        
        anim.onfinish = function() {
            popup.style.pointerEvents = '';
            popup.classList.add('popup-animated');
            anim.cancel();
            
            // 监听关闭,重置状态
            var closeCheck = setInterval(function() {
                var s = window.getComputedStyle(popup);
                if (s.display === 'none' || s.visibility === 'hidden') {
                    popup.classList.remove('popup-animated');
                    animated = false;
                    clearInterval(closeCheck);
                }
            }, 100);
        };
    }
    
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();