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

편집 요약 없음
편집 요약 없음
24번째 줄: 24번째 줄:
                     $currentRow.stop(true, true).css({
                     $currentRow.stop(true, true).css({
                         overflow: 'hidden',
                         overflow: 'hidden',
                         display: 'table-row',
                         display: 'table-row'
                        width: $currentRow.width(),
                        height: $currentRow.height()
                     }).animate({
                     }).animate({
                         height: 0,
                         height: 0,
34번째 줄: 32번째 줄:
                         step: function(now, fx) {
                         step: function(now, fx) {
                             if (fx.prop === "height") {
                             if (fx.prop === "height") {
                                 $currentRow.css("width", $currentRow.width() * (now / fx.start));
                                 $currentRow.css("height", now);
                             }
                             }
                         },
                         },
41번째 줄: 39번째 줄:
                                 display: 'none',
                                 display: 'none',
                                 height: '',
                                 height: '',
                                width: '',
                                 opacity: 1
                                 opacity: 1
                             });
                             });
50번째 줄: 47번째 줄:
                         display: 'table-row',
                         display: 'table-row',
                         height: 0,
                         height: 0,
                         opacity: 0
                         opacity: 0,
                        overflow: 'hidden'
                     }).animate({
                     }).animate({
                         height: $currentRow.prop('scrollHeight'),
                         height: $currentRow.prop('scrollHeight'),
58번째 줄: 56번째 줄:
                         step: function(now, fx) {
                         step: function(now, fx) {
                             if (fx.prop === "height") {
                             if (fx.prop === "height") {
                                 $currentRow.css("width", now);
                                 $currentRow.css("height", now);
                             }
                             }
                        },
                        complete: function() {
                            $currentRow.css({
                                height: '',
                                overflow: ''
                            });
                         }
                         }
                     }); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가
                     }); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가

2024년 11월 29일 (금) 11:45 판

$(document).ready(function() {
    // 기존의 .custom-toggle 클릭 이벤트 핸들러
    $('.custom-toggle').click(function() {
        $(this).next('.custom-content').stop(true, true).slideToggle(300); // 300ms 애니메이션 추가
    });

    // .toggle-collapse 클릭 이벤트 핸들러 수정
    $('.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') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게

        // 지정된 행 수만큼 다음 행을 슬라이드 애니메이션으로 표시/숨김
        $row.nextAll().each(function(index) {
            if (index < rowsToToggle) {
                var $currentRow = $(this);

                if (isCollapsed) {
                    $currentRow.stop(true, true).css({
                        overflow: 'hidden',
                        display: 'table-row'
                    }).animate({
                        height: 0,
                        opacity: 0
                    }, {
                        duration: 600,
                        step: function(now, fx) {
                            if (fx.prop === "height") {
                                $currentRow.css("height", now);
                            }
                        },
                        complete: function() {
                            $currentRow.css({
                                display: 'none',
                                height: '',
                                opacity: 1
                            });
                        }
                    }); // 접기 애니메이션 - 표의 크기 부드럽게 감소
                } else {
                    $currentRow.stop(true, true).css({
                        display: 'table-row',
                        height: 0,
                        opacity: 0,
                        overflow: 'hidden'
                    }).animate({
                        height: $currentRow.prop('scrollHeight'),
                        opacity: 1
                    }, {
                        duration: 600,
                        step: function(now, fx) {
                            if (fx.prop === "height") {
                                $currentRow.css("height", now);
                            }
                        },
                        complete: function() {
                            $currentRow.css({
                                height: '',
                                overflow: ''
                            });
                        }
                    }); // 펼치기 애니메이션 - 표의 크기 부드럽게 증가
                }
            }
        });

        // 상태 토글
        $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;

        // 사용자 정의 텍스트 확인
        var expandText = $this.data('expand-text') || '펼치기';
        var collapseText = $this.data('collapse-text') || expandText; // 접기 텍스트가 없을 경우 펼치기 텍스트와 동일하게

        if (isCollapsed) {
            var $row = $this.closest('tr');
            $row.nextAll().each(function(index) {
                if (index < rowsToToggle) {
                    $(this).hide(); // 페이지 로드 시 슬라이드 애니메이션 없이 즉시 숨김
                }
            });
            $this.text(expandText);
        } else {
            $this.text(collapseText);
        }
    });

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