MediaWiki:GameModeVersion.js — различия между версиями
Материал из Guild Wars 2 wiki
Blood (обсуждение | вклад) |
Blood (обсуждение | вклад) |
||
(не показано 20 промежуточных версий этого же участника) | |||
Строка 5: | Строка 5: | ||
(function() { | (function() { | ||
− | var | + | var buttonContainers = document.querySelectorAll(".gmvbuttons"), //Контейнеры для кнопок |
− | + | pveIcon, pvpIcon, wvwIcon, hash, i; | |
− | //Если | + | //Если контейнеров для кнопок на странице нет, то ничего не делаем |
− | if (! | + | if (!buttonContainers.length) return; |
pveIcon = "<img alt='Game mode version' " + | pveIcon = "<img alt='Game mode version' " + | ||
Строка 23: | Строка 23: | ||
"srcset='https://wiki.guildwars2.com/images/thumb/1/1b/WvW_Menu_Bar_icon.png/24px-WvW_Menu_Bar_icon.png 1.5x, " + | "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'> "; | "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 < | + | for (i = 0; i < buttonContainers.length; i++) { |
− | + | initContainer(buttonContainers[i]); | |
− | + | showSelectedInfo(buttonContainers[i], hash, true); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
//Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке | //Скрытие всей разделяемой на режимы информации и показ только той, что соответствует текущей выделенной кнопке | ||
// также, при первоначальном вызове, выделение кнопки и добавление анимации | // также, при первоначальном вызове, выделение кнопки и добавление анимации | ||
− | function showSelectedInfo(id, | + | function showSelectedInfo(buttonsContainer, id, initCall) { |
− | var collection = | + | var gmvScope = buttonsContainer._gmvScope, |
+ | collection = gmvScope.querySelectorAll(".gamemode"), | ||
+ | buttons, button, i; | ||
− | if ( | + | if (initCall) { |
− | buttons = buttonsContainer. | + | buttons = buttonsContainer.querySelectorAll(".gmvbutton"); |
button = buttons[0]; | button = buttons[0]; | ||
+ | id = id.split(" ")[0]; | ||
for (i = 0; i < buttons.length; i++) { | for (i = 0; i < buttons.length; i++) { | ||
− | if (~buttons[i].id.indexOf(id)) { | + | if (~buttons[i].getAttribute("data-id").indexOf(id)) { |
button = buttons[i]; | button = buttons[i]; | ||
break; | break; | ||
Строка 67: | Строка 50: | ||
} | } | ||
− | id = button.id; | + | id = button.getAttribute("data-id"); |
button.setAttribute("class", "gmvbutton active"); | button.setAttribute("class", "gmvbutton active"); | ||
[].forEach.call(collection, addAnimation); | [].forEach.call(collection, addAnimation); | ||
Строка 76: | Строка 59: | ||
switch (id) { | switch (id) { | ||
case "pve": | case "pve": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.pve"); |
break; | break; | ||
case "pvp": | case "pvp": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.pvp"); |
break; | break; | ||
case "wvw": | case "wvw": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.wvw"); |
break; | break; | ||
case "pve wvw": | case "pve wvw": | ||
case "wvw pve": | case "wvw pve": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.pve, .gamemode.wvw"); |
break; | break; | ||
case "pve pvp": | case "pve pvp": | ||
case "pvp pve": | case "pvp pve": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.pve, .gamemode.pvp"); |
break; | break; | ||
case "wvw pvp": | case "wvw pvp": | ||
case "pvp wvw": | case "pvp wvw": | ||
− | collection = | + | collection = gmvScope.querySelectorAll(".gamemode.wvw, .gamemode.pvp"); |
break; | break; | ||
} | } | ||
Строка 100: | Строка 83: | ||
[].forEach.call(collection, show); | [].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) { | function createButtonBody(text) { | ||
Строка 110: | Строка 132: | ||
case "wvw": | case "wvw": | ||
return wvwIcon + text.toUpperCase().replace("V", "v"); | return wvwIcon + text.toUpperCase().replace("V", "v"); | ||
− | |||
case "wvw pve": | case "wvw pve": | ||
+ | text = "pve wvw"; | ||
+ | case "pve wvw": | ||
return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + wvwIcon; | return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + wvwIcon; | ||
− | |||
case "pvp pve": | case "pvp pve": | ||
+ | text = "pve pvp"; | ||
+ | case "pve pvp": | ||
return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon; | return pveIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon; | ||
− | |||
case "pvp wvw": | case "pvp wvw": | ||
+ | text = "wvw pvp"; | ||
+ | case "wvw pvp": | ||
return wvwIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon; | return wvwIcon + text.toUpperCase().replace(" ", " / ").replace(/V/g, "v") + " " + pvpIcon; | ||
} | } | ||
Строка 124: | Строка 149: | ||
//Показ элемента | //Показ элемента | ||
function show(elem) { | function show(elem) { | ||
− | elem.setAttribute("style", elem.getAttribute("data-style")); | + | if (elem.hasAttribute("data-style")) { |
+ | elem.setAttribute("style", elem.getAttribute("data-style")); | ||
+ | } else elem.style.display = "unset"; | ||
} | } | ||
//Скрытие элемента | //Скрытие элемента | ||
function hide(elem) { | function hide(elem) { | ||
− | if (!elem.hasAttribute("data-style")) elem.setAttribute("data-style", elem.getAttribute("style")); | + | if (!elem.hasAttribute("data-style") && elem.hasAttribute("style") && |
+ | !~elem.getAttribute("style").indexOf("none")) { | ||
+ | elem.setAttribute("data-style", elem.getAttribute("style")); | ||
+ | } | ||
elem.style.display = "none"; | elem.style.display = "none"; | ||
} | } |
Текущая версия на 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 += " "; } } //Создание тела кнопки 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"); } })();