From c1c473708bfac29c678e67ebf6065a15b4215736 Mon Sep 17 00:00:00 2001
From: joshuaboud <joshuaboud@hotmail.com>
Date: Tue, 8 Jun 2021 14:54:58 -0300
Subject: [PATCH] add search bar to filter items in directory

---
 navigator/navigator.css  | 30 +++++++++++++++++++++---------
 navigator/navigator.html |  6 ++++--
 navigator/navigator.js   | 28 ++++++++++++++++++++++++----
 3 files changed, 49 insertions(+), 15 deletions(-)

diff --git a/navigator/navigator.css b/navigator/navigator.css
index b788032..f36ba8a 100644
--- a/navigator/navigator.css
+++ b/navigator/navigator.css
@@ -180,13 +180,33 @@ body::-webkit-scrollbar-thumb {
 	padding-bottom: 0;
 }
 
+.nav-header {
+	align-items: baseline;
+}
+
 input[type="text"] {
 	background-color: var(--container);
 	color: inherit;
-	flex-grow: 1;
 	padding: 0.25em 1em 0.25em 1em;
 	border: 1px solid var(--border);
 	border-radius: 4px;
+	min-width: 30px;
+}
+
+.navigation-bar {
+	flex-basis: 0;
+	flex-grow: 5;
+}
+
+.search-bar {
+	flex-basis: 0;
+	flex-grow: 2;
+}
+
+.search-bar + i {
+	position: relative;
+	right: 30px;
+	width: 0;
 }
 
 .inner-container {
@@ -280,14 +300,6 @@ input[type="text"] {
 	z-index: 10;
 }
 
-.contents-view-list > .list-view-top-spacer {
-	height: 30px;
-}
-
-.contents-view-grid > .list-view-top-spacer {
-	display: none;
-}
-
 .contents-view-list-header > div {
 	cursor: pointer;
 	position: relative;
diff --git a/navigator/navigator.html b/navigator/navigator.html
index b606fba..5df2ad9 100644
--- a/navigator/navigator.html
+++ b/navigator/navigator.html
@@ -37,7 +37,7 @@
 		</div>
 	</div>
 	<div class="flex-col outer-container">
-		<div class="flex-row">
+		<div class="flex-row nav-header">
 			<div class="nav-btn-group">
 				<button class="pf-c-button pf-m-secondary" id="nav-back-btn" title="Back"><i class="fas fa-arrow-left"></i></button>
 				<div class="horizontal-spacer"></div>
@@ -54,6 +54,9 @@
 				</select>
 			</datalist>
 			<div class="horizontal-spacer"></div>
+			<input type="text" autocomplete="off" class="search-bar" id="search-bar" title="Search in Directory" placeholder="Search in Directory"></input>
+			<i class="fas fa-search"></i>
+			<div class="horizontal-spacer"></div>
 			<div class="nav-btn-group">
 				<button class="pf-c-button pf-m-primary" id="nav-mkdir-btn" title="New Directory"><i class="fas fa-folder-plus"></i></button>
 				<div class="horizontal-spacer"></div>
@@ -73,7 +76,6 @@
 					<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
 					<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
 				</div>
-				<div class="nav-item list-view-top-spacer"></div>
 				<div class="nav-notifications" id="nav-notifications">
 				</div>
 			</div>
diff --git a/navigator/navigator.js b/navigator/navigator.js
index b3fb845..a54a3de 100644
--- a/navigator/navigator.js
+++ b/navigator/navigator.js
@@ -309,7 +309,11 @@ class NavEntry {
 	}
 
 	show() {
-		document.getElementById("nav-contents-view").appendChild(this.dom_element);
+		this.dom_element.style.display = "flex";
+	}
+
+	hide() {
+		this.dom_element.style.display = "none";
 	}
 
 	/**
@@ -1460,9 +1464,10 @@ class NavWindow {
 				num_files++;
 				bytes_sum += file.stat["size"];
 			}
-			if(!file.is_hidden_file || this.show_hidden)
-				file.show();
-			this.entries.push(file);
+			if(!file.is_hidden_file || this.show_hidden) {
+				this.window.appendChild(file.dom_element);
+				this.entries.push(file);
+			}
 			file.context_menu_ref = this.context_menu;
 		});
 		document.getElementById("pwd").value = this.pwd().path_str();
@@ -2078,6 +2083,16 @@ class NavWindow {
 		
 		localStorage.setItem("item-display", this.item_display);
 	}
+
+	search_filter(event) {
+		var search_name = event.target.value;
+		this.entries.forEach((entry) => {
+			if (entry.filename().toLowerCase().startsWith(search_name.toLowerCase()))
+				entry.show();
+			else
+				entry.hide();
+		});
+	}
 }
 
 let nav_window = new NavWindow();
@@ -2111,6 +2126,11 @@ function set_up_buttons() {
 			nav_window.refresh();
 		});
 	}
+	document.getElementById("search-bar").addEventListener("input", nav_window.search_filter.bind(nav_window));
+	document.getElementById("search-bar").addEventListener("keydown", (e) => {
+		if (e.keyCode === 13)
+			nav_window.search_filter(e);
+	});
 }
 
 async function main() {