Initial work on fileset-browser component

package.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "bhttp": "^1.2.1",
     "bluebird": "^3.3.4",
+    "byte-size": "^2.0.0",
     "chalk": "^1.1.3",
     "document-ready-promise": "^3.0.1",
     "electron-prebuilt": "^0.37.5",
@@ -28,6 +29,7 @@
     "gulp-sass": "^2.2.0",
     "ia-headers": "^1.0.0",
     "jquery": "^2.2.3",
+    "natural-sort": "^1.0.0",
     "rfr": "^1.2.3",
     "riot": "^2.3.18",
     "uuid": "^2.0.1",

src/components/fileset-browser/component.tag

@@ -1,16 +1,58 @@
 fileset-browser
-	strong Fileset browser goes here
+	.browser
+		.entry(each="{entry in entries}" class="{folder: entry.type === 'folder'}")
+			span.filename {entry.name}
+			span.size(hide="{entry.type === 'folder'}") {entry.size}
 	
-	style(scoped).
-		strong {
-			color: red;
+	style(scoped, type="scss").
+		.browser {
+			background-color: #e8e8e8;
+			border: 1px solid gray;
+			
+			.entry {
+				font-size: 14px;
+				background: linear-gradient(to bottom, #efefef 0%,#e5e5e5 100%);
+				padding: 4px 6px;
+				
+				&.folder {
+					background: linear-gradient(to bottom, #e2e2e2 0%,#d4d4d4 100%);
+				}
+				
+				.filename {
+					font-weight: 600;
+				}
+				
+				.size {
+					float: right;
+					color: gray;
+				}
+			}
 		}
 		
 	script.
-		let $ = require("jquery")
+		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");
 			});
-		});
+		});
+		*/

src/filesystem/list-directory.js

@@ -0,0 +1,84 @@
+'use strict';
+
+const Promise = require("bluebird");
+const fs = Promise.promisifyAll(require("fs"));
+const path = require("path");
+const naturalSort = require("natural-sort");
+
+function statComplete(target) {
+	return Promise.try(() => {
+		return Promise.try(() => {
+			return fs.lstatAsync(target);
+		}).then((stats) => {
+			if (stats.isSymbolicLink()) {
+				return Promise.try(() => {
+					return fs.statAsync(target);
+				}).then((targetStats) => {
+					return {
+						stats: targetStats,
+						linkStats: stats
+					}
+				});
+			} else {
+				return {
+					stats: stats
+				}
+			}
+		});
+	})
+}
+
+function getType(stats) {
+	if (stats.isSymbolicLink()) {
+		return "link";
+	} else if (stats.isDirectory()) {
+		return "folder";
+	} else if (stats.isFile()) {
+		return "file";
+	} else {
+		return "other";
+	}
+}
+
+module.exports = function(basePath) {
+	return Promise.try(() => {
+		return fs.readdirAsync(basePath);
+	}).map((entry) => {
+		let fullPath = path.join(basePath, entry);
+
+		return Promise.try(() => {
+			return statComplete(fullPath);
+		}).then((stats) => {
+			let type, targetType;
+
+			if (stats.linkStats != null) {
+				type = "link";
+				targetType = getType(stats.stats);
+			} else {
+				type = getType(stats.stats);
+				targetType = type;
+			}
+
+			return {
+				type: type,
+				targetType: targetType,
+				name: entry,
+				path: fullPath,
+				modified: stats.stats.mtime,
+				size: stats.stats.size
+			}
+		})
+	}).then((entries) => {
+		let sorter = naturalSort();
+
+		return entries.sort((entryA, entryB) => {
+			if (entryA.targetType == "folder" && entryB.targetType != "folder") {
+				return -1;
+			} else if (entryB.targetType == "folder" && entryA.targetType != "folder") {
+				return 1;
+			} else {
+				return sorter(entryA.name, entryB.name);
+			}
+		});
+	});
+}