查看“︁MediaWiki:Common.js”︁的源代码

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

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

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

// 将下面的代码整体复制到下一步要创建的 .js 页面中
(function(mw, $) {
    // 确保页面加载完成后再执行
    mw.hook('wikipage.content').add(function() {
        // 1. 创建光标的HTML结构
        if (document.querySelector('.magnetic-pointer')) return;
        const pointerDiv = document.createElement('div');
        pointerDiv.className = 'magnetic-pointer';
        pointerDiv.innerHTML = '<div></div><div></div><div></div><div></div>';
        document.body.appendChild(pointerDiv);
        
        // 2. 注入光标专属的CSS样式
        const style = `
            .magnetic-pointer {
                --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: 9999;
            }
            .magnetic-pointer div {
                position: absolute;
                width: 1rem;
                height: 1rem;
                border-width: 0.3rem;
                border-color: #17f700;
            }
            .magnetic-pointer div:nth-child(1) { top: 0; left: 0; border-top-style: solid; border-left-style: solid; }
            .magnetic-pointer div:nth-child(2) { top: 0; right: 0; border-top-style: solid; border-right-style: solid; }
            .magnetic-pointer div:nth-child(3) { bottom: 0; left: 0; border-bottom-style: solid; border-left-style: solid; }
            .magnetic-pointer div:nth-child(4) { bottom: 0; right: 0; border-bottom-style: solid; border-right-style: solid; }
            .mw-target-hover { cursor: pointer; } /* 为可吸附元素增加光标提示 */
        `;
        if (!document.getElementById('magnetic-pointer-styles')) {
            const styleSheet = document.createElement('style');
            styleSheet.id = 'magnetic-pointer-styles';
            styleSheet.textContent = style;
            document.head.appendChild(styleSheet);
        }
        
        // 3. 光标逻辑
        const pointer = document.querySelector('.magnetic-pointer');
        let currentTarget = null;
        
        const move = (e) => {
            let x = e.clientX, 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.1;
                y = centerY + (y - centerY) * 0.1;
            }
            if (pointer) pointer.style.transform = `translate(${x}px, ${y}px)`;
        };
        
        const bindTargets = () => {
            document.querySelectorAll('.mw-target-hover').forEach(el => {
                el.removeEventListener('mouseenter', onMouseEnter);
                el.removeEventListener('mouseleave', onMouseLeave);
                el.addEventListener('mouseenter', onMouseEnter);
                el.addEventListener('mouseleave', onMouseLeave);
            });
        };
        
        const onMouseEnter = (e) => {
            currentTarget = e.currentTarget;
            const rect = currentTarget.getBoundingClientRect();
            if (pointer) {
                pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
                pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
            }
        };
        
        const onMouseLeave = () => {
            currentTarget = null;
            if (pointer) {
                pointer.style.setProperty('--width', '4rem');
                pointer.style.setProperty('--height', '4rem');
            }
        };
        
        window.addEventListener('mousemove', move);
        // 监听页面内容变化，重新绑定目标元素
        const observer = new MutationObserver(bindTargets);
        observer.observe(document.body, { childList: true, subtree: true });
        bindTargets();
    });
})(window.mediaWiki, window.jQuery);