미디어위키:Common.js

mw.hook('wikipage.content').add(function($content) {
    // ----------------------------------------
    // 주석 팝업 기능
    // ----------------------------------------
    const refs = $content.find('sup.reference'); // 모든 주석 <sup> 태그 선택

    refs.each(function() {
        const $ref = $(this);
        const refId = $ref.find('a').attr('href'); // 주석 링크의 href 속성(ID)

        if (refId) {
            const refContent = $(refId).html(); // 주석 내용 가져오기

            // 팝업용 컨테이너 생성
            const $tooltip = $('<div>')
                .addClass('ref-tooltip')
                .html(refContent)
                .css({
                    display: 'none',
                    position: 'absolute',
                    border: '1px solid #ccc',
                    background: '#fff',
                    padding: '10px',
                    'z-index': 1000,
                    'box-shadow': '0 4px 8px rgba(0,0,0,0.1)',
                    'max-width': '300px',
                    'overflow-wrap': 'break-word',
                });

            // 팝업 DOM에 추가
            $('body').append($tooltip);

            // 마우스 이벤트 처리
            $ref.on('mouseenter', function(event) {
                $tooltip.css({
                    top: event.pageY + 10,
                    left: event.pageX + 10,
                }).fadeIn(200);
            });

            $ref.on('mousemove', function(event) {
                $tooltip.css({
                    top: event.pageY + 10,
                    left: event.pageX + 10,
                });
            });

            $ref.on('mouseleave', function() {
                $tooltip.fadeOut(200);
            });
        }
    });

    // ----------------------------------------
    // 링크 팝업 기능
    // ----------------------------------------
    const links = $content.find('a[href^="/wiki/"]'); // 내부 링크만 선택

    // 팝업 컨테이너 생성
    const $popup = $('<div>')
        .addClass('link-preview-popup')
        .css({
            display: 'none',
            position: 'absolute',
            border: '1px solid #ccc',
            background: '#fff',
            padding: '10px',
            'z-index': 1000,
            'box-shadow': '0 4px 8px rgba(0,0,0,0.1)',
            'max-width': '300px',
            'overflow-wrap': 'break-word',
        });

    // 팝업 DOM에 추가
    $('body').append($popup);

    links.each(function() {
        const $link = $(this);

        $link.on('mouseenter', function(event) {
            const pageTitle = decodeURIComponent($link.attr('href').replace(/^\/wiki\//, ''));

            // MediaWiki API를 통해 페이지 내용 가져오기
            $.ajax({
                url: mw.util.wikiScript('api'),
                data: {
                    action: 'query',
                    prop: 'extracts',
                    titles: pageTitle,
                    format: 'json',
                    exintro: true, // 첫 번째 문단만 가져오기
                    explaintext: true, // HTML 태그 제거
                },
                dataType: 'json',
                success: function(data) {
                    const pages = data.query.pages;
                    const page = Object.values(pages)[0];

                    if (page && page.extract) {
                        $popup.html(page.extract);
                        $popup.css({
                            top: event.pageY + 10,
                            left: event.pageX + 10,
                        }).fadeIn(200);
                    } else {
                        $popup.html('내용을 가져올 수 없습니다.');
                    }
                },
                error: function() {
                    $popup.html('오류가 발생했습니다.');
                },
            });
        });

        $link.on('mousemove', function(event) {
            $popup.css({
                top: event.pageY + 10,
                left: event.pageX + 10,
            });
        });

        $link.on('mouseleave', function() {
            $popup.fadeOut(200);
        });
    });
});