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

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
 
(같은 사용자의 중간 판 107개는 보이지 않습니다)
1번째 줄: 1번째 줄:
/* ReferenceTooltip 스크립트 로드 */
$(document).ready(function() {
mw.loader.load('//en.wikipedia.org/w/index.php?title=MediaWiki:Gadget-referenceTooltips.js&action=raw&ctype=text/javascript');
    // .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').slideToggle();
    });


document.addEventListener("DOMContentLoaded", function() {
     // 페이지 로드 시 기본 상태 설정
     // 접기/펼치기 기능을 추가하는 함수
     $('.custom-toggle').each(function() {
     function toggleFold(button) {
         var $this = $(this);
         var content = button.nextElementSibling; // 다음 형제 요소를 찾음
         var isCollapsed = $this.data('collapsed') === true;
         if (content.style.display === 'none' || content.style.display === '') {
 
             content.style.display = 'block';
        if (isCollapsed) {
            button.innerHTML = '[ 접기 ]'; // 접기 상태 텍스트
             $this.next('.custom-content').hide();
         } else {
         } else {
             content.style.display = 'none';
             $this.next('.custom-content').show();
            button.innerHTML = '[ 펼치기 ]'; // 펼치기 상태 텍스트
         }
         }
     }
     });


     // 모든 'fold-toggle' 버튼에 클릭 이벤트 리스너 추가
     // 접기 상태를 확인하고 초기화하는 코드
    var toggleButtons = document.querySelectorAll('.fold-toggle');
    $('.custom-toggle').each(function() {
    toggleButtons.forEach(function(button) {
        var $this = $(this);
        button.addEventListener('click', function() {
        var collapsedState = $this.data('collapsed');
            toggleFold(button);
 
         });
        // '유형'에 맞는 접기 상태 설정
        if (collapsedState !== undefined) {
            if (collapsedState === true) {
                $this.next('.custom-content').hide();
            } else {
                $this.next('.custom-content').show();
            }
         }
     });
     });


     // 모든 'foldable-header' 클릭 시 동작
     // .toggle-collapse 클릭 이벤트 핸들러
     var foldableHeaders = document.querySelectorAll('.foldable-header');
     $('.toggle-collapse').click(function() {
    foldableHeaders.forEach(function(header) {
         var $this = $(this);
         header.addEventListener('click', function() {
        var rowsToToggle = parseInt($this.data('rows')) || 1;
            var content = this.nextElementSibling;
        var isCollapsed = $this.data('collapsed') === true;
            if (content.style.display === 'none' || content.style.display === '') {
 
                content.style.display = 'block';
        // 사용자 정의 텍스트 설정
                this.innerHTML = '[ 접기 ] ' + this.innerHTML.replace('[ 펼치기 ]', ''); // 접기 상태 텍스트
        var expandText = $this.data('expand-text') || '펼치기';
            } else {
        var collapseText = $this.data('collapse-text') || expandText;
                content.style.display = 'none';
 
                this.innerHTML = '[ 펼치기 ] ' + this.innerHTML.replace('[ 접기 ]', ''); // 펼치기 상태 텍스트
        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
             }
             }
         });
         }
 
        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
     });
     });
});
    // 접기/펼치기 기능 추가 - fold-toggle
    function toggleFold(button) {
        var table = button.closest('table'); // 버튼이 포함된 표
        var rows = table.querySelectorAll('.foldable-row'); // 'foldable-row' 클래스를 가진 모든 행
        var isVisible = rows[0].style.display !== 'none'; // 첫 번째 행이 보이는지 여부로 접기/펼치기 상태 확인


        // 모든 행의 display 속성을 토글
    // .toggle-collapse 클릭 이벤트 핸들러
        rows.forEach(function(row) {
    $('.toggle-collapse').click(function() {
            row.style.display = isVisible ? 'none' : '';
        var $this = $(this);
         });
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;
 
        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
         var collapseText = $this.data('collapse-text') || expandText;
 
        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
            }
        }


         // 버튼 텍스트 변경
         // 상태 토글
         button.textContent = isVisible ? '[ 펼치기 ]' : '[ 접기 ]';
         $this.data('collapsed', !isCollapsed);
     }
        $this.text($this.data('collapsed') ? expandText : collapseText);
     });


     // 모든 'fold-toggle' 버튼에 클릭 이벤트 리스너 추가
     // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
     var toggleButtons = document.querySelectorAll('.fold-toggle');
     $('nolinkstyle').each(function() {
    toggleButtons.forEach(function(button) {
         var $this = $(this);
         button.addEventListener('click', function() {
        var content = $this.html();
            toggleFold(button);
         $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
         });
     });
     });
});
});

2024년 11월 29일 (금) 23:47 기준 최신판

$(document).ready(function() {
    // .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').slideToggle();
    });

    // 페이지 로드 시 기본 상태 설정
    $('.custom-toggle').each(function() {
        var $this = $(this);
        var isCollapsed = $this.data('collapsed') === true;

        if (isCollapsed) {
            $this.next('.custom-content').hide();
        } else {
            $this.next('.custom-content').show();
        }
    });

    // 접기 상태를 확인하고 초기화하는 코드
    $('.custom-toggle').each(function() {
        var $this = $(this);
        var collapsedState = $this.data('collapsed');

        // '유형'에 맞는 접기 상태 설정
        if (collapsedState !== undefined) {
            if (collapsedState === true) {
                $this.next('.custom-content').hide();
            } else {
                $this.next('.custom-content').show();
            }
        }
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
            }
        }

        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
    });

    // .toggle-collapse 클릭 이벤트 핸들러
    $('.toggle-collapse').click(function() {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        // 사용자 정의 텍스트 설정
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;

        // 지정된 행 수만큼 다음 행을 즉시 표시/숨김
        var $row = $this.closest('tr');
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                $row.toggle(); // 슬라이드 없이 즉시 토글
            }
        }

        // 상태 토글
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
    });

    // <nolinkstyle> 태그를 .nolinkstyle 클래스로 변환
    $('nolinkstyle').each(function() {
        var $this = $(this);
        var content = $this.html();
        $this.replaceWith('<span class="nolinkstyle">' + content + '</span>');
    });
});