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

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
 
1번째 줄: 1번째 줄:
 
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
 
/* 이 자바스크립트 설정은 모든 문서, 모든 사용자에게 적용됩니다. */
 
mw.hook('wikipage.content').add(function ($content) {
 
mw.hook('wikipage.content').add(function ($content) {
     // 보기(view) 화면에서만 동작하게 (편집창 등에서는 스킵)
+
     // 보기 화면에서만 동작
 
     if (mw.config.get('wgAction') !== 'view') {
 
     if (mw.config.get('wgAction') !== 'view') {
 
         return;
 
         return;
 
     }
 
     }
  
    // content 안에서 myInput 요소 찾기
 
 
     var input = document.getElementById('myInput');
 
     var input = document.getElementById('myInput');
 
     if (!input) {
 
     if (!input) {
12번째 줄: 11번째 줄:
 
     }
 
     }
  
    // divTable / tbody / row 찾기
 
 
     var tbody = document.querySelector('.divTable .tbody');
 
     var tbody = document.querySelector('.divTable .tbody');
 
     if (!tbody) {
 
     if (!tbody) {
23번째 줄: 21번째 줄:
 
     }
 
     }
  
     // 실제 필터 함수
+
     // 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() {
        // contenteditable div에서 텍스트 읽기
 
 
         var text = input.textContent || input.innerText || '';
 
         var text = input.textContent || input.innerText || '';
 
         var filter = text.trim().toUpperCase();
 
         var filter = text.trim().toUpperCase();
  
         // 400행이라도 이 정도 루프는 부담 없음
+
         // 검색어가 없으면 전부 보이기
         for (var i = 0; i < rows.length; i++) {
+
         if (!filter) {
            var rowText = rows[i].textContent || rows[i].innerText || '';
+
            for (var i = 0; i < rowData.length; i++) {
             if (!filter || rowText.toUpperCase().indexOf(filter) > -1) {
+
                rowData[i].row.style.display = '';
                 rows[i].style.display = '';   // 보이기
+
            }
 +
            return;
 +
        }
 +
 
 +
        for (var j = 0; j < rowData.length; j++) {
 +
             if (rowData[j].textUpper.indexOf(filter) > -1) {
 +
                 rowData[j].row.style.display = '';
 
             } else {
 
             } else {
                 rows[i].style.display = 'none'; // 숨기기
+
                 rowData[j].row.style.display = 'none';
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
  
     // 타이핑할 때마다 필터 적용
+
     // 3) 디바운스 헬퍼 (delay ms 동안 입력 멈췄을 때만 실행)
     input.addEventListener('input', filterEpisodes);
+
     function debounce(fn, delay) {
     input.addEventListener('keyup', filterEpisodes);
+
        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);
});