search bar
This commit is contained in:
parent
be99dc5578
commit
2db4553570
|
@ -52,6 +52,17 @@ body {
|
||||||
margin: -20px 0 0 -20px;
|
margin: -20px 0 0 -20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#search-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#search {
|
||||||
|
font-size: 24px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
/* listing stuff */
|
/* listing stuff */
|
||||||
|
|
||||||
#title, .nav {
|
#title, .nav {
|
||||||
|
|
|
@ -31,14 +31,17 @@ function newSeed() {
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const shuffleButton = document.getElementById('shuffle');
|
const shuffleButton = document.getElementById('shuffle');
|
||||||
const sortButton = document.getElementById('sort');
|
const sortButton = document.getElementById('sort');
|
||||||
|
const searchBox = document.getElementById('search');
|
||||||
const listContainer = document.getElementById('card-listing');
|
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() {
|
function scrollHandler() {
|
||||||
while (orderedWorks.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
|
while (worksToDisplay.length > 0 && listContainer.clientHeight - window.scrollY < 5000) {
|
||||||
const work = orderedWorks.shift();
|
const work = worksToDisplay.shift();
|
||||||
|
|
||||||
const card = document.createElement('div');
|
const card = document.createElement('div');
|
||||||
card.className = 'card';
|
card.className = 'card';
|
||||||
|
@ -74,15 +77,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function applyOrdering() {
|
function applyView() {
|
||||||
listContainer.replaceChildren();
|
let orderedWorks;
|
||||||
scrollHandler();
|
|
||||||
}
|
|
||||||
|
|
||||||
switch (ordering) {
|
switch (ordering) {
|
||||||
case 'shuffle':
|
case 'shuffle':
|
||||||
let seed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();
|
orderedWorks = seedableShuffledCopy(WORKS, shuffleSeed);
|
||||||
orderedWorks = seedableShuffledCopy(WORKS, seed);
|
|
||||||
break;
|
break;
|
||||||
case 'dateAsc':
|
case 'dateAsc':
|
||||||
orderedWorks = WORKS.toReversed();
|
orderedWorks = WORKS.toReversed();
|
||||||
|
@ -91,28 +91,53 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||||
orderedWorks = [...WORKS];
|
orderedWorks = [...WORKS];
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
applyOrdering();
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
|
||||||
|
applyView();
|
||||||
|
|
||||||
window.addEventListener('scroll', scrollHandler);
|
window.addEventListener('scroll', scrollHandler);
|
||||||
|
|
||||||
document.getElementById('shuffle').onclick = () => {
|
shuffleButton.onclick = () => {
|
||||||
let seed = newSeed();
|
shuffleSeed = newSeed();
|
||||||
localStorage.setItem('shuffleSeed', seed);
|
localStorage.setItem('shuffleSeed', shuffleSeed);
|
||||||
ordering = 'shuffle';
|
ordering = 'shuffle';
|
||||||
localStorage.setItem('indexOrdering', ordering);
|
localStorage.setItem('indexOrdering', ordering);
|
||||||
|
|
||||||
orderedWorks = seedableShuffledCopy(WORKS, seed);
|
applyView();
|
||||||
applyOrdering();
|
|
||||||
};
|
};
|
||||||
document.getElementById('sort').onclick = () => {
|
sortButton.onclick = () => {
|
||||||
if (ordering === 'dateDesc') {
|
if (ordering === 'dateDesc') {
|
||||||
ordering = 'dateAsc';
|
ordering = 'dateAsc';
|
||||||
orderedWorks = WORKS.toReversed();
|
|
||||||
} else {
|
} else {
|
||||||
ordering = 'dateDesc';
|
ordering = 'dateDesc';
|
||||||
orderedWorks = [...WORKS];
|
|
||||||
}
|
}
|
||||||
localStorage.setItem('indexOrdering', ordering);
|
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>
|
<button id="sort" name="Sort"><img src="{{ root() }}/static/icons/sort.svg"/></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="search-container">
|
||||||
|
<input type="text" id="search" placeholder="Search"/>
|
||||||
|
</div>
|
||||||
<div id="card-listing">
|
<div id="card-listing">
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue