MediaWiki:GameModeVersion.js — различия между версиями
Материал из Guild Wars 2 wiki
Blood (обсуждение | вклад) |
Blood (обсуждение | вклад) (учет хэша) |
||
Строка 30: | Строка 30: | ||
button = document.createElement("button"); | button = document.createElement("button"); | ||
button.setAttribute("id", buttons[i].trim()); | button.setAttribute("id", buttons[i].trim()); | ||
− | button.setAttribute("class", | + | button.setAttribute("class", "gmvbutton"); |
button.innerHTML = "<b>" + createButtonBody(buttons[i].trim()) + "</b>"; | button.innerHTML = "<b>" + createButtonBody(buttons[i].trim()) + "</b>"; | ||
− | buttonsContainer.appendChild(button); | + | buttonsContainer.appendChild(button); |
} | } | ||
− | //Скрываем всю разделяемую на режимы информацию, | + | //Скрываем всю разделяемую на режимы информацию, выделяем нужную кнопку и добавляем анимацию |
− | showSelectedInfo( | + | showSelectedInfo(location.hash.substring(1).replace(".2C", " ").toLowerCase(), true); |
[].forEach.call(document.querySelectorAll(".gamemode"), addAnimation); | [].forEach.call(document.querySelectorAll(".gamemode"), addAnimation); | ||
Строка 53: | Строка 53: | ||
//Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке | //Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке | ||
− | function showSelectedInfo(id) { | + | function showSelectedInfo(id, selectButton) { |
var collection = document.querySelectorAll(".gamemode"); | var collection = document.querySelectorAll(".gamemode"); | ||
[].forEach.call(collection, hide); | [].forEach.call(collection, hide); | ||
Строка 59: | Строка 59: | ||
switch (id) { | switch (id) { | ||
case "pve": | case "pve": | ||
+ | if (selectButton) buttonsContainer.querySelector("#pve").setAttribute("class", "gmvbutton active"); | ||
collection = document.querySelectorAll(".gamemode.pve"); | collection = document.querySelectorAll(".gamemode.pve"); | ||
break; | break; | ||
case "pvp": | case "pvp": | ||
− | collection = document.querySelectorAll(".gamemode.pvp"); | + | if (selectButton) buttonsContainer.querySelector("#pvp").setAttribute("class", "gmvbutton active"); |
+ | collection = document.querySelectorAll(".gamemode.pvp"); | ||
break; | break; | ||
case "wvw": | case "wvw": | ||
− | collection = document.querySelectorAll(".gamemode.wvw"); | + | if (selectButton) buttonsContainer.querySelector("#wvw").setAttribute("class", "gmvbutton active"); |
+ | collection = document.querySelectorAll(".gamemode.wvw"); | ||
break; | break; | ||
case "pve wvw": | case "pve wvw": | ||
case "wvw pve": | case "wvw pve": | ||
− | collection = document.querySelectorAll(".gamemode.pve, .gamemode.wvw"); | + | if (selectButton) buttonsContainer.querySelector("#pve wvw").setAttribute("class", "gmvbutton active"); |
+ | collection = document.querySelectorAll(".gamemode.pve, .gamemode.wvw"); | ||
break; | break; | ||
case "pve pvp": | case "pve pvp": | ||
case "pvp pve": | case "pvp pve": | ||
− | collection = document.querySelectorAll(".gamemode.pve, .gamemode.pvp"); | + | if (selectButton) buttonsContainer.querySelector("#pve pvp").setAttribute("class", "gmvbutton active"); |
+ | collection = document.querySelectorAll(".gamemode.pve, .gamemode.pvp"); | ||
break; | break; | ||
case "wvw pvp": | case "wvw pvp": | ||
case "pvp wvw": | case "pvp wvw": | ||
+ | if (selectButton) buttonsContainer.querySelector("#wvw pvp").setAttribute("class", "gmvbutton active"); | ||
collection = document.querySelectorAll(".gamemode.wvw, .gamemode.pvp"); | collection = document.querySelectorAll(".gamemode.wvw, .gamemode.pvp"); | ||
break; | break; | ||
+ | default: | ||
+ | buttonsContainer.firstElementChild.setAttribute("class", "gmvbutton active"); | ||
} | } | ||
Версия 08:15, 4 мая 2020
/** GameModeVersion.js * Отображение информации для умений/черт, разделенной между игровыми режимами. Скрипт опирается на Шаблон:Game_mode_version. * Автор Blood :) */ (function() { var buttonsContainer = document.getElementById("gmvbuttons"), //Контейнер для кнопок buttons, button, pveIcon, pvpIcon, wvwIcon, 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", "gmvbutton"); button.innerHTML = "<b>" + createButtonBody(buttons[i].trim()) + "</b>"; buttonsContainer.appendChild(button); } //Скрываем всю разделяемую на режимы информацию, выделяем нужную кнопку и добавляем анимацию showSelectedInfo(location.hash.substring(1).replace(".2C", " ").toLowerCase(), true); [].forEach.call(document.querySelectorAll(".gamemode"), addAnimation); //Обработчик щелчков левой кнопкой мыши function mouseClickHandler(event) { var button = event.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, selectButton) { var collection = document.querySelectorAll(".gamemode"); [].forEach.call(collection, hide); switch (id) { case "pve": if (selectButton) buttonsContainer.querySelector("#pve").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.pve"); break; case "pvp": if (selectButton) buttonsContainer.querySelector("#pvp").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.pvp"); break; case "wvw": if (selectButton) buttonsContainer.querySelector("#wvw").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.wvw"); break; case "pve wvw": case "wvw pve": if (selectButton) buttonsContainer.querySelector("#pve wvw").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.pve, .gamemode.wvw"); break; case "pve pvp": case "pvp pve": if (selectButton) buttonsContainer.querySelector("#pve pvp").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.pve, .gamemode.pvp"); break; case "wvw pvp": case "pvp wvw": if (selectButton) buttonsContainer.querySelector("#wvw pvp").setAttribute("class", "gmvbutton active"); collection = document.querySelectorAll(".gamemode.wvw, .gamemode.pvp"); break; default: buttonsContainer.firstElementChild.setAttribute("class", "gmvbutton active"); } [].forEach.call(collection, show); } //Создание тела кнопки 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 "pve wvw": case "wvw pve": return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + wvwIcon; case "pve pvp": case "pvp pve": return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon; case "wvw pvp": case "pvp wvw": return wvwIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + 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"; } //Добавление анимации function addAnimation(elem) { elem.setAttribute("class", elem.className + " gamemode-animation"); } })();