|
|
| 1번째 줄: |
1번째 줄: |
| /* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
| |
| // 다크 & 화이트 모드에 따른 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'와 'national' 클래스를 가진 테이블만 처리
| |
| $('.mw-collapsible.national').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);
| |
| });
| |
