MediaWiki:Common.js: Difference between revisions
Appearance
No edit summary |
Adiciona o comportamento das fichas de Campeao: abas de dificuldade e alternador de tema |
||
| Line 91: | Line 91: | ||
} else { | } else { | ||
initQuestPage(); | initQuestPage(); | ||
} | |||
}()); | |||
/* ========================================================================= | |||
Fichas de Campeao do Champion's Path (Module:Campeao) | |||
Duas coisas: as abas de dificuldade e o alternador de tema. | |||
Tudo degrada bem sem JS: sem script, a ficha mostra a dificuldade Normal | |||
e o botao de tema permanece oculto. | |||
========================================================================= */ | |||
(function () { | |||
'use strict'; | |||
var CHAVE_TEMA = 'pst-cp-tema'; | |||
function trocarDificuldade(ficha, dif) { | |||
var i; | |||
var abas = ficha.querySelectorAll('.cp-tab'); | |||
for (i = 0; i < abas.length; i++) { | |||
if (abas[i].getAttribute('data-dif') === dif) { | |||
abas[i].classList.add('is-active'); | |||
} else { | |||
abas[i].classList.remove('is-active'); | |||
} | |||
} | |||
var blocos = ficha.querySelectorAll('[data-dif]'); | |||
for (i = 0; i < blocos.length; i++) { | |||
if (blocos[i].classList.contains('cp-tab')) continue; | |||
if (blocos[i].getAttribute('data-dif') === dif) { | |||
blocos[i].classList.remove('is-hidden'); | |||
} else { | |||
blocos[i].classList.add('is-hidden'); | |||
} | |||
} | |||
} | |||
function aplicarTema(ficha, tema) { | |||
ficha.setAttribute('data-tema', tema); | |||
var botao = ficha.querySelector('[data-cp-tema]'); | |||
if (botao) { | |||
botao.textContent = tema === 'escuro' ? 'Modo claro' : 'Modo escuro'; | |||
} | |||
} | |||
function iniciar(ficha) { | |||
// Abas de dificuldade | |||
var abas = ficha.querySelectorAll('.cp-tab'); | |||
for (var i = 0; i < abas.length; i++) { | |||
abas[i].addEventListener('click', function () { | |||
trocarDificuldade(ficha, this.getAttribute('data-dif')); | |||
}); | |||
} | |||
// Alternador de tema: so aparece se o JS rodou | |||
var botao = ficha.querySelector('[data-cp-tema]'); | |||
if (botao) { | |||
botao.style.display = ''; | |||
var salvo = 'claro'; | |||
try { | |||
salvo = window.localStorage.getItem(CHAVE_TEMA) || 'claro'; | |||
} catch (e) {} | |||
aplicarTema(ficha, salvo); | |||
botao.addEventListener('click', function () { | |||
var novo = ficha.getAttribute('data-tema') === 'escuro' ? 'claro' : 'escuro'; | |||
aplicarTema(ficha, novo); | |||
try { | |||
window.localStorage.setItem(CHAVE_TEMA, novo); | |||
} catch (e) {} | |||
}); | |||
} | |||
} | |||
function pronto() { | |||
var fichas = document.querySelectorAll('.cp-boss'); | |||
for (var i = 0; i < fichas.length; i++) { | |||
iniciar(fichas[i]); | |||
} | |||
} | |||
if (document.readyState === 'loading') { | |||
document.addEventListener('DOMContentLoaded', pronto); | |||
} else { | |||
pronto(); | |||
} | } | ||
}()); | }()); | ||
Revision as of 01:25, 12 September 2026
(function () {
function initQuestPage() {
var cards = Array.prototype.slice.call(document.querySelectorAll('.pxgq-card'));
if (!cards.length) {
return;
}
var searchInput = document.querySelector('.js-pxgq-search');
var regionSelect = document.querySelector('.js-pxgq-region');
var minInput = document.querySelector('.js-pxgq-min');
var maxInput = document.querySelector('.js-pxgq-max');
var accountButtons = Array.prototype.slice.call(document.querySelectorAll('.js-pxgq-account'));
var currentAccount = 'all';
function normalize(value) {
return (value || '').toLowerCase().trim();
}
function applyFilters() {
var search = normalize(searchInput && searchInput.value);
var region = normalize(regionSelect && regionSelect.value);
var min = parseInt((minInput && minInput.value) || '0', 10);
var max = parseInt((maxInput && maxInput.value) || '9999', 10);
cards.forEach(function (card) {
var cardSearch = normalize(card.getAttribute('data-search'));
var cardRegion = normalize(card.getAttribute('data-region'));
var cardAccount = normalize(card.getAttribute('data-account'));
var cardMin = parseInt(card.getAttribute('data-level-min') || '0', 10);
var cardMax = parseInt(card.getAttribute('data-level-max') || '9999', 10);
var okSearch = !search || cardSearch.indexOf(search) !== -1;
var okRegion = region === 'all' || !region || cardRegion === region;
var okAccount = currentAccount === 'all' || cardAccount === currentAccount;
var okLevel = cardMax >= min && cardMin <= max;
card.classList.toggle('is-hidden', !(okSearch && okRegion && okAccount && okLevel));
});
}
if (searchInput) {
searchInput.addEventListener('input', applyFilters);
}
if (regionSelect) {
regionSelect.addEventListener('change', applyFilters);
}
if (minInput) {
minInput.addEventListener('input', applyFilters);
}
if (maxInput) {
maxInput.addEventListener('input', applyFilters);
}
accountButtons.forEach(function (button) {
button.addEventListener('click', function () {
accountButtons.forEach(function (btn) {
btn.classList.remove('is-active');
});
button.classList.add('is-active');
currentAccount = button.getAttribute('data-account') || 'all';
applyFilters();
});
});
document.querySelectorAll('.js-pxgq-spoiler').forEach(function (button) {
button.addEventListener('click', function () {
var card = button.closest('.pxgq-card');
if (!card) {
return;
}
var spoiler = card.querySelector('.pxgq-card-spoiler');
if (!spoiler) {
return;
}
var isHidden = spoiler.hasAttribute('hidden');
if (isHidden) {
spoiler.removeAttribute('hidden');
button.textContent = 'Ocultar spoiler';
} else {
spoiler.setAttribute('hidden', 'hidden');
button.textContent = 'Ver spoiler';
}
});
});
applyFilters();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initQuestPage);
} else {
initQuestPage();
}
}());
/* =========================================================================
Fichas de Campeao do Champion's Path (Module:Campeao)
Duas coisas: as abas de dificuldade e o alternador de tema.
Tudo degrada bem sem JS: sem script, a ficha mostra a dificuldade Normal
e o botao de tema permanece oculto.
========================================================================= */
(function () {
'use strict';
var CHAVE_TEMA = 'pst-cp-tema';
function trocarDificuldade(ficha, dif) {
var i;
var abas = ficha.querySelectorAll('.cp-tab');
for (i = 0; i < abas.length; i++) {
if (abas[i].getAttribute('data-dif') === dif) {
abas[i].classList.add('is-active');
} else {
abas[i].classList.remove('is-active');
}
}
var blocos = ficha.querySelectorAll('[data-dif]');
for (i = 0; i < blocos.length; i++) {
if (blocos[i].classList.contains('cp-tab')) continue;
if (blocos[i].getAttribute('data-dif') === dif) {
blocos[i].classList.remove('is-hidden');
} else {
blocos[i].classList.add('is-hidden');
}
}
}
function aplicarTema(ficha, tema) {
ficha.setAttribute('data-tema', tema);
var botao = ficha.querySelector('[data-cp-tema]');
if (botao) {
botao.textContent = tema === 'escuro' ? 'Modo claro' : 'Modo escuro';
}
}
function iniciar(ficha) {
// Abas de dificuldade
var abas = ficha.querySelectorAll('.cp-tab');
for (var i = 0; i < abas.length; i++) {
abas[i].addEventListener('click', function () {
trocarDificuldade(ficha, this.getAttribute('data-dif'));
});
}
// Alternador de tema: so aparece se o JS rodou
var botao = ficha.querySelector('[data-cp-tema]');
if (botao) {
botao.style.display = '';
var salvo = 'claro';
try {
salvo = window.localStorage.getItem(CHAVE_TEMA) || 'claro';
} catch (e) {}
aplicarTema(ficha, salvo);
botao.addEventListener('click', function () {
var novo = ficha.getAttribute('data-tema') === 'escuro' ? 'claro' : 'escuro';
aplicarTema(ficha, novo);
try {
window.localStorage.setItem(CHAVE_TEMA, novo);
} catch (e) {}
});
}
}
function pronto() {
var fichas = document.querySelectorAll('.cp-boss');
for (var i = 0; i < fichas.length; i++) {
iniciar(fichas[i]);
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', pronto);
} else {
pronto();
}
}());