미디어위키:Common.js

(function ($) {
    'use strict';

    var DURATION = 300;

    function getToggleName(toggle) {
        var prefix = 'mw-customtoggle-';
        var classes = toggle.classList;
        var i;

        for (i = 0; i < classes.length; i++) {
            if (classes[i].indexOf(prefix) === 0) {
                return classes[i].substring(prefix.length);
            }
        }

        return null;
    }


    function findTarget(name) {
        var id = 'mw-customcollapsible-' + name;
        var targets = document.querySelectorAll(
            '[id="' + id + '"]'
        );

        if (!targets.length) {
            return null;
        }

        /*
         * 실제 mw-collapsible-content를 가진 요소 우선
         */
        var i;

        for (i = 0; i < targets.length; i++) {
            if (
                getDirectContent(targets[i])
            ) {
                return targets[i];
            }
        }

        return targets[0];
    }


    function getDirectContent(target) {
        var children = target.children;
        var i;

        for (i = 0; i < children.length; i++) {
            if (
                children[i].classList.contains(
                    'mw-collapsible-content'
                )
            ) {
                return children[i];
            }
        }

        return null;
    }


    function toggle(toggle) {
        var name = getToggleName(toggle);

        if (!name) {
            return;
        }

        var target = findTarget(name);

        if (!target) {
            return;
        }

        var content = getDirectContent(target);

        if (!content) {
            return;
        }

        var $content = $(content);

        /*
         * 중복 애니메이션 방지
         */
        $content.stop(true, true);

        var collapsed =
            target.classList.contains('mw-collapsed') ||
            $content.css('display') === 'none';


        if (collapsed) {

            /*
             * 펼치기
             */
            target.classList.remove('mw-collapsed');

            $content
                .hide()
                .slideDown(DURATION);

            toggle.setAttribute(
                'aria-expanded',
                'true'
            );

        } else {

            /*
             * 접기
             */
            $content.slideUp(
                DURATION,
                function () {
                    target.classList.add(
                        'mw-collapsed'
                    );
                }
            );

            toggle.setAttribute(
                'aria-expanded',
                'false'
            );
        }
    }


    document.addEventListener(
        'click',
        function (event) {
            var toggleElement =
                event.target.closest(
                    '.mw-customtoggle'
                );

            if (!toggleElement) {
                return;
            }

            if (!getToggleName(toggleElement)) {
                return;
            }

            /*
             * MediaWiki 기본 클릭 동작 차단
             */
            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            toggle(toggleElement);
        },
        true
    );


    document.addEventListener(
        'keydown',
        function (event) {
            if (
                event.key !== 'Enter' &&
                event.key !== ' '
            ) {
                return;
            }

            var toggleElement =
                event.target.closest(
                    '.mw-customtoggle'
                );

            if (!toggleElement) {
                return;
            }

            if (!getToggleName(toggleElement)) {
                return;
            }

            event.preventDefault();
            event.stopPropagation();
            event.stopImmediatePropagation();

            toggle(toggleElement);
        },
        true
    );

}(jQuery));