미디어위키:Common.js

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

    /*
     * mw-customtoggle-* 하나마다 초기화
     */
    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;

            /*
             * 현재 HTML에는 같은 id가 2개 있으므로
             * #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.
             *
             * 실제 패널이 아닌 동일 ID 요소를 찾는다.
             */
            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;
            }

            /*
             * 남성/여성 패널과 하단 "전직 아나운서" 표가
             * 들어 있는 공통 영역
             */
            var $area = $panel.parent();

            /*
             * 펼쳐진 패널들을 쌓아놓을 공간 생성
             */
            var $stack = $area.children('.smooth-collapsible-stack');

            if (!$stack.length) {
                $stack = $('<div class="smooth-collapsible-stack"></div>');

                /*
                 * 맨 아래의 "전직 아나운서" 표 바로 위에 배치
                 */
                var $footer = $area.children('table').last();

                if ($footer.length) {
                    $stack.insertBefore($footer);
                } else {
                    $stack.appendTo($area);
                }
            }

            /*
             * 최초 상태에서는 패널을 stack 안으로 이동.
             * 접힌 상태는 유지.
             */
            $panel
                .appendTo($stack)
                .hide();

            /*
             * MediaWiki 기본 클릭 핸들러가 slideToggle과
             * 충돌하지 않도록 이 토글들의 기존 click 이벤트 제거.
             */
            $topToggle.off('click');
            $panelToggle.off('click');


            /*
             * ─────────────────────────────
             * 위쪽 버튼 클릭 → 펼치기
             * ─────────────────────────────
             */
            $topToggle.on('click.smoothSlide', function (e) {
                e.preventDefault();
                e.stopPropagation();

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

                /*
                 * 위쪽 버튼은 자리 자체는 유지하면서
                 * 화면에서만 사라지게 한다.
                 *
                 * display:none을 사용하면 여성 버튼 등이
                 * 왼쪽으로 이동하기 때문에 visibility 사용.
                 */
                $topWrapper.css('visibility', 'hidden');

                /*
                 * 클릭한 순서대로 맨 아래에 쌓는다.
                 */
                $panel.appendTo($stack);

                $panel
                    .stop(true, true)
                    .slideDown(200, function () {
                        $(this).css({
                            height: '',
                            overflow: '',
                            paddingTop: '',
                            paddingBottom: '',
                            marginTop: '',
                            marginBottom: ''
                        });
                    });

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

                return false;
            });


            /*
             * ─────────────────────────────
             * 아래쪽 버튼 클릭 → 접기
             * ─────────────────────────────
             */
            $panelToggle.on('click.smoothSlide', function (e) {
                e.preventDefault();
                e.stopPropagation();

                $panel
                    .stop(true, true)
                    .slideUp(200, function () {

                        /*
                         * 위쪽의 원래 버튼 복귀
                         */
                        $topWrapper.css('visibility', 'visible');

                        $(this).css({
                            height: '',
                            overflow: '',
                            paddingTop: '',
                            paddingBottom: '',
                            marginTop: '',
                            marginBottom: ''
                        });
                    });

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

                return false;
            });
        });
    });
});