打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.js:修订间差异

MediaWiki界面页面
OnlyOTO留言 | 贡献
无编辑摘要
标签已被回退
OnlyOTO留言 | 贡献
无编辑摘要
标签已被回退
第16行: 第16行:
     mw.loader.using('jquery', function() {
     mw.loader.using('jquery', function() {
         $(function() {
         $(function() {
            // 防重复挂载
             if (document.querySelector('.magnetic-pointer-original')) return;
             if (document.querySelector('.magnetic-pointer-original')) return;


            // 创建光标DOM
             const pointer = document.createElement('div');
             const pointer = document.createElement('div');
             pointer.className = 'magnetic-pointer-original';
             pointer.className = 'magnetic-pointer-original';
第23行: 第25行:
             document.body.appendChild(pointer);
             document.body.appendChild(pointer);


            // 终极修复CSS:纯镂空四角 + 适配Citizen层级
             const style = document.createElement('style');
             const style = document.createElement('style');
             style.textContent = `
             style.textContent = `
/* 光标本体 */
.magnetic-pointer-original {
.magnetic-pointer-original {
     --width: 4rem;
     --width: 4rem;
第35行: 第39行:
     transition: all 0.2s ease-out;
     transition: all 0.2s ease-out;
     pointer-events: none;
     pointer-events: none;
     z-index: 99999;
     z-index: 999999 !important; /* 压过Citizen所有弹窗/导航 */
}
}
/* 四角拐角 - 杜绝方块 */
.magnetic-pointer-original div {
.magnetic-pointer-original div {
     position: absolute;
     position: absolute;
     width: 0.8rem;
     width: 12px;
     height: 0.8rem;
     height: 12px;
     border-color: #17f700;
     border-color: #17f700;
     background: transparent !important;
     background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.magnetic-pointer-original div:nth-child(1) {top:0;left:0;border-top:2px solid;border-left:2px solid;}
.magnetic-pointer-original div:nth-child(2) {top:0;right:0;border-top:2px solid;border-right:2px solid;}
.magnetic-pointer-original div:nth-child(3) {bottom:0;left:0;border-bottom:2px solid;border-left:2px solid;}
.magnetic-pointer-original div:nth-child(4) {bottom:0;right:0;border-bottom:2px solid;border-right:2px solid;}
/* 锁定Citizen皮肤所有按钮为磁吸目标 */
.citizen-button,
.citizen-ui-button,
.citizen-nav-item a,
.citizen-menu-item a,
#citizen-header a,
#citizen-sidebar a,
.vector-tabs a,
.mw-editsection,
a.citizen-link-button {
    position: relative !important;
}
}
.magnetic-pointer-original div:nth-child(1) {top:0;left:0;border-top:3px solid;border-left:3px solid;}
.magnetic-pointer-original div:nth-child(2) {top:0;right:0;border-top:3px solid;border-right:3px solid;}
.magnetic-pointer-original div:nth-child(3) {bottom:0;left:0;border-bottom:3px solid;border-left:3px solid;}
.magnetic-pointer-original div:nth-child(4) {bottom:0;right:0;border-bottom:3px solid;border-right:3px solid;}
             `;
             `;
             document.head.appendChild(style);
             document.head.appendChild(style);
第54行: 第75行:
             let currentX = 0, currentY = 0;
             let currentX = 0, currentY = 0;


            // 磁吸跟随逻辑
             const onMouseMove = function(e) {
             const onMouseMove = function(e) {
                 let x = e.clientX;
                 let x = e.clientX;
第61行: 第83行:
                     const centerX = rect.left + rect.width / 2;
                     const centerX = rect.left + rect.width / 2;
                     const centerY = rect.top + rect.height / 2;
                     const centerY = rect.top + rect.height / 2;
                     x = centerX + (x - centerX) * 0.1;
                     x = centerX + (x - centerX) * 0.12; // 微调吸附顺滑度
                     y = centerY + (y - centerY) * 0.1;
                     y = centerY + (y - centerY) * 0.12;
                 }
                 }
                 currentX = x;
                 currentX = x;
第72行: 第94行:
                 currentTarget = e.currentTarget;
                 currentTarget = e.currentTarget;
                 const rect = currentTarget.getBoundingClientRect();
                 const rect = currentTarget.getBoundingClientRect();
                 pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
                // 贴合Citizen按钮间距,放大留白更自然
                 pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
                const gap = window.innerWidth / 60;
                 pointer.style.setProperty('--width', rect.width + gap + 'px');
                 pointer.style.setProperty('--height', rect.height + gap + 'px');
             };
             };


第82行: 第106行:
             };
             };


             const bindTargets = function() {
            // 自动绑定:Citizen全系列按钮 + 原有自定义_target
                 document.querySelectorAll('._target').forEach(el => {
             const bindCitizenButtons = function() {
                     if (el._magneticBound) return;
                const selector = `
                    el._magneticBound = true;
                    .citizen-button:not([data-bound]),
                    .citizen-ui-button:not([data-bound]),
                    .citizen-nav-item a:not([data-bound]),
                    .citizen-menu-item a:not([data-bound]),
                    #citizen-header a:not([data-bound]),
                    #citizen-sidebar a:not([data-bound]),
                    .mw-editsection:not([data-bound]),
                    a.citizen-link-button:not([data-bound]),
                    ._target:not([data-bound])
                `;
                 document.querySelectorAll(selector).forEach(el => {
                     el.dataset.bound = "1";
                     el.addEventListener('mouseenter', onMouseEnter);
                     el.addEventListener('mouseenter', onMouseEnter);
                     el.addEventListener('mouseleave', onMouseLeave);
                     el.addEventListener('mouseleave', onMouseLeave);
第91行: 第126行:
             };
             };


            // 全局鼠标监听
             window.addEventListener('mousemove', onMouseMove);
             window.addEventListener('mousemove', onMouseMove);
             bindTargets();
 
             const observer = new MutationObserver(bindTargets);
            // 初始绑定
             observer.observe(document.body, { childList: true, subtree: true });
             bindCitizenButtons();
 
            // 监听动态加载(侧边栏折叠/展开、AJAX页面、弹窗)
             const observer = new MutationObserver(() => bindCitizenButtons());
             observer.observe(document.body, { childList: true, subtree: true, attributes: true });
         });
         });
     });
     });
})();
})();

2026年3月31日 (二) 15:56的版本

/* 这里的任何JavaScript将为所有用户在每次页面加载时加载。 */

/* USERNAME */
$( function() {
    if ( mw.user.isNamed() ) {
        $( '.insertusername' ).text( mw.user.getName() );
    } else {
        $( '.insertusername' ).text( '访客' );
    }
} );

/* INFOBOX */
$('.infobox').hide();

(function() {
    mw.loader.using('jquery', function() {
        $(function() {
            // 防重复挂载
            if (document.querySelector('.magnetic-pointer-original')) return;

            // 创建光标DOM
            const pointer = document.createElement('div');
            pointer.className = 'magnetic-pointer-original';
            pointer.innerHTML = '<div></div><div></div><div></div><div></div>';
            document.body.appendChild(pointer);

            // 终极修复CSS:纯镂空四角 + 适配Citizen层级
            const style = document.createElement('style');
            style.textContent = `
/* 光标本体 */
.magnetic-pointer-original {
    --width: 4rem;
    --height: 4rem;
    position: fixed;
    top: calc(var(--height) / -2);
    left: calc(var(--width) / -2);
    width: var(--width);
    height: var(--height);
    transition: all 0.2s ease-out;
    pointer-events: none;
    z-index: 999999 !important; /* 压过Citizen所有弹窗/导航 */
}
/* 四角拐角 - 杜绝方块 */
.magnetic-pointer-original div {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: #17f700;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.magnetic-pointer-original div:nth-child(1) {top:0;left:0;border-top:2px solid;border-left:2px solid;}
.magnetic-pointer-original div:nth-child(2) {top:0;right:0;border-top:2px solid;border-right:2px solid;}
.magnetic-pointer-original div:nth-child(3) {bottom:0;left:0;border-bottom:2px solid;border-left:2px solid;}
.magnetic-pointer-original div:nth-child(4) {bottom:0;right:0;border-bottom:2px solid;border-right:2px solid;}

/* 锁定Citizen皮肤所有按钮为磁吸目标 */
.citizen-button,
.citizen-ui-button,
.citizen-nav-item a,
.citizen-menu-item a,
#citizen-header a,
#citizen-sidebar a,
.vector-tabs a,
.mw-editsection,
a.citizen-link-button {
    position: relative !important;
}
            `;
            document.head.appendChild(style);

            let currentTarget = null;
            let currentX = 0, currentY = 0;

            // 磁吸跟随逻辑
            const onMouseMove = function(e) {
                let x = e.clientX;
                let y = e.clientY;
                if (currentTarget) {
                    const rect = currentTarget.getBoundingClientRect();
                    const centerX = rect.left + rect.width / 2;
                    const centerY = rect.top + rect.height / 2;
                    x = centerX + (x - centerX) * 0.12; // 微调吸附顺滑度
                    y = centerY + (y - centerY) * 0.12;
                }
                currentX = x;
                currentY = y;
                pointer.style.transform = `translate(${currentX}px, ${currentY}px)`;
            };

            const onMouseEnter = function(e) {
                currentTarget = e.currentTarget;
                const rect = currentTarget.getBoundingClientRect();
                // 贴合Citizen按钮间距,放大留白更自然
                const gap = window.innerWidth / 60;
                pointer.style.setProperty('--width', rect.width + gap + 'px');
                pointer.style.setProperty('--height', rect.height + gap + 'px');
            };

            const onMouseLeave = function() {
                currentTarget = null;
                pointer.style.setProperty('--width', '4rem');
                pointer.style.setProperty('--height', '4rem');
            };

            // 自动绑定:Citizen全系列按钮 + 原有自定义_target
            const bindCitizenButtons = function() {
                const selector = `
                    .citizen-button:not([data-bound]),
                    .citizen-ui-button:not([data-bound]),
                    .citizen-nav-item a:not([data-bound]),
                    .citizen-menu-item a:not([data-bound]),
                    #citizen-header a:not([data-bound]),
                    #citizen-sidebar a:not([data-bound]),
                    .mw-editsection:not([data-bound]),
                    a.citizen-link-button:not([data-bound]),
                    ._target:not([data-bound])
                `;
                document.querySelectorAll(selector).forEach(el => {
                    el.dataset.bound = "1";
                    el.addEventListener('mouseenter', onMouseEnter);
                    el.addEventListener('mouseleave', onMouseLeave);
                });
            };

            // 全局鼠标监听
            window.addEventListener('mousemove', onMouseMove);

            // 初始绑定
            bindCitizenButtons();

            // 监听动态加载(侧边栏折叠/展开、AJAX页面、弹窗)
            const observer = new MutationObserver(() => bindCitizenButtons());
            observer.observe(document.body, { childList: true, subtree: true, attributes: true });
        });
    });
})();