prehistoric-systems/awesome-privacy
1
0
Fork 0
mirror of https://github.com/Lissy93/awesome-privacy.git synced 2026-03-11 08:55:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Rever JS search for browse page, Astro build failing otherwise

Browse source
This commit is contained in:
Alicia Sykes 2024-03-28 17:32:12 +00:00
parent 826dde6c84
commit 4d60b4f1a6
1 changed files with 53 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

95
web/src/pages/browse.astro
View file

@ -36,48 +36,55 @@ const categories: Category[] = (await fetchData())?.categories;
</Layout>
<script>
// Time for some good ol' fashioned vanilla JS...
// I reccomend you not to look at this code for too long, it's not pretty.
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const categories = document.querySelectorAll('.category');
const pressEnterMsg = document.getElementById('press-enter-msg');
const noResults = document.querySelector('.no-results');
// Time for some good ol' fashioned vanilla JS...
// I reccomend you not to look at this code for too long, it's not pretty.
const filterInput = document.querySelector('input');
const categories = document.querySelectorAll<HTMLElement>('.category');
const pressEnterMsg = document.getElementById('press-enter-msg') as HTMLElement | null;
const noResults = document.querySelector('.no-results') as HTMLElement | null;
if (!pressEnterMsg || !noResults || !searchInput) {
console.error('Essential element missing!');
return;
}
if (!pressEnterMsg || !noResults) {
throw new Error('No pressEnterMsg or noResults');
};
searchInput.addEventListener('input', (e) => {
let resultsCount = 0;
const filter = e.target.value.trim().toLowerCase();
pressEnterMsg.style.visibility = filter ? 'visible' : 'hidden';
categories.forEach((category) => {
const titleElement = category.querySelector('.category-title');
const title = titleElement ? titleElement.textContent?.toLowerCase() : '';
const sections = category.querySelectorAll('.section');
let sectionCount = 0;
sections.forEach((section) => {
const sectionTitle = section.textContent?.toLowerCase();
if (sectionTitle?.includes(filter)) {
section.style.display = 'block';
sectionCount++;
} else {
section.style.display = 'none';
}
});
category.style.display = title.includes(filter) || sectionCount > 0 ? 'inline-flex' : 'none';
resultsCount += title.includes(filter) ? 1 : sectionCount;
});
noResults.style.display = resultsCount === 0 ? 'block' : 'none';
filterInput?.addEventListener('input', (e) => {
let resultsCount = 0;
const filter = (e.target as HTMLInputElement).value.toLowerCase();
if (filter.length > 0) {
pressEnterMsg.style.visibility = 'visible';
} else {
pressEnterMsg.style.visibility = 'hidden';
}
categories.forEach((category) => {
const titleElement = category.querySelector('.category-title');
const title = titleElement ? titleElement.textContent?.toLowerCase() : '';
const sections = category.querySelectorAll<HTMLElement>('.section');
let count = 0;
sections.forEach((section) => {
const sectionTitle = section.textContent?.toLowerCase();
if (sectionTitle?.includes(filter)) {
section.style.display = 'block';
count++;
resultsCount++;
} else {
section.style.display = 'none';
}
});
if (title && title.includes(filter)) {
category.style.display = 'inline-flex';
resultsCount++;
} else if (count === 0) {
category.style.display = 'none';
}
});
noResults.style.display = resultsCount === 0 ? 'block' : 'none';
});
searchInput.addEventListener('keydown', (event) => {
if (typeof window !== 'undefined') {
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput') as HTMLInputElement | null;
if (searchInput === null) return;
searchInput.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
window.location.href = `/search/${encodeURIComponent(searchInput.value.trim())}`;
@ -86,16 +93,20 @@ const categories: Category[] = (await fetchData())?.categories;
searchInput.value = '';
searchInput.blur();
pressEnterMsg.style.visibility = 'hidden';
// Reset display styles
categories.forEach(category => category.style.display = 'inline-flex');
document.querySelectorAll('.section').forEach(section => section.style.display = 'block');
categories.forEach((category) => {
category.style.display = 'inline-flex';
const sections = category.querySelectorAll<HTMLElement>('.section');
sections.forEach((section) => {
section.style.display = 'block';
});
});
}
});
});
}
</script>
<style lang="scss">
.head-wrap {