MediaWiki:Common.js: Difference between revisions
Appearance
Created page with "mw.loader.using('mediawiki.util').then(function () { function initQuestFilters() { var container = document.querySelector('.quest-cards'); if (!container) { return; } var cards = Array.prototype.slice.call(container.querySelectorAll('.quest-card')); var searchInput = document.querySelector('.quest-filter-search'); var regionSelect = document.querySelector('.quest-filter-region'); var minInput = document.querySelector('.quest-filter-min'); var maxInpu..." |
No edit summary |
||
| Line 1: | Line 1: | ||
(function () { | |||
function | function initQuestPage() { | ||
var | var cards = Array.prototype.slice.call(document.querySelectorAll('.pxgq-card')); | ||
if (! | if (!cards.length) { | ||
return; | return; | ||
} | } | ||
var searchInput = document.querySelector('.js-pxgq-search'); | |||
var searchInput = document.querySelector('. | var regionSelect = document.querySelector('.js-pxgq-region'); | ||
var regionSelect = document.querySelector('. | var minInput = document.querySelector('.js-pxgq-min'); | ||
var minInput = document.querySelector('. | var maxInput = document.querySelector('.js-pxgq-max'); | ||
var maxInput = document.querySelector('. | var accountButtons = Array.prototype.slice.call(document.querySelectorAll('.js-pxgq-account')); | ||
var accountButtons = Array.prototype.slice.call(document.querySelectorAll('. | |||
var currentAccount = 'all'; | var currentAccount = 'all'; | ||
| Line 21: | Line 20: | ||
var search = normalize(searchInput && searchInput.value); | var search = normalize(searchInput && searchInput.value); | ||
var region = normalize(regionSelect && regionSelect.value); | var region = normalize(regionSelect && regionSelect.value); | ||
var | var min = parseInt((minInput && minInput.value) || '0', 10); | ||
var | var max = parseInt((maxInput && maxInput.value) || '9999', 10); | ||
cards.forEach(function (card) { | cards.forEach(function (card) { | ||
var | var cardSearch = normalize(card.getAttribute('data-search')); | ||
var cardRegion = normalize(card. | var cardRegion = normalize(card.getAttribute('data-region')); | ||
var cardAccount = normalize(card. | var cardAccount = normalize(card.getAttribute('data-account')); | ||
var cardMin = parseInt(card. | var cardMin = parseInt(card.getAttribute('data-level-min') || '0', 10); | ||
var cardMax = parseInt(card. | var cardMax = parseInt(card.getAttribute('data-level-max') || '9999', 10); | ||
var | var okSearch = !search || cardSearch.indexOf(search) !== -1; | ||
var | var okRegion = region === 'all' || !region || cardRegion === region; | ||
var | var okAccount = currentAccount === 'all' || cardAccount === currentAccount; | ||
var | var okLevel = cardMax >= min && cardMin <= max; | ||
card.classList.toggle('is-hidden', !(okSearch && okRegion && okAccount && okLevel)); | |||
card.classList.toggle('is-hidden', ! | |||
}); | }); | ||
} | } | ||
| Line 62: | Line 60: | ||
currentAccount = button.getAttribute('data-account') || 'all'; | currentAccount = button.getAttribute('data-account') || 'all'; | ||
applyFilters(); | 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'; | |||
} | |||
}); | }); | ||
}); | }); | ||
| Line 69: | Line 88: | ||
if (document.readyState === 'loading') { | if (document.readyState === 'loading') { | ||
document.addEventListener('DOMContentLoaded', | document.addEventListener('DOMContentLoaded', initQuestPage); | ||
} else { | } else { | ||
initQuestPage(); | |||
} | } | ||
}); | }()); | ||
Revision as of 17:36, 11 May 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();
}
}());