search

app/app.css

@@ -42,7 +42,7 @@ button {
   flex-shrink: 0;
 }
 button .icon {
-  vertical-align: top;
+  vertical-align: middle;
 }
 .long-line {
   white-space: nowrap;

app/css/app.less

@@ -40,7 +40,7 @@ button {
 	cursor: pointer;
 	flex-shrink: 0;
 
-	.icon { vertical-align: top; }
+	.icon { vertical-align: middle; }
 }
 
 .long-line {

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() {

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 = "";

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() {