미디어위키:Common.js

/* MediaWiki:Common.js */
mw.hook('wikipage.content').add(function ($content) {
    $content.find('[class*="mw-customtoggle-"]').each(function () {
        var $toggle = $(this);
        var classList = ($toggle.attr('class') || '').split(/\s+/);

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

            var suffix = cls.replace('mw-customtoggle-', '');
            var targetId = 'mw-customcollapsible-' + suffix;

            /*
             * #id를 사용하지 않는 이유:
             * 현재 문서에 같은 id가 2개 존재하므로
             * 실제 접히는 영역을 정확히 찾아야 함.
             */
            var $targets = $content.find('[id="' + targetId + '"]');

            // 실제 내용이 들어 있는 collapsible 영역 선택
            var $target = $targets.filter(function () {
                return $(this).find('table').length > 0 ||
                       $(this).hasClass('mw-collapsed') ||
                       $(this).css('display') === 'none';
            }).first();

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

            $toggle
                .off('click.smoothSlide')
                .on('click.smoothSlide', function (e) {
                    /*
                     * MediaWiki 기본 mw-collapsible 핸들러와
                     * slideToggle이 동시에 실행되는 것을 방지
                     */
                    e.preventDefault();
                    e.stopImmediatePropagation();

                    var $contentTarget = $target.children('.mw-collapsible-content');
                    var $animTarget = $contentTarget.length
                        ? $contentTarget
                        : $target;

                    var isOpening = !$animTarget.is(':visible');

                    $animTarget
                        .stop(true, true)
                        .slideToggle(200, function () {
                            if ($(this).is(':visible')) {
                                /*
                                 * slideToggle이 남기는 height, padding 등의
                                 * 임시 스타일 정리.
                                 *
                                 * display는 현재 구조에서는 지우지 않는 편이 안전함.
                                 */
                                $(this).css({
                                    height: '',
                                    overflow: '',
                                    paddingTop: '',
                                    paddingBottom: '',
                                    marginTop: '',
                                    marginBottom: ''
                                });
                            }
                        });

                    // 접근성 상태도 같이 갱신
                    $('[class~="' + cls + '"]').attr(
                        'aria-expanded',
                        isOpening ? 'true' : 'false'
                    );
                });
        });
    });
});