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

편집 요약 없음
태그: 되돌려진 기여
편집 요약 없음
태그: 되돌려진 기여
1번째 줄: 1번째 줄:
$(document).ready(function() {
$(document).ready(function() {
    // .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function () {
        var $content = $(this).next('.custom-content');
        $content.slideToggle(300); // 슬라이드 애니메이션 추가
    });
    // .toggle-collapse 클릭 이벤트 핸들러
     $('.toggle-collapse').click(function () {
     $('.toggle-collapse').click(function () {
         var $this = $(this);
         var $this = $(this);
15번째 줄: 8번째 줄:
         // 사용자 정의 텍스트 확인
         // 사용자 정의 텍스트 확인
         var expandText = $this.data('expand-text') || '펼치기';
         var expandText = $this.data('expand-text') || '펼치기';
         var collapseText = $this.data('collapse-text') || expandText;
         var collapseText = $this.data('collapse-text') || '접기';


        // 접기/펼치기 애니메이션 처리
         for (var i = 0; i < rowsToToggle; i++) {
         for (var i = 0; i < rowsToToggle; i++) {
             $row = $row.next();
             $row = $row.next();
             if ($row.length) {
             if ($row.length) {
                 $row.stop().slideToggle(300); // 슬라이드 애니메이션 추가
                 var $content = $row.find('td'); // 행의 셀을 기준으로 높이 계산
                if (!isCollapsed) {
                    // 펼치기: 현재 높이를 계산 후 애니메이션 적용
                    $row.addClass('collapsible-row expanded');
                    var currentHeight = $content.outerHeight();
                    $row.css('max-height', currentHeight + 'px');
                } else {
                    // 접기: 애니메이션 후 높이를 0으로 설정
                    $row.removeClass('expanded');
                    setTimeout(function () {
                        $row.css('max-height', '0');
                    }, 10); // 트랜지션이 시작되도록 약간의 딜레이 추가
                }
             }
             }
         }
         }


         // 상태 토글
         // 상태 토글 및 버튼 텍스트 변경
         $this.data('collapsed', !isCollapsed);
         $this.data('collapsed', !isCollapsed);
         $this.text($this.data('collapsed') ? expandText : collapseText);
         $this.text($this.data('collapsed') ? expandText : collapseText);
     });
     });


     // 페이지 로드 시 기본 상태 설정
     // 초기 상태 설정
     $('.toggle-collapse').each(function () {
     $('.toggle-collapse').each(function () {
         var $this = $(this);
         var $this = $(this);
         var rowsToToggle = parseInt($this.data('rows')) || 1;
         var rowsToToggle = parseInt($this.data('rows')) || 1;
         var isCollapsed = $this.data('collapsed') === true;
         var isCollapsed = $this.data('collapsed') === true;
        // 사용자 정의 텍스트 확인
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText;


         if (isCollapsed) {
         if (isCollapsed) {
44번째 줄: 46번째 줄:
                 $row = $row.next();
                 $row = $row.next();
                 if ($row.length) {
                 if ($row.length) {
                     $row.hide(); // 초기 상태에서 숨김
                     $row.addClass('collapsible-row').css('max-height', '0');
                 }
                 }
             }
             }
            $this.text(expandText);
        } else {
            $this.text(collapseText);
         }
         }
     });
     });

2024년 11월 29일 (금) 14:28 판

$(document).ready(function() {
    $('.toggle-collapse').click(function () {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;
        var $row = $this.closest('tr');

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

        // 접기/펼치기 애니메이션 처리
        for (var i = 0; i < rowsToToggle; i++) {
            $row = $row.next();
            if ($row.length) {
                var $content = $row.find('td'); // 행의 셀을 기준으로 높이 계산
                if (!isCollapsed) {
                    // 펼치기: 현재 높이를 계산 후 애니메이션 적용
                    $row.addClass('collapsible-row expanded');
                    var currentHeight = $content.outerHeight();
                    $row.css('max-height', currentHeight + 'px');
                } else {
                    // 접기: 애니메이션 후 높이를 0으로 설정
                    $row.removeClass('expanded');
                    setTimeout(function () {
                        $row.css('max-height', '0');
                    }, 10); // 트랜지션이 시작되도록 약간의 딜레이 추가
                }
            }
        }

        // 상태 토글 및 버튼 텍스트 변경
        $this.data('collapsed', !isCollapsed);
        $this.text($this.data('collapsed') ? expandText : collapseText);
    });

    // 초기 상태 설정
    $('.toggle-collapse').each(function () {
        var $this = $(this);
        var rowsToToggle = parseInt($this.data('rows')) || 1;
        var isCollapsed = $this.data('collapsed') === true;

        if (isCollapsed) {
            var $row = $this.closest('tr');
            for (var i = 0; i < rowsToToggle; i++) {
                $row = $row.next();
                if ($row.length) {
                    $row.addClass('collapsible-row').css('max-height', '0');
                }
            }
        }
    });

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