117 lines
2.9 KiB
JavaScript
117 lines
2.9 KiB
JavaScript
let charFilter = "";
|
|
let typeFilter = "";
|
|
let searchType = "commands";
|
|
|
|
document.addEventListener("DOMContentLoaded", (event) => {
|
|
const searchFilter = document.getElementById("filter");
|
|
let filterHandler = debounce(() => filter());
|
|
searchFilter.addEventListener("keyup", filterHandler);
|
|
searchFilter.placeholder = "Search commands...";
|
|
|
|
const searchInputs = document.querySelectorAll(
|
|
'input[type="radio"][name="search"]',
|
|
);
|
|
|
|
searchInputs.forEach(function (item, index) {
|
|
item.addEventListener("input", function () {
|
|
searchType = this.checked ? this.value : "";
|
|
searchFilter.placeholder = "Search " + this.value + "...";
|
|
filter();
|
|
});
|
|
});
|
|
|
|
const charFilters = document.querySelectorAll(
|
|
'input[type="radio"][name="charFilter"]',
|
|
);
|
|
|
|
charFilters.forEach(function (item, index) {
|
|
item.addEventListener("input", function () {
|
|
charFilter = this.checked ? this.value : "";
|
|
filter();
|
|
});
|
|
});
|
|
|
|
const typeFilters = document.querySelectorAll(
|
|
'input[type="radio"][name="typeFilter"]',
|
|
);
|
|
|
|
typeFilters.forEach(function (item, index) {
|
|
item.addEventListener("input", function () {
|
|
typeFilter = this.checked ? this.value : "";
|
|
filter();
|
|
});
|
|
});
|
|
});
|
|
|
|
function filter() {
|
|
const table = document.querySelector("table tbody");
|
|
const search = document.getElementById("filter").value.toLowerCase();
|
|
|
|
for (const child of table.children) {
|
|
const tds = child.children;
|
|
resetStyle(child, tds);
|
|
|
|
if (search.length > 0) {
|
|
if (searchType === "commands") {
|
|
// Check for command name
|
|
if (!tds[1].innerText.toLowerCase().includes(search)) {
|
|
child.style.display = "none";
|
|
} else {
|
|
applyStyle(tds[1]);
|
|
}
|
|
} else if (searchType === "ingredients") {
|
|
// Ingredients
|
|
if (!tds[2].innerText.toLowerCase().includes(search)) {
|
|
if (!tds[3].innerText.toLowerCase().includes(search)) {
|
|
child.style.display = "none";
|
|
} else {
|
|
applyStyle(tds[3]);
|
|
}
|
|
} else {
|
|
applyStyle(tds[2]);
|
|
if (tds[3].innerText.toLowerCase().includes(search)) {
|
|
applyStyle(tds[3]);
|
|
}
|
|
}
|
|
} else if (searchType === "abilities") {
|
|
// Abilities
|
|
hasLine = false;
|
|
for (let i = 0; i < 7; i++) {
|
|
const id = i + 6;
|
|
const ablName = tds[id].innerText.toLowerCase();
|
|
if (ablName.includes(search)) {
|
|
applyStyle(tds[id]);
|
|
hasLine = true;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!hasLine) {
|
|
child.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
const typeCheck = typeFilter === "" || tds[1].className === typeFilter;
|
|
const charCheck =
|
|
charFilter === "" || child.className.includes(charFilter);
|
|
|
|
if (child.style.display == "" && (!typeCheck || !charCheck)) {
|
|
child.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
function resetStyle(child, tds) {
|
|
child.style.display = "";
|
|
for (const td of tds) {
|
|
td.style.fontWeight = "inherit";
|
|
td.style.color = "#fff";
|
|
}
|
|
}
|
|
|
|
function applyStyle(el) {
|
|
el.style.fontWeight = "bold";
|
|
el.style.color = "red";
|
|
}
|