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

(function() {
    mw.loader.using('jquery', function() {
        $(function() {
            if (document.querySelector('.magnetic-pointer-original')) return;

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

            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: 99999;
}
/* 白天模式：绿色 */
.magnetic-pointer-original div {
    position: absolute;
    width: 0.8rem;
    height: 0.8rem;
    border-color: #17f700;
    background: transparent !important;
    border-top:3px solid transparent;
    border-left:3px solid transparent;
}
/* 黑夜模式：白色 */
html[data-color-scheme="dark"] .magnetic-pointer-original div {
    border-color: #ffffff !important;
}

.magnetic-pointer-original div:nth-child(1) {top:0;left:0;border-top-color:inherit;border-left-color:inherit;}
.magnetic-pointer-original div:nth-child(2) {top:0;right:0;border-top-color:inherit;border-right-color:inherit;}
.magnetic-pointer-original div:nth-child(3) {bottom:0;left:0;border-bottom-color:inherit;border-left-color:inherit;}
.magnetic-pointer-original div:nth-child(4) {bottom:0;right:0;border-bottom-color:inherit;border-right-color:inherit;}
            `;
            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.1;
                    y = centerY + (y - centerY) * 0.1;
                }
                currentX = x;
                currentY = y;
                pointer.style.transform = `translate(${currentX}px, ${currentY}px)`;
            };

            const onMouseEnter = function(e) {
                currentTarget = e.currentTarget;
                const rect = currentTarget.getBoundingClientRect();
                pointer.style.setProperty('--width', rect.width + window.innerWidth / 50 + 'px');
                pointer.style.setProperty('--height', rect.height + window.innerWidth / 50 + 'px');
            };

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

            // 自动绑定：你自定义的 + Citizen + 评论插件
            const bindTargets = function() {
                document.querySelectorAll(`
                    ._target,
                    .citizen-button,
                    .citizen-nav a,
                    .citizen-menu a,
                    .citizen-sidebar a,
                    .cdx-button,
                    .mw-ui-button,
                    button,
                    [class*="commentstreams"] button,
                    .commentstreams-box button,
                    .commentstreams-submit
                `).forEach(el => {
                    if (el._magneticBound) return;
                    el._magneticBound = true;
                    el.addEventListener('mouseenter', onMouseEnter);
                    el.addEventListener('mouseleave', onMouseLeave);
                });
            };

            window.addEventListener('mousemove', onMouseMove);
            bindTargets();
            const observer = new MutationObserver(bindTargets);
            observer.observe(document.body, { childList: true, subtree: true });
        });
    });
})();