미디어위키:Common.css: 두 판 사이의 차이

WONGO
둘러보기로 이동 검색으로 이동
편집 요약 없음
태그: 되돌려진 기여
잔글편집 요약 없음
 
(같은 사용자의 중간 판 14개는 보이지 않습니다)
1번째 줄: 1번째 줄:
mw.hook('wikipage.content').add(function ($content) {
.ref-tooltip {
     // ----------------------------------------
     font-size: 12px;
     // 주석 팝업 처리
     max-width: 300px;
     // ----------------------------------------
     word-wrap: break-word;
     const refs = $content.find('sup.reference'); // 주석 <sup> 태그 선택
    border-radius: 4px;
     background-color: #f9f9f9;
}


     refs.each(function () {
/* 고정된 목차 스타일 */
        const $ref = $(this);
#toc {
        const refId = $ref.find('a').attr('href'); // 주석의 href 속성 가져오기
    position: fixed;
    top: 80px; /* 상단에서의 거리 */
     right: 20px; /* 오른쪽에서의 거리 */
    width: 250px; /* 목차 너비 */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 다른 요소 위에 표시 */
    overflow: hidden; /* 목차 전체에 스크롤 제거 */
}


        if (refId) {
/* 목차 내부 리스트 스크롤 */
            const refContent = $(refId).html(); // 주석 내용 가져오기
#toc > ul, #toc > ol {
    max-height: 75vh; /* 화면 높이의 75%까지만 사용 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
    margin: 0;
    padding: 0;
    list-style: none; /* 리스트 스타일 제거 */
    padding-right: 10px; /* 스크롤바 공간 확보 */
}


            // 팝업 컨테이너 생성
/* 목차 링크 스타일 */
            const $tooltip = $('<div>')
#toc a {
                .addClass('ref-tooltip')
    text-decoration: none;
                .html(refContent)
    color: #0073aa;
                .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에 추가
#toc a:hover {
            $('body').append($tooltip);
    text-decoration: underline;
}


            // 마우스 이벤트 처리
/* 페이지 내용과 목차 간 여백 설정 */
            $ref.on('mouseenter', function (event) {
#content {
                $tooltip.css({
     margin-right: 280px; /* 목차 너비 + 여백 */
                    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'); // 모든 링크 선택
 
    // 팝업 컨테이너 생성
     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);
 
        // 내부 링크만 처리
        if (
            $link.attr('href') &&
            ($link.attr('href').startsWith(mw.config.get('wgScriptPath') + '/index.php/') ||
                $link.attr('href').startsWith(mw.config.get('wgScriptPath') + '/wiki/'))
        ) {
            $link.on('mouseenter', function (event) {
                // 페이지 제목 추출
                const pageTitle = decodeURIComponent(
                    $link.attr('href')
                        .replace(mw.config.get('wgScriptPath') + '/index.php/', '')
                        .replace(mw.config.get('wgScriptPath') + '/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);
            });
        }
    });
});

2025년 2월 3일 (월) 19:01 기준 최신판

.ref-tooltip {
    font-size: 12px;
    max-width: 300px;
    word-wrap: break-word;
    border-radius: 4px;
    background-color: #f9f9f9;
}

/* 고정된 목차 스타일 */
#toc {
    position: fixed;
    top: 80px; /* 상단에서의 거리 */
    right: 20px; /* 오른쪽에서의 거리 */
    width: 250px; /* 목차 너비 */
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000; /* 다른 요소 위에 표시 */
    overflow: hidden; /* 목차 전체에 스크롤 제거 */
}

/* 목차 내부 리스트 스크롤 */
#toc > ul, #toc > ol {
    max-height: 75vh; /* 화면 높이의 75%까지만 사용 */
    overflow-y: auto; /* 세로 스크롤 활성화 */
    margin: 0;
    padding: 0;
    list-style: none; /* 리스트 스타일 제거 */
    padding-right: 10px; /* 스크롤바 공간 확보 */
}

/* 목차 링크 스타일 */
#toc a {
    text-decoration: none;
    color: #0073aa;
}

#toc a:hover {
    text-decoration: underline;
}

/* 페이지 내용과 목차 간 여백 설정 */
#content {
    margin-right: 280px; /* 목차 너비 + 여백 */
}
원본 주소 "https://wongo.myds.me/mediawiki/index.php?title=미디어위키:Common.css&oldid=617"