search bar

This commit is contained in:
xenofem 2024-03-02 00:50:28 -05:00
parent be99dc5578
commit 2db4553570
3 changed files with 66 additions and 27 deletions

View file

@ -52,6 +52,17 @@ body {
margin: -20px 0 0 -20px;
}
#search-container {
display: flex;
justify-content: center;
margin-bottom: 25px;
}
#search {
font-size: 24px;
text-align: center;
}
/* listing stuff */
#title, .nav {

View file

@ -31,14 +31,17 @@ function newSeed() {
document.addEventListener('DOMContentLoaded', () => {
const shuffleButton = document.getElementById('shuffle');
const sortButton = document.getElementById('sort');
const searchBox = document.getElementById('search');
const listContainer = document.getElementById('card-listing');
let ordering = localStorage.getItem('indexOrdering') || 'dateDesc';
let orderedWorks;
let ordering = localStorage.getItem('indexOrdering') || 'dateDesc';
let shuffleSeed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();
let worksToDisplay;
function scrollHandler() {
while (orderedWorks.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
const work = orderedWorks.shift();
while (worksToDisplay.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
const work = worksToDisplay.shift();
const card = document.createElement('div');
card.className = 'card';
@ -74,45 +77,67 @@ document.addEventListener('DOMContentLoaded', () => {
}
}
function applyOrdering() {
function applyView() {
let orderedWorks;
switch (ordering) {
case 'shuffle':
orderedWorks = seedableShuffledCopy(WORKS, shuffleSeed);
break;
case 'dateAsc':
orderedWorks = WORKS.toReversed();
break;
default:
orderedWorks = [...WORKS];
break;
}
if (searchBox.value === "") {
worksToDisplay = orderedWorks;
} else {
worksToDisplay = orderedWorks.filter((work) => {
const query = searchBox.value.toLowerCase();
if (work.title.toLowerCase().includes(query)) {
return true;
}
if (work.circle && work.circle.toLowerCase().includes(query)) {
return true;
}
if (work.authors.some((author) => author.toLowerCase().includes(query))) {
return true;
}
return false;
});
}
listContainer.replaceChildren();
scrollHandler();
}
switch (ordering) {
case 'shuffle':
let seed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();
orderedWorks = seedableShuffledCopy(WORKS, seed);
break;
case 'dateAsc':
orderedWorks = WORKS.toReversed();
break;
default:
orderedWorks = [...WORKS];
break;
}
applyOrdering();
applyView();
window.addEventListener('scroll', scrollHandler);
document.getElementById('shuffle').onclick = () => {
let seed = newSeed();
localStorage.setItem('shuffleSeed', seed);
shuffleButton.onclick = () => {
shuffleSeed = newSeed();
localStorage.setItem('shuffleSeed', shuffleSeed);
ordering = 'shuffle';
localStorage.setItem('indexOrdering', ordering);
orderedWorks = seedableShuffledCopy(WORKS, seed);
applyOrdering();
applyView();
};
document.getElementById('sort').onclick = () => {
sortButton.onclick = () => {
if (ordering === 'dateDesc') {
ordering = 'dateAsc';
orderedWorks = WORKS.toReversed();
} else {
ordering = 'dateDesc';
orderedWorks = [...WORKS];
}
localStorage.setItem('indexOrdering', ordering);
applyOrdering();
applyView();
};
searchBox.oninput = applyView;
});

View file

@ -20,6 +20,9 @@
<button id="sort" name="Sort"><img src="{{ root() }}/static/icons/sort.svg"/></button>
</div>
</div>
<div id="search-container">
<input type="text" id="search" placeholder="Search"/>
</div>
<div id="card-listing">
</div>
{% endblock %}