미디어위키:Common.js

/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
document.addEventListener("DOMContentLoaded", function() {
    const logos = document.querySelectorAll('.mw-logo-icon');
    if (logos.length > 0) {
        const htmlElement = document.documentElement;
        const isDarkMode = htmlElement.classList.contains('skin-citizen-dark');

        logos.forEach(logo => {
            if (isDarkMode) {
                // 다크 모드인 경우 _white.png로 사용
                logo.src = logo.src.replace('_black.png', '_white.png');
            } else {
                // 라이트 모드인 경우 _black.png로 사용
                logo.src = logo.src.replace('_white.png', '_black.png');
            }
        });
    }
});

mw.loader.using(['jquery.makeCollapsible'], function() {
    // 접기/펼치기 버튼 동작
    function toggleTable(table, button) {
        var isCollapsed = $(table).hasClass('mw-collapsed');
        
        if (isCollapsed) {
            // 테이블이 접힌 상태라면 펼치기 (즉시 표시)
            $(table).removeClass('mw-collapsed');
            $(table).find('tr').not(':first, .button-row').show(); // 나머지 행을 즉시 표시 (버튼 행 제외)
            $(button).text('접기'); // 버튼 텍스트 변경
        } else {
            // 테이블이 펼쳐진 상태라면 접기 (즉시 숨기기)
            $(table).addClass('mw-collapsed');
            $(table).find('tr').not(':first, .button-row').hide(); // 나머지 행을 즉시 숨기기 (버튼 행 제외)
            $(button).text('펼치기'); // 버튼 텍스트 변경
        }
    }

    $(document).ready(function() {
        // 모든 mw-collapsible 테이블에 대해 접기/펼치기 상태를 초기화
        $('.mw-collapsible').each(function() {
            var table = this;

            // 처음 로드될 때 접혀 있어야 할 테이블 초기화
            if ($(table).hasClass('mw-collapsed')) {
                $(table).find('tr').not(':first, .button-row').hide(); // 첫 번째 행과 버튼 행을 제외한 나머지 행 숨기기
            }

            // 첫 번째 <tr>과 두 번째 <tr> 사이에 커스텀 접기/펼치기 버튼 추가
            var buttonHTML = '<tr class="button-row"><td colspan="4" style="text-align:center"><button class="toggle-button">펼치기</button></td></tr>';
            $(table).find('tr:first').after(buttonHTML); // 첫 번째 <tr> 이후에 버튼 추가

            // 버튼 행이 절대 숨겨지지 않도록 강제 설정
            $(table).find('.button-row').css('display', 'table-row'); // display: table-row로 강제

            // 버튼 클릭 이벤트
            $(table).find('.toggle-button').click(function() {
                toggleTable(table, this); // 버튼과 테이블을 인자로 전달
            });
        });
    });
});

// Common.js

let suggestionCache = {};

// OpenSearch API에서 검색 제안을 가져오는 함수
function fetchSuggestions(query) {
    const processedQuery = preprocessQuery(query);
    
    if (suggestionCache[processedQuery]) {
        updateSuggestions(suggestionCache[processedQuery]); // 캐시된 제안 사용
        return;
    }

    const apiUrl = `/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(processedQuery)}&srlimit=5&format=json`;

    fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
            const suggestions = data.query.search.map(item => item.title);
            suggestionCache[processedQuery] = suggestions; // 제안 캐시
            updateSuggestions(suggestions); // 제안 업데이트
        })
        .catch(error => console.error('제안 가져오기 오류:', error));
}

// 검색 입력 필드에 이벤트 추가
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('searchInput');
    
    if (searchInput) {
        searchInput.addEventListener('input', function() {
            const query = this.value;
            if (query.length > 0) {
                fetchSuggestions(query); // 커스텀 API 호출
                clearDefaultSuggestions(); // 기본 제안 목록을 숨깁니다.
            } else {
                clearSuggestions(); // 입력이 비어 있으면 제안 지우기
            }
        });

        // 키보드 내비게이션 추가
        let currentIndex = -1;

        searchInput.addEventListener('keydown', function(e) {
            const items = document.querySelectorAll('.citizen-typeahead-list-item');

            if (e.key === 'ArrowDown') {
                currentIndex = (currentIndex + 1) % items.length; // 아래로 이동
                updateActiveItem(items);
            } else if (e.key === 'ArrowUp') {
                currentIndex = (currentIndex - 1 + items.length) % items.length; // 위로 이동
                updateActiveItem(items);
            } else if (e.key === 'Enter') {
                if (currentIndex > -1 && items[currentIndex]) {
                    window.location.href = items[currentIndex].querySelector('a').href; // 선택된 항목으로 이동
                }
            }
        });
    }
});

// 기본 제안 목록을 숨기는 함수
function clearDefaultSuggestions() {
    const defaultSuggestions = document.querySelector('.citizen-typeahead'); // Citizen의 기본 제안 목록 선택자
    if (defaultSuggestions) {
        defaultSuggestions.hidden = true; // 기본 제안 목록 숨기기
    }
}

// 제안 목록 업데이트 함수
function updateSuggestions(suggestions) {
    const suggestionsList = document.getElementById('citizen-typeahead-list-page');
    const placeholder = document.getElementById('citizen-typeahead-placeholder');
    
    suggestionsList.innerHTML = ''; // 기존 제안 비우기

    if (suggestions.length > 0) {
        // 제안이 있을 경우
        suggestions.forEach(suggestion => {
            const li = document.createElement('li');
            li.className = 'citizen-typeahead-list-item';
            li.innerHTML = `
                <a href="/wiki/${suggestion}" class="citizen-typeahead-list-item-link">
                    <div class="citizen-typeahead-list-item-text">
                        <div class="citizen-typeahead-list-item-title"><span class="citizen-typeahead__highlight">${suggestion}</span></div>
                    </div>
                </a>
            `;
            suggestionsList.appendChild(li);
        });
        
        // 메시지를 숨깁니다.
        placeholder.hidden = true; // 관련 결과가 없다는 메시지 숨기기
    } else {
        // 제안이 없을 경우 메시지 보여주기
        placeholder.hidden = false; // 관련 결과가 없다는 메시지 보이기
    }

    // 제안 목록 보이기
    document.getElementById('citizen-typeahead-group-page').hidden = false;
}

// 제안 목록 지우기
function clearSuggestions() {
    const suggestionsList = document.getElementById('citizen-typeahead-list-page');
    suggestionsList.innerHTML = ''; // 기존 제안 비우기
    document.getElementById('citizen-typeahead-group-page').hidden = true; // 제안 목록 숨기기
}

// 선택된 항목 업데이트
function updateActiveItem(items) {
    items.forEach((item, index) => {
        item.classList.toggle('active', index === currentIndex); // 현재 인덱스에 해당하는 항목에 active 클래스 추가
    });
}

// 사용자 입력을 전처리하는 함수
function preprocessQuery(query) {
    return query.trim().toLowerCase(); // 대소문자 변환 및 공백 제거
}

// 선택된 항목에 대한 스타일 추가
const style = document.createElement('style');
style.innerHTML = `
.citizen-typeahead-list-item.active {
    background-color: #f0f0f0; /* 선택된 항목의 배경색 */
}
`;
document.head.appendChild(style);