미디어위키: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가 2개 존재하므로 #id를 쓰지 않고
             * attribute 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;
            }

            /*
             * 중요:
             * 패널을 다른 곳으로 append하지 않는다.
             *
             * DOM 원래 순서
             *
             * 남성 버튼
             * 남성 패널
             * 여성 버튼
             * 여성 패널
             *
             * 를 그대로 유지해야 다음 버튼이 아래로 밀린다.
             */

            $panel.hide();

            /*
             * MediaWiki 기본 토글 이벤트 제거
             */
            $topToggle.off('click');
            $panelToggle.off('click');


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

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

                /*
                 * 이번에는 visibility:hidden이 아니라
                 * display:none을 사용한다.
                 *
                 * 그래야 남성 버튼이 차지하던 공간까지 없어지고
                 * 그 뒤의 여성 버튼이 남성 내용 아래로 이동한다.
                 */
                $topWrapper.hide();

                /*
                 * 패널은 원래 DOM 위치에서 그대로 펼침.
                 */
                $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.stopImmediatePropagation();

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

                        /*
                         * 패널이 다 접힌 뒤
                         * 원래 상단 버튼을 다시 표시.
                         */
                        $topWrapper.show();

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

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

                return false;
            });

        });
    });

});