MediaWiki:BloodTest.js — различия между версиями

Версия 00:04, 21 мая 2018

/* Для тестирования разной фигни. 
* Подгружается через MediaWiki:Common.js
*/

(function() {
    var buttonsContainer = document.getElementById("gmvbuttons"),
        buttons, button, pveIcon, pvpIcon, wvwIcon, regexp, splitter, i;

    if (!buttonsContainer) return;

    pveIcon = "<img alt='Game mode version' " + 
        "src='https://wiki.guildwars2.com/images/thumb/c/cc/Hero_panel_Menu_Bar_icon.png/16px-Hero_panel_Menu_Bar_icon.png' width='16' height='16' " + 
        "srcset='https://wiki.guildwars2.com/images/thumb/c/cc/Hero_panel_Menu_Bar_icon.png/24px-Hero_panel_Menu_Bar_icon.png 1.5x, " +
        "https://wiki.guildwars2.com/images/c/cc/Hero_panel_Menu_Bar_icon.png 2x'> ";
    pvpIcon = "<img alt='Game mode version' " + 
        "src='https://wiki.guildwars2.com/images/thumb/2/23/PvP_Menu_Bar_icon.png/16px-PvP_Menu_Bar_icon.png' width='16' height='16' " + 
        "srcset='https://wiki.guildwars2.com/images/thumb/2/23/PvP_Menu_Bar_icon.png/24px-PvP_Menu_Bar_icon.png 1.5x, " +
        "https://wiki.guildwars2.com/images/2/23/PvP_Menu_Bar_icon.png 2x'> ";
    wvwIcon = "<img alt='Game mode version' " + 
        "src='https://wiki.guildwars2.com/images/thumb/1/1b/WvW_Menu_Bar_icon.png/16px-WvW_Menu_Bar_icon.png' width='16' height='16' " + 
        "srcset='https://wiki.guildwars2.com/images/thumb/1/1b/WvW_Menu_Bar_icon.png/24px-WvW_Menu_Bar_icon.png 1.5x, " +
        "https://wiki.guildwars2.com/images/1/1b/WvW_Menu_Bar_icon.png 2x'> ";
    regexp = /\s+/i;
    splitter = " / ";
    buttonsContainer.onclick = mouseClickHandler;
    buttons = buttonsContainer.getAttribute("data-gmvbuttons").split(",");

    for (i = 0; i < buttons.length; i++) {
        button = document.createElement("button");
        button.setAttribute("id", buttons[i]);
        button.setAttribute("class", (!i) ? "gmvbutton active" : "gmvbutton");
        button.innerHTML = "<b>" + getButtonBody(buttons[i]) + "</b>";
        buttonsContainer.appendChild(button);
    }


    document.querySelectorAll(".gamemode.wvw:not(.pve)").forEach(hide);
    document.querySelectorAll(".gamemode.pvp:not(.pve)").forEach(hide);

    function mouseClickHandler(event) {
        var target = event.target,
            button = target.closest(".gmvbutton");

        //Если щелчок не по кнопке или по уже выбранной кнопке, ничего не делаем
        if (!button || button.className.indexOf("active")) return;

        //Сбрасываем выделение прошлой кнопки, выделяем текущую кнопку и скрываем всю разделяемую на режимы информацию
        buttonsContainer.querySelector(".active").setAttribute("class", "gmvbutton");
        button.setAttribute("class", "gmvbutton active");
        document.querySelectorAll(".gamemode").forEach(hide);

        //Показываем информацию для режима, соответствующего текущей выделенной кнопке
        switch (button.id) {
            case "pve":
                document.querySelectorAll(".gamemode.pve").forEach(show);
                break;
            case "pvp":
                document.querySelectorAll(".gamemode.pvp").forEach(show);
                break;
            case "wvw":
                document.querySelectorAll(".gamemode.wvw").forEach(show);
                break;
            case "pve wvw":
                document.querySelectorAll(".gamemode.pve.wvw").forEach(show);
                break;
            case "pve pvp":
                document.querySelectorAll(".gamemode.pve.pvp").forEach(show);
                break;
            case "wvw pvp":
                document.querySelectorAll(".gamemode.wvw.pvp").forEach(show);
                break;
        }
    }
   
    function getButtonBody(text) {
        switch (text) {
            case "pve":
                return pveIcon + text.toUpperCase();
            case "pvp":
                return pvpIcon + text.toUpperCase();
            case "wvw":
                return wvwIcon + text.toUpperCase();
            case "pve wvw":
                return pveIcon + text.replace(regexp, splitter).toUpperCase() + " " + wvwIcon;
            case "pve pvp":
                return pveIcon + text.replace(regexp, splitter).toUpperCase() + " " + pvpIcon;
            case "wvw pvp":
                return wvwIcon + text.replace(regexp, splitter).toUpperCase() + " " + pvpIcon;
        }
    }

    function show(elem) {
        elem.style.display = "";
    }

    function hide(elem) {
        elem.style.display = "none";
    }
})();