Jump to content

MediaWiki:Common.js: Difference between revisions

From WikiPStory
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:
mw.loader.using('mediawiki.util').then(function () {
(function () {
function initQuestFilters() {
function initQuestPage() {
var container = document.querySelector('.quest-cards');
var cards = Array.prototype.slice.call(document.querySelectorAll('.pxgq-card'));
if (!container) {
if (!cards.length) {
return;
return;
}
}


var cards = Array.prototype.slice.call(container.querySelectorAll('.quest-card'));
var searchInput = document.querySelector('.js-pxgq-search');
var searchInput = document.querySelector('.quest-filter-search');
var regionSelect = document.querySelector('.js-pxgq-region');
var regionSelect = document.querySelector('.quest-filter-region');
var minInput = document.querySelector('.js-pxgq-min');
var minInput = document.querySelector('.quest-filter-min');
var maxInput = document.querySelector('.js-pxgq-max');
var maxInput = document.querySelector('.quest-filter-max');
var accountButtons = Array.prototype.slice.call(document.querySelectorAll('.js-pxgq-account'));
var accountButtons = Array.prototype.slice.call(document.querySelectorAll('.quest-account-toggle button'));
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 minLevel = parseInt((minInput && minInput.value) || '0', 10);
var min = parseInt((minInput && minInput.value) || '0', 10);
var maxLevel = parseInt((maxInput && maxInput.value) || '9999', 10);
var max = parseInt((maxInput && maxInput.value) || '9999', 10);


cards.forEach(function (card) {
cards.forEach(function (card) {
var name = normalize(card.dataset.name);
var cardSearch = normalize(card.getAttribute('data-search'));
var cardRegion = normalize(card.dataset.region);
var cardRegion = normalize(card.getAttribute('data-region'));
var cardAccount = normalize(card.dataset.account);
var cardAccount = normalize(card.getAttribute('data-account'));
var cardMin = parseInt(card.dataset.levelMin || '0', 10);
var cardMin = parseInt(card.getAttribute('data-level-min') || '0', 10);
var cardMax = parseInt(card.dataset.levelMax || '9999', 10);
var cardMax = parseInt(card.getAttribute('data-level-max') || '9999', 10);


var matchesSearch = !search || name.indexOf(search) !== -1;
var okSearch = !search || cardSearch.indexOf(search) !== -1;
var matchesRegion = !region || region === 'all' || cardRegion === region;
var okRegion = region === 'all' || !region || cardRegion === region;
var matchesAccount = currentAccount === 'all' || cardAccount === currentAccount;
var okAccount = currentAccount === 'all' || cardAccount === currentAccount;
var matchesLevel = cardMax >= minLevel && cardMin <= maxLevel;
var okLevel = cardMax >= min && cardMin <= max;


var visible = matchesSearch && matchesRegion && matchesAccount && matchesLevel;
card.classList.toggle('is-hidden', !(okSearch && okRegion && okAccount && okLevel));
card.classList.toggle('is-hidden', !visible);
});
});
}
}
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', initQuestFilters);
document.addEventListener('DOMContentLoaded', initQuestPage);
} else {
} else {
initQuestFilters();
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();
	}
}());