diff --git a/src/components/app/component.tag b/src/components/app/component.tag index bdf966d..f75c4b5 100644 --- a/src/components/app/component.tag +++ b/src/components/app/component.tag @@ -3,6 +3,16 @@ app fileset-browser script. - this.tags["fileset-browser"].on("click", () => { - console.log("Clicked!"); - }) \ No newline at end of file + 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); + } + }) + }); \ No newline at end of file diff --git a/src/components/fileset-browser/component.tag b/src/components/fileset-browser/component.tag index c782fe2..7590a51 100644 --- a/src/components/fileset-browser/component.tag +++ b/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"); - }); - }); - */ \ No newline at end of file + 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(); + }); + } + }); \ No newline at end of file diff --git a/src/filesystem/list-directory.js b/src/filesystem/list-directory.js index e32d4ea..29f0f4f 100644 --- a/src/filesystem/list-directory.js +++ b/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);