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

Текущая версия на 01:36, 10 апреля 2022

/** GameModeVersion.js
 * Отображение информации для умений/черт, разделенной между игровыми режимами. Скрипт опирается на Шаблон:Game_mode_version.
 * Автор Blood :)
 */

(function() {
    var buttonContainers = document.querySelectorAll(".gmvbuttons"),                //Контейнеры для кнопок
        pveIcon, pvpIcon, wvwIcon, hash, i;

    //Если контейнеров для кнопок на странице нет, то ничего не делаем
    if (!buttonContainers.length) 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'> ";
    hash = location.hash.substring(1).replace(".2C", " ").replace("%20", " ").toLowerCase();

    //Проводим первоначальную инициализацию и показ нужной информации
    for (i = 0; i < buttonContainers.length; i++) {
        initContainer(buttonContainers[i]);
        showSelectedInfo(buttonContainers[i], hash, true);
    }

    //Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке
    // также, при первоначальном вызове, выделение кнопки и добавление анимации
    function showSelectedInfo(buttonsContainer, id, initCall) {
        var gmvScope = buttonsContainer._gmvScope,
            collection = gmvScope.querySelectorAll(".gamemode"),
            buttons, button, i;

        if (initCall) {
            buttons = buttonsContainer.querySelectorAll(".gmvbutton");
            button = buttons[0];
            id = id.split(" ")[0];

            for (i = 0; i < buttons.length; i++) {
                if (~buttons[i].getAttribute("data-id").indexOf(id)) {
                    button = buttons[i];
                    break;
                }
            }

            id = button.getAttribute("data-id");
            button.setAttribute("class", "gmvbutton active");
            [].forEach.call(collection, addAnimation);
        }

        [].forEach.call(collection, hide);

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

        [].forEach.call(collection, show);
    }

    //Обработчик щелчков левой кнопкой мыши
    function mouseClickHandler(event) {
        var button = event.target.closest(".gmvbutton");

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

        //Сбрасываем выделение прошлой кнопки, выделяем текущую кнопку и показываем только нужную информацию
        button.parentElement.querySelector(".active").setAttribute("class", "gmvbutton");
        button.setAttribute("class", "gmvbutton active");
        showSelectedInfo(button.parentElement, button.getAttribute("data-id"));
    }

    //Инициализация контейнера для кнопок
    function initContainer(buttonsContainer) {
        var gmvScope, buttons, button, i;

        //Определяем область видимости для переключателя режимов
        if (buttonsContainer.hasAttribute("data-scope"))
             gmvScope = buttonsContainer.closest("[id*='" + buttonsContainer.getAttribute("data-scope") + "']");
        if (!gmvScope) gmvScope = document;
        
        buttonsContainer._gmvScope = gmvScope;
        buttonsContainer.onclick = mouseClickHandler;
        buttons = buttonsContainer.getAttribute("data-gmvbuttons").split(",");

        //Создаем кнопки и вставляем их в контейнер
        for (i = 0; i < buttons.length; i++) {
            button = document.createElement("button");
            button.setAttribute("data-id", buttons[i].trim());
            button.setAttribute("class", "gmvbutton");
            button.innerHTML = "<b>" + createButtonBody(buttons[i].trim()) + "</b>";
            buttonsContainer.appendChild(button);

            //Пространство между кнопками
            if (i + 1 != buttons.length) buttonsContainer.innerHTML += "&nbsp;";
        }
    }

    //Создание тела кнопки
    function createButtonBody(text) {
        switch (text) {
            case "pve":
                return pveIcon + text.toUpperCase().replace("V", "v");
            case "pvp":
                return pvpIcon + text.toUpperCase().replace("V", "v");
            case "wvw":
                return wvwIcon + text.toUpperCase().replace("V", "v");
            case "wvw pve":
                text = "pve wvw";
            case "pve wvw":
                return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + wvwIcon;
            case "pvp pve":
                text = "pve pvp";
            case "pve pvp":
                return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon;
            case "pvp wvw":
                text = "wvw pvp";
            case "wvw pvp":
                return wvwIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon;
        }
    }

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

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

    //Добавление анимации
    function addAnimation(elem) {
        elem.setAttribute("class", elem.className + " gamemode-animation"); 
    }
})();