From e0bbd1107be07b6f77e7eca19a335365a7be7aaf Mon Sep 17 00:00:00 2001
From: Ondrej Zara <ondrej.zara@gmail.com>
Date: Mon, 1 Apr 2019 15:16:39 +0200
Subject: [PATCH] search

---
 app/app.css          |  2 +-
 app/css/app.less     |  2 +-
 app/js/fs.js         | 12 ++++++++++--
 app/js/lib/search.js | 13 +++++++++++--
 app/js/library.js    | 13 +++++++++++--
 5 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/app/app.css b/app/app.css
index 4c07a19..b3442df 100644
--- a/app/app.css
+++ b/app/app.css
@@ -42,7 +42,7 @@ button {
   flex-shrink: 0;
 }
 button .icon {
-  vertical-align: top;
+  vertical-align: middle;
 }
 .long-line {
   white-space: nowrap;
diff --git a/app/css/app.less b/app/css/app.less
index 6c2a334..8eaa677 100644
--- a/app/css/app.less
+++ b/app/css/app.less
@@ -40,7 +40,7 @@ button {
 	cursor: pointer;
 	flex-shrink: 0;
 
-	.icon { vertical-align: top; }
+	.icon { vertical-align: middle; }
 }
 
 .long-line {
diff --git a/app/js/fs.js b/app/js/fs.js
index e1419bf..7d195a1 100644
--- a/app/js/fs.js
+++ b/app/js/fs.js
@@ -22,6 +22,7 @@ function buildHeader(path) {
 		button.addEventListener("click", e => list(path));
 	});
 
+	search.reset();
 	header.appendChild(search.getNode());
 }
 
@@ -30,11 +31,15 @@ function buildDirectory(data, parent) {
 	let name = path.split("/").pop();
 	let node = ui.group(ui.CTX_FS, name, path, parent);
 	node.addEventListener("click", e => list(path));
+	node.dataset.name = name;
 	return node;
 }
 
 function buildFile(data, parent) {
-	return ui.song(ui.CTX_FS, data, parent);
+	let node = ui.song(ui.CTX_FS, data, parent);
+	let name = data["file"].split("/").pop();
+	node.dataset.name = name;
+	return node;
 }
 
 function buildResults(results) {
@@ -52,7 +57,10 @@ async function list(path) {
 }
 
 function onSearch(e) {
-
+	Array.from(node.querySelectorAll("[data-name]")).forEach(node => {
+		let name = node.dataset.name;
+		node.style.display = (search.match(name) ? "" : "none");
+	});
 }
 
 export async function activate() {
diff --git a/app/js/lib/search.js b/app/js/lib/search.js
index a57d08b..070e099 100644
--- a/app/js/lib/search.js
+++ b/app/js/lib/search.js
@@ -18,16 +18,25 @@ export default class Search extends EventTarget {
 		this._node.addEventListener("click", e => {
 			if (e.target == this._input) { return; }
 			if (this._node.classList.contains(OPEN)) {
-				this.reset()
+				this.reset();
+				this.dispatchEvent(new Event("input"));	
 			} else {
 				this._node.classList.add(OPEN);
 			}
 		});
+
+		this._input.addEventListener("input", e => {
+			this.dispatchEvent(new Event("input"));
+		});
 	}
 
 	getNode() { return this._node; }
 
-	getValue() { return this._input.value; }
+	match(str) {
+		let q = normalize(this._input.value.trim());
+		if (!q) { return true; }
+		return normalize(str).split(" ").some(str => str.indexOf(q) == 0);
+	}
 
 	reset() {
 		this._input.value = "";
diff --git a/app/js/library.js b/app/js/library.js
index 9606d08..b5c4fa8 100644
--- a/app/js/library.js
+++ b/app/js/library.js
@@ -30,6 +30,7 @@ function buildHeader(filter) {
 		}
 	}
 
+	search.reset();
 	header.appendChild(search.getNode());
 }
 
@@ -37,6 +38,7 @@ function buildAlbum(album, filter, parent) {
 	let childFilter = Object.assign({}, filter, {"Album": album});
 	let node = ui.group(ui.CTX_LIBRARY, album, childFilter, parent);
 	node.addEventListener("click", e => listSongs(childFilter));
+	node.dataset.name = album;
 	return node;
 }
 
@@ -44,6 +46,7 @@ function buildArtist(artist, filter, parent) {
 	let childFilter = Object.assign({}, filter, {"Artist": artist});
 	let node = ui.group(ui.CTX_LIBRARY, artist, childFilter, parent);
 	node.addEventListener("click", e => listAlbums(childFilter));
+	node.dataset.name = artist;
 	return node;
 }
 
@@ -51,7 +54,10 @@ function buildSongs(songs, filter) {
 	let ul = node.querySelector("ul");
 	html.clear(ul);
 
-	songs.map(song => ui.song(ui.CTX_LIBRARY, song, ul));
+	songs.map(song => {
+		let node = ui.song(ui.CTX_LIBRARY, song, ul);
+		node.dataset.name = song["Title"];
+	});
 }
 
 function buildAlbums(albums, filter) {
@@ -87,7 +93,10 @@ async function listArtists(filter) {
 }
 
 function onSearch(e) {
-	
+	Array.from(node.querySelectorAll("[data-name]")).forEach(node => {
+		let name = node.dataset.name;
+		node.style.display = (search.match(name) ? "" : "none");
+	});
 }
 
 export async function activate() {