MediaWiki:Script/Filter.js
Révision datée du 23 août 2023 à 21:28 par Dexter (discussion | contributions)
Note : après avoir enregistré vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.
- Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou pressez Ctrl-F5 ou Ctrl-R (⌘-R sur un Mac)
- Google Chrome : appuyez sur Ctrl-Maj-R (⌘-Shift-R sur un Mac)
- Internet Explorer : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl-F5
- Opera : allez dans Menu → Settings (Opera → Préférences sur un Mac) et ensuite à Confidentialité & sécurité → Effacer les données d’exploration → Images et fichiers en cache.
function handleDropdowns(form) {
var activeButton = null;
function toggleDropdown(button, dropdownMenu) {
if (button === activeButton) {
dropdownMenu.classList.add('tabber-noactive');
activeButton = null;
} else {
if (activeButton) {
activeButton.nextElementSibling.classList.add('tabber-noactive');
}
dropdownMenu.classList.remove('tabber-noactive');
activeButton = button;
}
}
function closeDropdowns() {
if (activeButton) {
activeButton.nextElementSibling.classList.add('tabber-noactive');
activeButton = null;
}
}
form.addEventListener('click', function(event) {
var target = event.target;
var button = target.closest('button');
if (button) {
var dropdownMenu = button.nextElementSibling;
toggleDropdown(button, dropdownMenu);
} else if (!target.closest('.dropdown-menu')) {
closeDropdowns();
}
});
document.addEventListener('click', function(event) {
if (!form.contains(event.target)) {
closeDropdowns();
}
});
}
function isObjectValuesIncludedInFilter(obj, filter) {
return Object.keys(filter).every(function(prop) {
return obj[prop].split(' ').some(function(val) {
return filter[prop].indexOf(val) !== -1;
});
});
}
function isObjectValuesIncludedInFilterWithRange(obj, filter, rangeFilter) {
return isObjectValuesIncludedInFilter(obj, filter) && Object.keys(rangeFilter).every(function(prop) {
var propValue = Number(obj[prop]);
return rangeFilter[prop]["min"] <= propValue && rangeFilter[prop]["max"] >= propValue;
});
}
function filterItems(filter, listToFilter, rangeFilter, dataObject) {
for (var cardIndex = 0; cardIndex < listToFilter.length; cardIndex++) {
var card = listToFilter[cardIndex];
if (isObjectValuesIncludedInFilterWithRange(dataObject[cardIndex], filter, rangeFilter)) {
card.classList.remove("tabber-noactive");
} else {
card.classList.add("tabber-noactive");
}
}
}
function createInitialRangeObject(form) {
var initialRange = {}
form.querySelectorAll('[id$="-range"]').forEach(function(e) {
var minMax = {min: 0, max: 0}
e.querySelectorAll('input').forEach(function(input){
var extrem = input.id.split('-')[1];
minMax[extrem] = Number(input[extrem]);
});
initialRange[e.id.split("-")[0]] = minMax;
});
return initialRange
}
function incrementCounter(counter, count) {
if (count === 0) {
counter.classList.remove("tabber-noactive");
}
counter.textContent = count + 1;
}
function decrementCounter(counter, count) {
if (count === 1) {
counter.classList.add("tabber-noactive");
}
counter.textContent = count - 1;
}
function updateFilterObject(form, listToFilter, filter, rangeFilter, initialRange, dataObject) {
form.addEventListener("submit", function(e) {
e.preventDefault();
});
form.addEventListener("change", function(e) {
var target = e.target;
var value = target.dataset.filter;
var type = target.type;
var grandParent = target.parentElement.parentElement;
var key = grandParent.id;
var counter = grandParent.nextElementSibling;
var count = Number(counter.textContent);
if (type === "number") {
var key = key.split("-range")[0];
var extremum = target.id.split(key + "-")[1];
var currentValue = Number(target.value);
if (rangeFilter[key]) {
rangeFilter[key][extremum] = currentValue;
} else {
incrementCounter(counter, count);
var range = {"min": initialRange[key]["min"], "max": initialRange[key]["max"]};
range[extremum] = currentValue;
rangeFilter[key] = range;
}
if ((rangeFilter[key]["max"] === initialRange[key]["max"]) && (rangeFilter[key]["min"] === initialRange[key]["min"])) {
decrementCounter(counter, count);
delete rangeFilter[key];
}
} else if (type === "checkbox") {
if (target.checked) {
incrementCounter(counter, count);
if (filter[key]) {
filter[key].push(value);
} else {
filter[key] = [value];
}
} else {
decrementCounter(counter, count);
var index = filter[key].indexOf(value);
if (index !== -1) {
if (filter[key].length === 1) {
delete filter[key];
} else {
filter[key].splice(index, 1);
}
}
}
}
filterItems(filter, listToFilter, rangeFilter, dataObject);
});
}
function keyboard(form) {
var focusableElements = form.querySelectorAll('a[href], button, textarea, input[type="text"], input[type="radio"], input[type="checkbox"], input[type="number"], select');
var buttons = form.querySelectorAll("button");
form.addEventListener("keydown", function(e) {
var target = e.target;
if (target.tagName === "INPUT") {
if (e.key === "Enter") {
target.click();
}
} else if (target.tagName === "BUTTON") {
if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
var currentElement = document.activeElement;
var currentIndex = Array.prototype.indexOf.call(buttons, currentElement);
var nextIndex = e.key === "ArrowRight" ? (currentIndex + 1) % buttons.length : (currentIndex - 1 + buttons.length) % buttons.length;
buttons[nextIndex].focus();
}
}
if (target.type !== "number") {
if (e.key === "ArrowDown" || e.key === "ArrowUp") {
var currentElement = document.activeElement;
var currentIndex = Array.prototype.indexOf.call(focusableElements, currentElement);
var nextIndex = e.key === "ArrowDown" ? (currentIndex + 1) % focusableElements.length : (currentIndex - 1 + focusableElements.length) % focusableElements.length;
focusableElements[nextIndex].focus();
}
}
});
}
function filterWithURL(form, url, listToFilter, dataObject) {
var params = new URLSearchParams(url.search);
var filter = {}
var initialRange = createInitialRangeObject(form);
var rangeFilter = {}
for (var [key, value] of params.entries()) {
var input = form.querySelector("[id^='" + key + "'][data-filter='" + value + "']");
if (input) {
input.checked = true;
filter[key] = params.getAll(key);
} else {
var checkbox = form.querySelector("#" + key);
if (checkbox) {
var [filterKey, extremum] = key.split("-");
if (rangeFilter[filterKey]) {
rangeFilter[filterKey][extremum] = Number(value);
} else {
var range = {"min": initialRange[filterKey]["min"], "max": initialRange[filterKey]["max"]};
range[extremum] = Number(value);
rangeFilter[filterKey] = range;
}
checkbox.value = value;
}
}
}
filterItems(filter, listToFilter, rangeFilter, dataObject);
return [filter, rangeFilter, initialRange]
}
function loading() {
window.addEventListener("load", function() {
var mainContainer = document.getElementById("hide-all");
var loadingAnimation = document.getElementById("loading-animation");
mainContainer.classList.remove("tabber-noactive");
loadingAnimation.classList.add("tabber-noactive");
});
}
function createDataObject(listToFilter) {
var dataObject = []
for (var cardIndex = 0; cardIndex < listToFilter.length; cardIndex++) {
var item = listToFilter[cardIndex];
var levelData = item.querySelector("[data-e0]");
var [level, rank] = levelData.textContent.slice(1, -1).split(",");
var elementData = item.querySelector("[data-e2]").children;
if (elementData.length) {
var element = "";
for (var elementIndex = 0; elementIndex < elementData.length; elementIndex++) {
element += elementData[elementIndex].title + " ";
}
} else {
var element = "Aucun";
}
var typeData = item.querySelector("[data-e3]");
var type = typeData.textContent.replace("Aucun type", "Aucun");
var damageData = item.querySelector("[data-e4]");
var damage = damageData.textContent.replace("DC", "Compétence");
dataObject.push({e0: level, e1: rank, e2: element, e3: type, e4: damage})
}
return dataObject
}
(function(){
var listToFilter = document.getElementById("list-to-filter").children;
var form = document.getElementById("filter-form");
var url = new URL(window.location.href);
var dataObject = createDataObject(listToFilter);
var [filter, rangeFilter, initialRange] = filterWithURL(form, url, listToFilter, dataObject);
loading();
keyboard(form);
handleDropdowns(form);
updateFilterObject(form, listToFilter, filter, rangeFilter, initialRange, dataObject);
})();