|
|
| (не показано 14 промежуточных версий этого же участника) |
| Строка 2: |
Строка 2: |
| | * Подгружается через MediaWiki:Common.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]);
| |
| − | button.setAttribute("class", (!i) ? "gmvbutton active" : "gmvbutton");
| |
| − | button.innerHTML = "<b>" + getButtonBody(buttons[i]) + "</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":
| |
| − | collection = document.querySelectorAll(".gamemode.pve, .gamemode.wvw");
| |
| − | break;
| |
| − | case "pve pvp":
| |
| − | collection = document.querySelectorAll(".gamemode.pve, .gamemode.pvp");
| |
| − | break;
| |
| − | case "wvw pvp":
| |
| − | 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":
| |
| − | return pveIcon + text.replace(" ", " / ").toUpperCase() + " " + wvwIcon;
| |
| − | case "pve pvp":
| |
| − | return pveIcon + text.replace(" ", " / ").toUpperCase() + " " + pvpIcon;
| |
| − | case "wvw pvp":
| |
| − | 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";
| |
| − | }
| |
| − | })();
| |
