MediaWiki:GameModeVersion.js
Материал из Guild Wars 2 wiki
/** 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 += " ";
}
}
//Создание тела кнопки
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");
}
})();
