search bar
This commit is contained in:
parent
be99dc5578
commit
2db4553570
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
|
|
|
@ -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 %}
|
||||
|
|
Loading…
Reference in a new issue