미디어위키:Common.js

/* MediaWiki:Common.js */
mw.hook('wikipage.content').add(function ($content) {

    var initialized = {};

    $content.find('[class*="mw-customtoggle-"]').each(function () {
        var classList = (this.className || '').split(/\s+/);

        classList.forEach(function (cls) {
            if (cls.indexOf('mw-customtoggle-') !== 0) {
                return;
            }

            var suffix = cls.substring('mw-customtoggle-'.length);

            if (initialized[suffix]) {
                return;
            }

            initialized[suffix] = true;

            var targetId = 'mw-customcollapsible-' + suffix;

            /*
             * 같은 id가 중복되어 있으므로 #id selector 사용하지 않음
             */
            var $sameIds = $content.find('[id="' + targetId + '"]');

            /*
             * wikitable을 가지고 있는 요소가 실제 펼쳐지는 패널
             */
            var $panel = $sameIds.filter(function () {
                return $(this).find('table.wikitable').length > 0;
            }).first();

            if (!$panel.length) {
                return;
            }

            /*
             * 위쪽 버튼 wrapper
             */
            var $topWrapper = $sameIds.not($panel).filter(function () {
                return $(this).find('.' + cls).length > 0;
            }).first();

            var $topToggle = $topWrapper.find('.' + cls).first();
            var $panelToggle = $panel.find('.' + cls).first();

            if (!$topToggle.length || !$panelToggle.length) {
                return;
            }


            /*
             * 초기 상태
             */
            $panel
                .addClass('mw-collapsed')
                .css({
                    display: 'none',
                    overflow: ''
                });


            /*
             * =========================
             * 위쪽 버튼 → 펼치기
             * =========================
             */
            $topToggle
                .off('click.smoothSlide')
                .on('click.smoothSlide', function (e) {

                    e.preventDefault();
                    e.stopImmediatePropagation();

                    if ($panel.is(':animated') || $panel.is(':visible')) {
                        return false;
                    }

                    /*
                     * 위쪽 버튼은 바로 제거.
                     * 그러면 다음 버튼(여성 등)이 아래쪽으로 밀림.
                     */
                    $topWrapper.hide();


                    /*
                     * 중요:
                     * MediaWiki의 collapsed 상태를 먼저 제거
                     */
                    $panel.removeClass('mw-collapsed');


                    /*
                     * display:none 상태에서 slideDown 실행
                     */
                    $panel
                        .stop(true, false)
                        .hide()
                        .slideDown(250, function () {

                            /*
                             * jQuery 애니메이션 잔여 스타일 제거
                             */
                            $(this).css({
                                display: '',
                                height: '',
                                overflow: '',
                                paddingTop: '',
                                paddingBottom: '',
                                marginTop: '',
                                marginBottom: ''
                            });
                        });

                    $topToggle.attr('aria-expanded', 'true');
                    $panelToggle.attr('aria-expanded', 'true');

                    return false;
                });


            /*
             * =========================
             * 펼쳐진 버튼 → 접기
             * =========================
             */
            $panelToggle
                .off('click.smoothSlide')
                .on('click.smoothSlide', function (e) {

                    e.preventDefault();
                    e.stopImmediatePropagation();

                    if ($panel.is(':animated')) {
                        return false;
                    }


                    /*
                     * 접힐 때는 mw-collapsed를 아직 붙이면 안 됨.
                     *
                     * 먼저 slideUp을 끝낸 뒤 붙여야
                     * 애니메이션이 정상적으로 보임.
                     */
                    $panel
                        .stop(true, false)
                        .slideUp(250, function () {

                            /*
                             * 애니메이션 완료 후 collapsed 상태 복원
                             */
                            $(this)
                                .addClass('mw-collapsed')
                                .css({
                                    display: 'none',
                                    height: '',
                                    overflow: '',
                                    paddingTop: '',
                                    paddingBottom: '',
                                    marginTop: '',
                                    marginBottom: ''
                                });


                            /*
                             * 원래 위쪽 버튼 다시 표시
                             */
                            $topWrapper.show();
                        });

                    $topToggle.attr('aria-expanded', 'false');
                    $panelToggle.attr('aria-expanded', 'false');

                    return false;
                });

        });
    });

});