From e889bccb06d559983d521d48ffc3c727ceca91c7 Mon Sep 17 00:00:00 2001
From: Siphalor <info@siphalor.de>
Date: Sat, 9 Apr 2022 18:40:43 +0200
Subject: [PATCH] Implement file filtering

---
 footer.html | 36 ++++++++++++++++++++++++++++++++----
 header.html | 16 ++++++++++++++++
 2 files changed, 48 insertions(+), 4 deletions(-)
diff --git a/footer.html b/footer.html
index b71e748..c63e702 100644
--- a/footer.html
+++ b/footer.html
@@ -14,15 +14,43 @@
 			<script src="https://siphalor.de/assets/js/main.js" defer="defer"></script>
 			<script src="/Nginx-Fancyindex-Theme/marked.min.js"></script>
 			<script>
-				var directoryHeading = document.getElementById("directory");
+				let directoryHeading = document.getElementById("directory");
 				document.title = "Directory Listing for " + directoryHeading.innerHTML;
 
+				let table = document.getElementById("list");
+				let searchContainer = document.getElementById("search-container");
+				searchContainer.remove();
+				table.before(searchContainer);
+				searchContainer.hidden = false;
+				let searchInput = document.getElementById("search-input");
+				searchInput.addEventListener("input", filterTable);
+				filterTable();
+
+				function filterTable() {
+					let value = searchInput.value.toLowerCase();
+					let rows = table.tBodies[0].rows;
+					if (value) {
+						for (let row of rows) {
+							row.hidden = row.cells[0].children[0].innerHTML.toLowerCase()
+									.indexOf(value) < 0;
+						}
+					} else {
+						for (let row of rows) {
+							row.hidden = false;
+						}
+					}
+				}
+
 				fetch("README.md").then(response => {
 					if (response.ok) {
 						response.text().then(text => {
-							var article = document.createElement("article");
-							article.innerHTML = marked.parse(text);
-							directoryHeading.after(article);
+							let description = document.createElement("details");
+							description.innerHTML = marked.parse(text);
+							description.open = true;
+							let summary = document.createElement("summary");
+							summary.innerHTML = "Description";
+							description.prepend(summary);
+							directoryHeading.after(description);
 						});
 					}
 				});
diff --git a/header.html b/header.html
index 2bb6306..5faf07a 100644
--- a/header.html
+++ b/header.html
@@ -32,6 +32,13 @@
 			h1 {
 				text-align: center
 			}
+			summary {
+				text-align: center;
+			}
+			#search-container hr {
+				margin-top: 10px;
+				margin-bottom: 20px;
+			}
 		</style>
 	</head>
 	<body data-theme="dark">
@@ -233,5 +240,14 @@
 		</div>
 		<div class="wrapper">
 			<main class="page-content">
+				<div id="search-container" hidden>
+					<hr />
+					<div class="search-article">
+						<label for="search-input" aria-hidden="true">
+							<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="rgba(128,128,128,0.8)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
+						</label>
+						<input type="search" id="search-input" placeholder="Filter the files" aria-label="Search">
+					</div>
+				</div>
 				<h1 id="directory" class="center">
 
