미디어위키:NationsPanel.js

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

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

    var tabs = shell.querySelectorAll('.clbi-nations-v2-tab[data-continent]');
    var panels = shell.querySelectorAll('.clbi-nations-v2-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', '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 bindShell(shell) {
    if (!shell || shell.getAttribute('data-clbi-nations-v2-bound') === '1') return;

    shell.setAttribute('data-clbi-nations-v2-bound', '1');

    shell.addEventListener('click', function (event) {
        var tab = event.target.closest ? event.target.closest('.clbi-nations-v2-tab[data-continent]') : null;
        if (!tab || !shell.contains(tab)) return;
        activate(shell, tab.getAttribute('data-continent'));
    });

    shell.addEventListener('keydown', function (event) {
        var tab = event.target.closest ? event.target.closest('.clbi-nations-v2-tab[data-continent]') : null;
        if (!tab || !shell.contains(tab)) return;
        if (event.key !== 'Enter' && event.key !== ' ') return;
        event.preventDefault();
        activate(shell, tab.getAttribute('data-continent'));
    });

    var active = shell.querySelector('.clbi-nations-v2-tab.is-active[data-continent]') || shell.querySelector('.clbi-nations-v2-tab[data-continent]');
    if (active) activate(shell, active.getAttribute('data-continent'));
}

function init(root) {
    root = root && root.jquery ? root[0] : (root || document);
    var shells = root.querySelectorAll ? root.querySelectorAll('.clbi-nations-v2-shell[data-clbi-nations-v2]') : [];
    Array.prototype.forEach.call(shells, bindShell);
}

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

$(init);

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