Skip to content

Commit 42d55bf

Browse files
wyndchymewyndchyme
committed
Improved search functionality
1 parent 5c41290 commit 42d55bf

File tree

1 file changed

+72
-65
lines changed

1 file changed

+72
-65
lines changed

‎mods/index.html‎

Lines changed: 72 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,9 @@
191191
height: 24px;
192192
image-rendering: pixelated;
193193
}
194-
194+
#modsShown {
195+
margin-left: 15px !important;
196+
}
195197
</style>
196198
</head>
197199
<body>
@@ -266,11 +268,12 @@
266268

267269
<div style="width: 100%; height: 6.5em; background: linear-gradient(rgba(104, 40, 40, 0.4), rgba(203, 119, 119, 0.1)), url(/img/bg/chiseled_quartz_block_top.png); background-size: 32px; image-rendering: pixelated;">
268270

271+
</div>
269272
<div style="position: relative;" id="desktopSearchContainer">
270273
<input type="text" id="searchInput" placeholder="Search mods..." style="
271274
position: absolute;
272275
right: 15px;
273-
top: calc(4em - 4px);
276+
top: -38px;
274277
background-color: rgba(0, 0, 0, 0.8);
275278
border: 2px solid black;
276279
outline: 2px solid white;
@@ -299,7 +302,6 @@
299302
1.9.19
300303
</label>
301304
<br>
302-
<br>
303305
<label>
304306
<input type="checkbox" class="modFilter" data-filter="version" value="1.0.0">
305307
1.0.0
@@ -348,6 +350,7 @@
348350
<img src="/img/gui/oreui/other.png">Other
349351
</label>
350352
<br>
353+
<div id="modsShown">0 mods shown out of 0</div>
351354
<div style="position: relative;" id="mobileSearchContainer">
352355
</div>
353356
</div>
@@ -1706,38 +1709,18 @@
17061709
<script src="/scripts/main/dropdown.js"></script>
17071710
<script src="/scripts/main/nodetails.js"></script>
17081711
<script src="/scripts/main/vines.js"></script>
1709-
<script>
1710-
const filters = document.querySelectorAll('.modFilter');
1711-
1712-
filters.forEach(filter => {
1713-
filter.addEventListener('change', filterMods);
1714-
});
1715-
1716-
function filterMods() {
1717-
const mods = document.querySelectorAll('.modItem');
1718-
1719-
const activeFilters = Array.from(filters)
1720-
.filter(filter => filter.checked)
1721-
.map(filter => ({ filter: filter.dataset.filter, value: filter.value }));
1722-
1723-
mods.forEach(mod => {
1724-
let showMod = true;
1725-
1726-
activeFilters.forEach(activeFilter => {
1727-
const modAttr = mod.dataset[activeFilter.filter];
1728-
1729-
const modValues = modAttr ? modAttr.split(',') : [];
1730-
1731-
if (!modValues.includes(activeFilter.value)) {
1732-
showMod = false;
1733-
}
1734-
});
1735-
1736-
mod.style.display = showMod ? '' : 'none';
1737-
});
1738-
}
1739-
</script>
1740-
1712+
<script>
1713+
document.addEventListener("DOMContentLoaded", function () {
1714+
const isWebkitMobile = /AppleWebKit/.test(navigator.userAgent) && /Mobile|iPhone|iPad|Android/.test(navigator.userAgent);
1715+
1716+
if (isWebkitMobile) {
1717+
document.querySelectorAll('.modIcon').forEach(icon => {
1718+
icon.classList.add('webkit-mobile-fix');
1719+
});
1720+
}
1721+
});
1722+
1723+
</script>
17411724
<script>
17421725
window.addEventListener('DOMContentLoaded', () => {
17431726
const modItems = document.querySelectorAll('.modItem');
@@ -1757,36 +1740,60 @@
17571740

17581741
</script>
17591742
<script>
1760-
document.addEventListener("DOMContentLoaded", function () {
1761-
const isWebkitMobile = /AppleWebKit/.test(navigator.userAgent) && /Mobile|iPhone|iPad|Android/.test(navigator.userAgent);
1762-
1763-
if (isWebkitMobile) {
1764-
document.querySelectorAll('.modIcon').forEach(icon => {
1765-
icon.classList.add('webkit-mobile-fix');
1766-
});
1767-
}
1768-
});
1769-
1770-
</script>
1771-
<script>
1772-
document.getElementById('searchInput').addEventListener('input', function () {
1773-
searchMods(this.value);
1774-
});
1775-
function searchMods(query) {
1776-
const mods = document.querySelectorAll('.modItem');
1777-
const lowerQuery = query.toLowerCase();
1778-
1779-
mods.forEach(mod => {
1780-
const title = mod.querySelector('.modHeader').textContent.toLowerCase();
1781-
if (title.includes(lowerQuery)) {
1782-
mod.style.display = 'block';
1783-
} else {
1784-
mod.style.display = 'none';
1785-
}
1786-
});
1787-
}
1788-
1789-
</script>
1743+
const filters = document.querySelectorAll('.modFilter');
1744+
const searchInput = document.getElementById('searchInput');
1745+
const modsShownDisplay = document.getElementById('modsShown');
1746+
1747+
filters.forEach(filter => {
1748+
filter.addEventListener('change', updateMods);
1749+
});
1750+
1751+
searchInput.addEventListener('input', updateMods);
1752+
1753+
document.addEventListener('DOMContentLoaded', updateMods);
1754+
1755+
function updateMods() {
1756+
const mods = document.querySelectorAll('.modItem');
1757+
const query = searchInput.value.toLowerCase();
1758+
const activeFilters = Array.from(filters)
1759+
.filter(filter => filter.checked)
1760+
.map(filter => ({
1761+
filter: filter.dataset.filter,
1762+
value: filter.value
1763+
}));
1764+
1765+
let shownCount = 0;
1766+
1767+
mods.forEach(mod => {
1768+
let showMod = true;
1769+
1770+
activeFilters.forEach(activeFilter => {
1771+
const modAttr = mod.dataset[activeFilter.filter];
1772+
const modValues = modAttr ? modAttr.split(',') : [];
1773+
if (!modValues.includes(activeFilter.value)) {
1774+
showMod = false;
1775+
}
1776+
});
1777+
1778+
const title = mod.querySelector('.modHeader')?.textContent.toLowerCase() || '';
1779+
const matchesSearch = title.includes(query);
1780+
1781+
if (showMod && matchesSearch) {
1782+
mod.style.display = '';
1783+
shownCount++;
1784+
} else {
1785+
mod.style.display = 'none';
1786+
}
1787+
});
1788+
1789+
const modText = shownCount === 1 ? 'item' : 'items';
1790+
modsShownDisplay.textContent = `${shownCount} ${modText} shown out of ${mods.length}`;
1791+
}
1792+
</script>
1793+
1794+
1795+
1796+
17901797
<script>
17911798
function moveSearchInput() {
17921799
const input = document.getElementById('searchInput');

0 commit comments

Comments
 (0)