다른 명령
태그: 편집 취소 |
편집 요약 없음 |
||
(같은 사용자의 중간 판 7개는 보이지 않습니다) | |||
1번째 줄: | 1번째 줄: | ||
// 다크 & 화이트 모드에 따른 Favicon 및 로고 변동 | // 다크 & 화이트 모드에 따른 Favicon 및 로고 변동 | ||
document.addEventListener("DOMContentLoaded", function () { | document.addEventListener("DOMContentLoaded", function () { | ||
224번째 줄: | 223번째 줄: | ||
`; | `; | ||
document.head.appendChild(style); | document.head.appendChild(style); | ||
2024년 12월 20일 (금) 04:54 기준 최신판
// 다크 & 화이트 모드에 따른 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);