미디어위키:Common.js

WONGO
고대진 (토론 | 기여)님의 2025년 1월 17일 (금) 20:52 판
둘러보기로 이동 검색으로 이동

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

  • 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
  • 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
  • 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
  • 오페라: Ctrl-F5를 입력.
// 주석을 팝업창으로 보는 소스-고대진 추가가
mw.hook('wikipage.content').add(function($content) {
    // 모든 주석 <sup> 태그 선택
    const refs = $content.find('sup.reference');

    refs.each(function() {
        const $ref = $(this);
        const refId = $ref.find('a').attr('href'); // <a> 태그의 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)',
                });

            // 팝업을 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);
            });
        }
    });
});

//링크 연결페이지 팝업하기
mw.hook('wikipage.content').add(function($content) {
    // 모든 내부 링크 선택
    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);
        });
    });
});