From c4904eea378e5a51f85f90ef63ea103552917a82 Mon Sep 17 00:00:00 2001
From: Michael Roitzsch <reactorcontrol@icloud.com>
Date: Sun, 18 Oct 2020 23:17:09 +0200
Subject: [PATCH] button to clear filter

---
 index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 81c2708..9bc5c84 100644
--- a/index.html
+++ b/index.html
@@ -73,9 +73,14 @@ document.addEventListener("DOMContentLoaded", event => {
 		document.getElementById("filter").addEventListener("change", event => {
 			event.target.select();
 		});
-		// place cursor in filter control
-		document.getElementById("filter").focus();
-		update("");
+		// clear filter button
+		document.getElementById("clear").addEventListener("click", event => {
+			document.getElementById("filter").value = "";
+			document.getElementById("filter").focus();
+			update("");
+		});
+		// initialize filter control
+		document.getElementById("clear").click();
 	});
 });
 </script>
@@ -96,6 +101,13 @@ document.addEventListener("DOMContentLoaded", event => {
 	<p class="my-0">Collected knowledge about the internals of Apple’s platforms.</p>
 	<p class="my-0">Sorted by keyword, abbreviation, or codename.</p>
 	<p>Feel free to contribute on <a href="https://github.com/mroi/apple-internals">GitHub</a>.</p>
-	<input id="filter" type="text" class="form-control" placeholder="Filter" style="max-width:30em">
+	<div class="input-group" style="max-width:30em">
+		<input id="filter" type="text" class="form-control" placeholder="Filter">
+		<div id="clear" class="input-group-text">
+			<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x-circle-fill" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+			  <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
+			</svg>
+		</div>
+	</div>
 	<div id="content" class="mt-3">
 </body>