search bar

dlibrary/static/dlibrary.css

@@ -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 {

dlibrary/static/index.js

@@ -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,15 +77,12 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     }
 
-    function applyOrdering() {
-        listContainer.replaceChildren();
-        scrollHandler();
-    }
+    function applyView() {
+        let orderedWorks;
 
         switch (ordering) {
         case 'shuffle':
-        let seed = parseInt(localStorage.getItem('shuffleSeed')) || newSeed();
-        orderedWorks = seedableShuffledCopy(WORKS, seed);
+            orderedWorks = seedableShuffledCopy(WORKS, shuffleSeed);
             break;
         case 'dateAsc':
             orderedWorks = WORKS.toReversed();
@@ -91,28 +91,53 @@ document.addEventListener('DOMContentLoaded', () => {
             orderedWorks = [...WORKS];
             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);
 
-    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;
 });

dlibrary/templates/index.html

@@ -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 %}