미디어위키:NationsPanel.js

(function (mw, $) {
    'use strict';

    function activate(shell, key) {
        if (!shell || !key) return;

        var tabs = shell.querySelectorAll('.clbi-nations-state-tab[data-continent]');
        var panels = shell.querySelectorAll('.clbi-nations-state-continent[data-continent-panel]');
        var matched = false;

        Array.prototype.forEach.call(tabs, function (tab) {
            var active = tab.getAttribute('data-continent') === key;
            tab.classList.toggle('is-active', active);
            tab.setAttribute('aria-selected', active ? 'true' : 'false');
            tab.setAttribute('tabindex', active ? '0' : '0');
            if (active) matched = true;
        });

        if (!matched && tabs.length) {
            key = tabs[0].getAttribute('data-continent');
            tabs[0].classList.add('is-active');
            tabs[0].setAttribute('aria-selected', 'true');
        }

        Array.prototype.forEach.call(panels, function (panel) {
            var active = panel.getAttribute('data-continent-panel') === key;
            panel.classList.toggle('is-active', active);
            if (active) {
                panel.removeAttribute('hidden');
            } else {
                panel.setAttribute('hidden', 'hidden');
            }
        });
    }

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

        var tabs = shell.querySelectorAll('.clbi-nations-state-tab[data-continent]');
        var initial = shell.querySelector('.clbi-nations-state-tab.is-active[data-continent]') || tabs[0];

        Array.prototype.forEach.call(tabs, function (tab) {
            tab.addEventListener('click', function (event) {
                event.preventDefault();
                activate(shell, tab.getAttribute('data-continent'));
            });

            tab.addEventListener('keydown', function (event) {
                if (event.key === 'Enter' || event.key === ' ') {
                    event.preventDefault();
                    activate(shell, tab.getAttribute('data-continent'));
                }
            });
        });

        if (initial) {
            activate(shell, initial.getAttribute('data-continent'));
        }
    }

    function init(root) {
        root = root && root.jquery ? root[0] : (root || document);
        var shells = root.querySelectorAll
            ? root.querySelectorAll('.clbi-nations-state-shell')
            : [];

        Array.prototype.forEach.call(shells, initOne);
    }

    window.CLBI_NATIONS_PANEL = {
        init: init,
        activate: activate
    };

    $(function () {
        init(document);
    });

    if (mw && mw.hook) {
        mw.hook('wikipage.content').add(function ($content) {
            init($content);
        });
    }
})(mediaWiki, jQuery);