MediaWiki:BloodTest.js

/* Для тестирования разной фигни. 
* Подгружается через 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'> ";
    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].trim());
        button.setAttribute("class", (!i) ? "gmvbutton active" : "gmvbutton");
        button.innerHTML = "<b>" + getButtonBody(buttons[i].trim()) + "</b>";
        buttonsContainer.appendChild(button);
    }

    //Скрываем всю разделяемую на режимы информацию, кроме той, что соответствует текущей выделенной кнопке (первой в списке)        
    showSelectedInfo(buttonsContainer.querySelector(".gmvbutton.active").id);

    //Обработчик щелчков левой кнопкой мыши
    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");
        showSelectedInfo(button.id);
    }

    //Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке
    function showSelectedInfo(id) {
        var collection = document.querySelectorAll(".gamemode"); 
        [].forEach.call(collection, hide);

        switch (id) {
            case "pve":
                collection = document.querySelectorAll(".gamemode.pve");
                break;
            case "pvp":
                collection = document.querySelectorAll(".gamemode.pvp");
                break;
            case "wvw":
                collection = document.querySelectorAll(".gamemode.wvw");
                break;
            case "pve wvw": case "wvw pve":
                collection = document.querySelectorAll(".gamemode.pve, .gamemode.wvw");
                break;
            case "pve pvp": case "pvp pve":
                collection = document.querySelectorAll(".gamemode.pve, .gamemode.pvp");
                break;
            case "wvw pvp": case "pvp wvw":
                collection = document.querySelectorAll(".gamemode.wvw, .gamemode.pvp");
                break;
        }

        [].forEach.call(collection, show);
    }
   
    //Создание тела кнопки
    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": case "wvw pve":
                return pveIcon + text.replace(" ", " / ").toUpperCase() + " " + wvwIcon;
            case "pve pvp": case "pvp pve":
                return pveIcon + text.replace(" ", " / ").toUpperCase() + " " + pvpIcon;
            case "wvw pvp": case "pvp wvw":
                return wvwIcon + text.replace(" ", " / ").toUpperCase() + " " + pvpIcon;
        }
    }

    //Показ элемента
    function show(elem) {
        elem.setAttribute("style", elem.getAttribute("data-style"));
    }

    //Скрытие элемента
    function hide(elem) {
        if (!elem.hasAttribute("data-style")) elem.setAttribute("data-style", elem.getAttribute("style"));
        elem.style.display = "none";
    }
})();