미디어위키:NationsPanel.js

/* =========================================
   COASTLINE: BLACK ICE - Nations Tab Panel
   하단 국가 패널 대륙 탭 전환 전용
   ========================================= */
(function () {
    'use strict';

    function initPanel(panel) {
        if (!panel || panel.getAttribute('data-nations-tabpanel-ready') === '1') return;
        panel.setAttribute('data-nations-tabpanel-ready', '1');

        var tabs = Array.prototype.slice.call(panel.querySelectorAll('.clbi-nations-tabpanel-tab[data-continent]'));
        var bodies = Array.prototype.slice.call(panel.querySelectorAll('.clbi-nations-tabpanel-continent[data-continent-panel]'));

        function activate(continent) {
            tabs.forEach(function (tab) {
                var active = tab.getAttribute('data-continent') === continent;
                tab.classList.toggle('is-active', active);
                tab.setAttribute('aria-selected', active ? 'true' : 'false');
            });

            bodies.forEach(function (body) {
                var active = body.getAttribute('data-continent-panel') === continent;
                body.classList.toggle('is-active', active);
                if (active) {
                    body.removeAttribute('hidden');
                    body.setAttribute('aria-hidden', 'false');
                } else {
                    body.setAttribute('hidden', 'hidden');
                    body.setAttribute('aria-hidden', 'true');
                }
            });
        }

        tabs.forEach(function (tab) {
            tab.setAttribute('role', 'tab');
            tab.setAttribute('tabindex', '0');
            tab.addEventListener('click', function () {
                activate(tab.getAttribute('data-continent'));
            });
            tab.addEventListener('keydown', function (event) {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    activate(tab.getAttribute('data-continent'));
                }
            });
        });

        var initial = panel.querySelector('.clbi-nations-tabpanel-tab.is-active[data-continent]') || tabs[0];
        if (initial) activate(initial.getAttribute('data-continent'));
    }

    function init(root) {
        var scope = root && root.querySelectorAll ? root : document;
        Array.prototype.forEach.call(scope.querySelectorAll('.clbi-nations-tabpanel'), initPanel);
    }

    window.CLBI_NATIONS_PANEL = {
        init: init
    };

    if (window.mw && mw.hook) {
        mw.hook('wikipage.content').add(function ($content) {
            init($content && $content[0] ? $content[0] : document);
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', function () { init(document); });
    } else {
        init(document);
    }
})();