"미디어위키:Common.js"의 두 판 사이의 차이
| (같은 사용자의 중간 판 하나는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */ | /* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */ | ||
| − | + | mw.hook('wikipage.content').add(function ($content) { | |
| − | var input = document.getElementById( | + | // 보기 화면에서만 동작 |
| − | if (!input) return; | + | if (mw.config.get('wgAction') !== 'view') { |
| + | return; | ||
| + | } | ||
| + | |||
| + | var input = document.getElementById('myInput'); | ||
| + | if (!input) { | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | var tbody = document.querySelector('.divTable .tbody'); | ||
| + | if (!tbody) { | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | var rows = tbody.getElementsByClassName('row'); | ||
| + | if (!rows.length) { | ||
| + | return; | ||
| + | } | ||
| + | |||
| + | // 1) 행 텍스트를 미리 대문자로 캐시 | ||
| + | var rowData = []; | ||
| + | for (var i = 0; i < rows.length; i++) { | ||
| + | var rowText = rows[i].textContent || rows[i].innerText || ''; | ||
| + | rowData.push({ | ||
| + | row: rows[i], | ||
| + | textUpper: rowText.toUpperCase() | ||
| + | }); | ||
| + | } | ||
| + | // 2) 실제 필터 함수 | ||
function filterEpisodes() { | function filterEpisodes() { | ||
| − | var | + | var text = input.textContent || input.innerText || ''; |
| − | var | + | var filter = text.trim().toUpperCase(); |
| − | if (! | + | |
| + | // 검색어가 없으면 전부 보이기 | ||
| + | if (!filter) { | ||
| + | for (var i = 0; i < rowData.length; i++) { | ||
| + | rowData[i].row.style.display = ''; | ||
| + | } | ||
| + | return; | ||
| + | } | ||
| − | + | for (var j = 0; j < rowData.length; j++) { | |
| − | for (var | + | if (rowData[j].textUpper.indexOf(filter) > -1) { |
| − | + | rowData[j].row.style.display = ''; | |
| − | |||
| − | |||
} else { | } else { | ||
| − | + | rowData[j].row.style.display = 'none'; | |
} | } | ||
} | } | ||
} | } | ||
| − | + | // 3) 디바운스 헬퍼 (delay ms 동안 입력 멈췄을 때만 실행) | |
| − | input.addEventListener( | + | function debounce(fn, delay) { |
| + | var timer = null; | ||
| + | return function () { | ||
| + | var context = this; | ||
| + | var args = arguments; | ||
| + | if (timer) { | ||
| + | clearTimeout(timer); | ||
| + | } | ||
| + | timer = setTimeout(function () { | ||
| + | fn.apply(context, args); | ||
| + | }, delay); | ||
| + | }; | ||
| + | } | ||
| + | |||
| + | var debouncedFilter = debounce(filterEpisodes, 200); // 0.2초 | ||
| + | |||
| + | // contenteditable div에서 input 이벤트만 사용해도 충분 | ||
| + | input.addEventListener('input', debouncedFilter); | ||
}); | }); | ||
2025년 11월 26일 (수) 17:23 기준 최신판
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
mw.hook('wikipage.content').add(function ($content) {
// 보기 화면에서만 동작
if (mw.config.get('wgAction') !== 'view') {
return;
}
var input = document.getElementById('myInput');
if (!input) {
return;
}
var tbody = document.querySelector('.divTable .tbody');
if (!tbody) {
return;
}
var rows = tbody.getElementsByClassName('row');
if (!rows.length) {
return;
}
// 1) 행 텍스트를 미리 대문자로 캐시
var rowData = [];
for (var i = 0; i < rows.length; i++) {
var rowText = rows[i].textContent || rows[i].innerText || '';
rowData.push({
row: rows[i],
textUpper: rowText.toUpperCase()
});
}
// 2) 실제 필터 함수
function filterEpisodes() {
var text = input.textContent || input.innerText || '';
var filter = text.trim().toUpperCase();
// 검색어가 없으면 전부 보이기
if (!filter) {
for (var i = 0; i < rowData.length; i++) {
rowData[i].row.style.display = '';
}
return;
}
for (var j = 0; j < rowData.length; j++) {
if (rowData[j].textUpper.indexOf(filter) > -1) {
rowData[j].row.style.display = '';
} else {
rowData[j].row.style.display = 'none';
}
}
}
// 3) 디바운스 헬퍼 (delay ms 동안 입력 멈췄을 때만 실행)
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this;
var args = arguments;
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
var debouncedFilter = debounce(filterEpisodes, 200); // 0.2초
// contenteditable div에서 input 이벤트만 사용해도 충분
input.addEventListener('input', debouncedFilter);
});