미디어위키:Common.js

/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
// 다크 & 화이트 모드에 따른 Favicon 및 로고 변동
document.addEventListener("DOMContentLoaded", function () {
    const htmlElement = document.documentElement;
    const logos = document.querySelectorAll('.mw-logo-icon');
    const favicon = document.querySelector('link[rel="icon"]') || (() => {
        const newFavicon = document.createElement('link');
        newFavicon.rel = 'icon';
        document.head.appendChild(newFavicon);
        return newFavicon;
    })();

    // 다크 모드 여부를 확인하여 로고와 favicon 업데이트
    const updateAppearance = (isDarkMode) => {
        // 로고 업데이트
        logos.forEach(logo => {
            const targetSuffix = isDarkMode ? '_white.png' : '_black.png';
            const oppositeSuffix = isDarkMode ? '_black.png' : '_white.png';
            if (logo.src.includes(oppositeSuffix)) {
                logo.src = logo.src.replace(oppositeSuffix, targetSuffix);
            }
        });

        // Favicon 업데이트
        favicon.href = isDarkMode
            ? 'https://mongsil.dev/w/resources/assets/ER_white.png'
            : 'https://mongsil.dev/w/resources/assets/ER_black.png';
    };

    // 초기 상태 설정
    const isDarkMode = htmlElement.classList.contains('skin-citizen-dark');
    updateAppearance(isDarkMode);

    // 모드 변경 감지
    const observer = new MutationObserver(() => {
        const updatedIsDarkMode = htmlElement.classList.contains('skin-citizen-dark');
        updateAppearance(updatedIsDarkMode);
    });

    // HTML 요소 클래스 변경 감시
    observer.observe(htmlElement, {
        attributes: true,
        attributeFilter: ['class']
    });
});

//내셔널리그 틀 접기 펼치기 버튼 스타일 변경
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); // 버튼과 테이블을 인자로 전달
            });
        });
    });
});

// 대문 검색버튼 누르면 검색창 출력
$(document).ready(function() {
    // 검색창 표시 토글 기능
    $('#citizen-search-trigger').click(function() {
        var searchDetails = $('#citizen-search-details');

        // 검색창이 열려있는지 여부 확인
        if (searchDetails.attr('open')) {
            searchDetails.removeAttr('open');  // 닫기
        } else {
            searchDetails.attr('open', true);  // 열기
        }
    });
});


//검색창 개선
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);
            } 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 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);


$(document).ready(function() {
    // 새로운 메뉴의 설정 (제목 및 링크 커스터마이징)
    var newMenuTitle = "ER Masters";  // 새로운 메뉴의 제목
    var newMenuLinks = [  // 새로운 메뉴의 링크 목록
        { id: "n-new-masters", href: "/wiki/Eternal_Return_Masters", title: "ER Masters", text: "ER Masters" },
        { id: "n-new-s5", href: "/wiki/Eternal_Return_Masters_Season_5", title: "Masters Season 5", text: "Season 5" },
        { id: "n-new-s5p1", href: "/wiki/Eternal_Return_Masters_Season_5_Phase_1", title: "S5 Phase 1", text: "S5 Phase 1" },
        { id: "n-new-s5p2", href: "/wiki/Eternal_Return_Masters_Season_5_Phase_2", title: "S5 Phase 2", text: "S5 Phase 2" },
        { id: "n-new-s5p3", href: "/wiki/Eternal_Return_Masters_Season_5_Phase_3", title: "S5 Phase 3", text: "S5 Phase 3" }
    ];

    // 1. 기존 네비게이션 메뉴 복제
    var originalNav = $('#p-navigation').clone();
    
    // 2. 복제된 네비게이션 메뉴의 ID를 변경 (같은 ID가 있으면 안 되므로)
    originalNav.attr('id', 'p-new-navigation');
    
    // 3. 복제된 메뉴의 제목 변경
    originalNav.find('.citizen-menu__heading').text(newMenuTitle);

    // 4. 복제된 메뉴의 기존 링크 목록 비우기
    originalNav.find('.citizen-menu__content-list').empty();

    // 5. 새로운 링크 항목을 추가
    newMenuLinks.forEach(function(link) {
        var newListItem = `
            <li id="${link.id}" class="mw-list-item">
                <a href="${link.href}" title="${link.title}">
                    <span>${link.text}</span>
                </a>
            </li>
        `;
        originalNav.find('.citizen-menu__content-list').append(newListItem);
    });

    // 6. 복제된 메뉴를 기존 메뉴 아래에 추가
    $('#citizen-main-menu').append(originalNav);
});


document.addEventListener("DOMContentLoaded", function () {
    const headers = document.querySelectorAll('.collapsible-header');

    headers.forEach(header => {
        header.addEventListener('click', function () {
            const content = this.nextElementSibling;
            const indicator = this.querySelector('.collapsible-indicator');

            if (content.style.display === 'none') {
                content.style.display = 'block';
                indicator.textContent = '[-]';
            } else {
                content.style.display = 'none';
                indicator.textContent = '[+]';
            }
        });
    });
});