"미디어위키:Common.js"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
(새 문서: 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다.: function episodeFilter() { var input, filter, tbody, rows, i, txtValue; input =...)
 
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
 
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
 
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
function episodeFilter() {
+
mw.hook('wikipage.content').add(function ($content) {
     var input, filter, tbody, rows, i, txtValue;
+
     // 보기 화면에서만 동작
     input  = document.getElementById("myInput");
+
     if (mw.config.get('wgAction') !== 'view') {
    if (!input) return;
+
        return;
 +
    }
  
     filter = input.value.toUpperCase();
+
     var input = document.getElementById('myInput');
    tbody  = document.querySelector(".divTable .tbody");
+
     if (!input) {
     if (!tbody) return;
+
        return;
 +
    }
  
     rows = tbody.getElementsByClassName("row");
+
     var tbody = document.querySelector('.divTable .tbody');
 +
    if (!tbody) {
 +
        return;
 +
    }
  
     for (i = 0; i < rows.length; i++) {
+
    var rows = tbody.getElementsByClassName('row');
         txtValue = rows[i].textContent || rows[i].innerText;
+
    if (!rows.length) {
         if (txtValue.toUpperCase().indexOf(filter) > -1) {
+
        return;
            rows[i].style.display = "";
+
    }
        } else {
+
 
            rows[i].style.display = "none";
+
    // 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';
 +
            }
 
         }
 
         }
 
     }
 
     }
}
 
  
document.addEventListener("DOMContentLoaded", function () {
+
    // 3) 디바운스 헬퍼 (delay ms 동안 입력 멈췄을 때만 실행)
    var input = document.getElementById("myInput");
+
    function debounce(fn, delay) {
     if (!input) return;
+
        var timer = null;
     input.addEventListener("keyup", episodeFilter);
+
        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);
});