Add basic fileset-browser navigation

src/components/app/component.tag

@@ -3,6 +3,16 @@ app
 	fileset-browser
 	
 	script.
-		this.tags["fileset-browser"].on("click", () => {
-			console.log("Clicked!");
-		})
+		const path = require("path");
+		
+		this.on("mount", () => {
+			let browser = this.tags["fileset-browser"];
+			
+			browser.navigate(path.join(__dirname, "../../../"));
+			
+			browser.on("clickEntry", function(entry) {
+				if (entry.type === "folder") {
+					browser.navigate(entry.path);
+				}
+			})
+		});

src/components/fileset-browser/component.tag

@@ -1,6 +1,6 @@
 fileset-browser
 	.browser
-		.entry(each="{entry in entries}" class="{folder: entry.type === 'folder'}")
+		.entry(each="{entry in entries}", class="{folder: entry.type === 'folder'}", onclick="{handleClickEntry}")
 			span.filename {entry.name}
 			span.size(hide="{entry.type === 'folder'}") {entry.size}
 	
@@ -13,9 +13,18 @@ fileset-browser
 				font-size: 14px;
 				background: linear-gradient(to bottom, #efefef 0%,#e5e5e5 100%);
 				padding: 4px 6px;
+				cursor: default;
+				
+				&:hover {
+					background: linear-gradient(to bottom, #efefef 0%,#d6d6d6 100%);
+				}
 				
 				&.folder {
 					background: linear-gradient(to bottom, #e2e2e2 0%,#d4d4d4 100%);
+					
+					&:hover {
+						background: linear-gradient(to bottom, #e2e2e2 0%,#c4c4c4 100%);
+					}
 				}
 				
 				.filename {
@@ -31,28 +40,31 @@ fileset-browser
 		
 	script.
 		const $ = require("jquery");
-		const path = require("path");
 		const byteSize = require("byte-size");
 		const xtend = require("xtend");
 		const rfr = require("rfr");
 		
 		const listDirectory = rfr("lib/filesystem/list-directory");
-		
-		Promise.try(() => {
-			return listDirectory(path.join(__dirname, "../../../"));
-		}).map((entry) => {
-			return xtend(entry, {
-				size: byteSize(entry.size, {units: "iec"})
-			});
-		}).then((entries) => {
-			this.entries = entries;
-			this.update();
-		});
-		
-		/*
-		this.on("mount", () => {
-			$("strong", this.root).on("click", () => {
-				this.trigger("click");
-			});
-		});
-		*/
+		console.log(this);
+		Object.assign(this, {
+			entries: [],
+			
+			handleClickEntry: (event) => {
+				this.trigger("clickEntry", event.item.entry);
+			},
+			
+			navigate: function(path) {
+				return Promise.try(() => {
+					return listDirectory(path, {
+						includeParent: true
+					});
+				}).map((entry) => {
+					return xtend(entry, {
+						size: byteSize(entry.size, {units: "iec"})
+					});
+				}).tap((entries) => {
+					this.entries = entries;
+					this.update();
+				});
+			}
+		});

src/filesystem/list-directory.js

@@ -40,9 +40,15 @@ function getType(stats) {
 	}
 }
 
-module.exports = function(basePath) {
+module.exports = function(basePath, options = {}) {
 	return Promise.try(() => {
 		return fs.readdirAsync(basePath);
+	}).then((entries) => {
+		if (options.includeParent) {
+			entries.unshift("..");
+		}
+
+		return entries;
 	}).map((entry) => {
 		let fullPath = path.join(basePath, entry);