aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorShulhan <ms@kilabit.info>2021-08-29 13:57:33 +0700
committerShulhan <ms@kilabit.info>2021-08-29 13:57:33 +0700
commit1364ab29de697993bc34832cf77d4e99ee037223 (patch)
treeb8dcb3e89020c736d02a04277bad0a16933e5224
parent7940feda7d50c404fb245b645c8261d6cb4dd768 (diff)
downloadpakakeh.ts-1364ab29de697993bc34832cf77d4e99ee037223.tar.xz
vfs: simplify the handlers on WuiVfsOptions
Previously, the WuiVfsOptions contains two handlers: ListNodes to retrieve list of files and OnClickNode for triggering changes when user click a path or item in the list. This changes simplify it into single handler: Open, which accept path and boolean is_dir.
-rw-r--r--vfs/example.html36
-rw-r--r--vfs/vfs.d.ts22
-rw-r--r--vfs/vfs.js190
-rw-r--r--vfs/vfs.ts180
4 files changed, 153 insertions, 275 deletions
diff --git a/vfs/example.html b/vfs/example.html
index 3d8a772..1ebc1b4 100644
--- a/vfs/example.html
+++ b/vfs/example.html
@@ -9,7 +9,7 @@
<script>
var exports = {}
- var wui_vfs;
+ var wui_vfs
</script>
<script src="vfs.js"></script>
<script>
@@ -86,38 +86,28 @@
async function main() {
let opts = {
id: "vfs",
- ListNodes: doListNodes,
- OnClickNode: OnClickNode,
+ Open: Open,
}
- let res = await NewWuiVfs(opts)
- if (res.code != 200) {
- console.error(res)
- return
- }
- wui_vfs = res.data
+ wui_vfs = new WuiVfs(opts)
+ wui_vfs.OpenDir("/")
}
- function doListNodes() {
+ function Open(path, is_dir) {
+ console.log("Open:", path, is_dir)
let res = {
code: 200,
- data: dummyfs,
}
- return res
- }
- function OnClickNode(path, is_dir) {
if (is_dir) {
- return
+ res.data = dummyfs[path]
+ return res
}
- let res = {
- code: 200,
- data: {
- name: "",
- path: path,
- content: "",
- },
+ res.data = {
+ name: "",
+ path: path,
+ content: "",
}
switch (path) {
@@ -142,7 +132,7 @@
res.message = "path not found"
}
- console.log(res)
+ console.log("Open:", res)
}
</script>
</body>
diff --git a/vfs/vfs.d.ts b/vfs/vfs.d.ts
index 706ccc8..9a9ea22 100644
--- a/vfs/vfs.d.ts
+++ b/vfs/vfs.d.ts
@@ -12,18 +12,26 @@ export interface WuiVfsNodeInterface {
}
export interface WuiVfsOptions {
id: string;
- ListNodes: () => WuiResponseInterface;
- OnClickNode(path: string, is_dir: boolean): void;
+ Open(path: string, is_dir: boolean): WuiResponseInterface;
}
-export declare function NewWuiVfs(opts: WuiVfsOptions): Promise<WuiResponseInterface>;
export declare class WuiVfs {
opts: WuiVfsOptions;
private el;
private com_path;
private com_list;
- private path_node;
constructor(opts: WuiVfsOptions);
- init(): Promise<WuiResponseInterface>;
- private open;
- OpenPath(this: WuiVfs, path: string): void;
+ OnClickNode(node: WuiVfsNode): void;
+ OpenDir(path: string): Promise<void>;
}
+declare class WuiVfsNode implements WuiVfsNodeInterface {
+ path: string;
+ name: string;
+ mod_time_epoch: number;
+ mod_time_rfc3339: string;
+ size: number;
+ mode: string;
+ is_dir: boolean;
+ childs: WuiVfsNode[];
+ constructor(opts: WuiVfsNodeInterface);
+}
+export {};
diff --git a/vfs/vfs.js b/vfs/vfs.js
index 25945b9..e234db4 100644
--- a/vfs/vfs.js
+++ b/vfs/vfs.js
@@ -39,105 +39,62 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
}
};
exports.__esModule = true;
-exports.WuiVfs = exports.NewWuiVfs = void 0;
-function NewWuiVfs(opts) {
- return __awaiter(this, void 0, void 0, function () {
- var vfs, res;
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0:
- vfs = new WuiVfs(opts);
- return [4 /*yield*/, vfs.init()];
- case 1:
- res = _a.sent();
- if (res.code != 200) {
- return [2 /*return*/, res];
- }
- res.data = vfs;
- return [2 /*return*/, res];
- }
- });
- });
-}
-exports.NewWuiVfs = NewWuiVfs;
+exports.WuiVfs = void 0;
var WuiVfs = /** @class */ (function () {
function WuiVfs(opts) {
+ var _this = this;
+ this.opts = opts;
this.opts = opts;
- this.path_node = {};
var el = document.getElementById(opts.id);
if (!el) {
console.error("WuiVfs: element id", opts.id, "not found");
return;
}
this.el = el;
+ this.com_path = new WuiVfsPath(function (path) {
+ _this.OpenDir(path);
+ });
+ this.el.appendChild(this.com_path.el);
+ this.com_list = new WuiVfsList(function (node) {
+ _this.OnClickNode(node);
+ });
+ this.el.appendChild(this.com_list.el);
}
- //
- // (0) Fetch the list of nodes from remote server and store it in path_node.
- // (1) Create the WuiVfsPath
- // (2) Create the WuiVfsList
- // (3) Open the root "/"
- //
- WuiVfs.prototype.init = function () {
+ // OnClickNode is a handler that will be called when a node is clicked
+ // inside the WuiVfsList.
+ WuiVfs.prototype.OnClickNode = function (node) {
+ if (!node.is_dir) {
+ this.opts.Open(node.path, false);
+ return;
+ }
+ this.OpenDir(node.path);
+ };
+ // OpenDir is a handler that will be called when a path is clicked
+ // inside the WuiVfsPath.
+ WuiVfs.prototype.OpenDir = function (path) {
return __awaiter(this, void 0, void 0, function () {
- var res, res_path_node, key, value, node;
- var _this = this;
+ var res, node;
return __generator(this, function (_a) {
switch (_a.label) {
- case 0: return [4 /*yield*/, this.opts.ListNodes()];
+ case 0: return [4 /*yield*/, this.opts.Open(path, true)];
case 1:
res = _a.sent();
if (res.code != 200) {
- return [2 /*return*/, res];
- }
- res_path_node = res.data;
- for (key in res_path_node) {
- value = res_path_node[key];
- node = new WuiVfsNode(value, function (node) {
- if (_this.opts.OnClickNode) {
- _this.opts.OnClickNode(node.path, node.is_dir);
- }
- if (node.is_dir) {
- _this.open(node);
- }
- });
- this.path_node[key] = node;
+ return [2 /*return*/];
}
- this.el.innerHTML = "";
- // (1)
- this.com_path = new WuiVfsPath(function (path) {
- _this.OpenPath(path);
- });
- this.el.appendChild(this.com_path.el);
- // (2)
- this.com_list = new WuiVfsList();
- this.el.appendChild(this.com_list.el);
- // (3)
- this.open(this.path_node["/"]);
- return [2 /*return*/, res];
+ node = new WuiVfsNode(res.data);
+ this.com_path.Open(node);
+ this.com_list.Open(node);
+ return [2 /*return*/];
}
});
});
};
- WuiVfs.prototype.open = function (node) {
- this.com_path.Open(node);
- this.com_list.Open(node);
- };
- // OpenPath is a handler that will be called when the directory name on
- // top of UI clicked.
- WuiVfs.prototype.OpenPath = function (path) {
- var node = this.path_node[path];
- if (!node) {
- console.error("WuiVfs: OpenPath: invalid path: ", path);
- return;
- }
- this.open(node);
- };
return WuiVfs;
}());
exports.WuiVfs = WuiVfs;
var WuiVfsNode = /** @class */ (function () {
- function WuiVfsNode(opts, onClick) {
- var _this = this;
+ function WuiVfsNode(opts) {
this.path = opts.path || "";
this.name = opts.name || "";
this.mod_time_epoch = opts.mod_time_epoch || 0;
@@ -146,57 +103,54 @@ var WuiVfsNode = /** @class */ (function () {
this.mode = opts.mode || "";
this.is_dir = opts.is_dir || false;
this.childs = [];
- if (opts.childs !== undefined) {
+ if (opts.childs) {
for (var _i = 0, _a = opts.childs; _i < _a.length; _i++) {
var c = _a[_i];
- this.childs.push(new WuiVfsNode(c, onClick));
+ this.childs.push(new WuiVfsNode(c));
}
}
- this.el = document.createElement("div");
- this.el.style.padding = "1em";
- this.el.style.cursor = "pointer";
- this.el.innerHTML = this.name;
- if (this.is_dir) {
- this.el.style.backgroundColor = "cornsilk";
- }
- this.el.onclick = function (event) {
- onClick(_this);
- };
- this.el.onmouseout = function (event) {
- _this.onMouseOut(_this);
- };
- this.el.onmouseover = function (event) {
- _this.onMouseOver(_this);
- };
}
- WuiVfsNode.prototype.onMouseOut = function (t) {
- if (this.is_dir) {
- this.el.style.backgroundColor = "cornsilk";
- }
- else {
- t.el.style.backgroundColor = "white";
- }
- };
- WuiVfsNode.prototype.onMouseOver = function (t) {
- t.el.style.backgroundColor = "aliceblue";
- };
return WuiVfsNode;
}());
var WuiVfsList = /** @class */ (function () {
- function WuiVfsList() {
+ function WuiVfsList(onClick) {
+ this.onClick = onClick;
this.el = document.createElement("div");
this.el.style.borderWidth = "1px";
this.el.style.borderStyle = "solid";
this.el.style.borderColor = "silver";
}
WuiVfsList.prototype.Open = function (node) {
+ var _this = this;
this.el.innerHTML = "";
- if (node.childs === undefined) {
- return;
- }
+ var _loop_1 = function (c) {
+ var el = document.createElement("div");
+ el.style.padding = "1em";
+ el.style.cursor = "pointer";
+ el.innerHTML = c.name;
+ if (c.is_dir) {
+ el.style.backgroundColor = "cornsilk";
+ }
+ el.onclick = function (ev) {
+ _this.onClick(c);
+ };
+ el.onmouseout = function (event) {
+ if (c.is_dir) {
+ el.style.backgroundColor = "cornsilk";
+ }
+ else {
+ el.style.backgroundColor = "white";
+ }
+ };
+ el.onmouseover = function (event) {
+ el.style.backgroundColor = "aliceblue";
+ };
+ this_1.el.appendChild(el);
+ };
+ var this_1 = this;
for (var _i = 0, _a = node.childs; _i < _a.length; _i++) {
var c = _a[_i];
- this.el.appendChild(c.el);
+ _loop_1(c);
}
};
return WuiVfsList;
@@ -221,7 +175,7 @@ var WuiVfsPath = /** @class */ (function () {
else {
paths = node.path.split("/");
}
- var _loop_1 = function (x) {
+ var _loop_2 = function (x) {
var full_path = "";
var p = "";
if (x == 0) {
@@ -241,24 +195,18 @@ var WuiVfsPath = /** @class */ (function () {
_this.onClick(full_path);
};
crumb.onmouseout = function (event) {
- _this.onMouseOut(crumb, event);
+ crumb.style.backgroundColor = "white";
};
crumb.onmouseover = function (event) {
- _this.onMouseOver(crumb, event);
+ crumb.style.backgroundColor = "aliceblue";
};
- this_1.el.appendChild(crumb);
+ this_2.el.appendChild(crumb);
};
- var this_1 = this;
+ var this_2 = this;
for (var x = 0; x < paths.length; x++) {
- _loop_1(x);
+ _loop_2(x);
}
};
- WuiVfsPath.prototype.onMouseOut = function (crumb, event) {
- crumb.style.backgroundColor = "white";
- };
- WuiVfsPath.prototype.onMouseOver = function (crumb, event) {
- crumb.style.backgroundColor = "aliceblue";
- };
return WuiVfsPath;
}());
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsidmZzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxrRUFBa0U7QUFDbEUseUVBQXlFO0FBQ3pFLDZCQUE2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBMkI3QixTQUFzQixTQUFTLENBQUMsSUFBbUI7Ozs7OztvQkFDOUMsR0FBRyxHQUFHLElBQUksTUFBTSxDQUFDLElBQUksQ0FBQyxDQUFBO29CQUNoQixxQkFBTSxHQUFHLENBQUMsSUFBSSxFQUFFLEVBQUE7O29CQUF0QixHQUFHLEdBQUcsU0FBZ0I7b0JBQzFCLElBQUksR0FBRyxDQUFDLElBQUksSUFBSSxHQUFHLEVBQUU7d0JBQ3BCLHNCQUFPLEdBQUcsRUFBQTtxQkFDVjtvQkFDRCxHQUFHLENBQUMsSUFBSSxHQUFHLEdBQUcsQ0FBQTtvQkFDZCxzQkFBTyxHQUFHLEVBQUE7Ozs7Q0FDVjtBQVJELDhCQVFDO0FBRUQ7SUFNQyxnQkFBbUIsSUFBbUI7UUFBbkIsU0FBSSxHQUFKLElBQUksQ0FBZTtRQUY5QixjQUFTLEdBQWdCLEVBQUUsQ0FBQTtRQUdsQyxJQUFJLEVBQUUsR0FBRyxRQUFRLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsQ0FBQTtRQUN6QyxJQUFJLENBQUMsRUFBRSxFQUFFO1lBQ1IsT0FBTyxDQUFDLEtBQUssQ0FBQyxvQkFBb0IsRUFBRSxJQUFJLENBQUMsRUFBRSxFQUFFLFdBQVcsQ0FBQyxDQUFBO1lBQ3pELE9BQU07U0FDTjtRQUNELElBQUksQ0FBQyxFQUFFLEdBQUcsRUFBRSxDQUFBO0lBQ2IsQ0FBQztJQUVELEVBQUU7SUFDRiw0RUFBNEU7SUFDNUUsNEJBQTRCO0lBQzVCLDRCQUE0QjtJQUM1Qix3QkFBd0I7SUFDeEIsRUFBRTtJQUNJLHFCQUFJLEdBQVY7Ozs7Ozs0QkFFVyxxQkFBTSxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsRUFBRSxFQUFBOzt3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 \ No newline at end of file
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmZzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsidmZzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxrRUFBa0U7QUFDbEUseUVBQXlFO0FBQ3pFLDZCQUE2Qjs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBeUI3QjtJQUtDLGdCQUFtQixJQUFtQjtRQUF0QyxpQkFtQkM7UUFuQmtCLFNBQUksR0FBSixJQUFJLENBQWU7UUFDckMsSUFBSSxDQUFDLElBQUksR0FBRyxJQUFJLENBQUE7UUFFaEIsSUFBSSxFQUFFLEdBQUcsUUFBUSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUE7UUFDekMsSUFBSSxDQUFDLEVBQUUsRUFBRTtZQUNSLE9BQU8sQ0FBQyxLQUFLLENBQUMsb0JBQW9CLEVBQUUsSUFBSSxDQUFDLEVBQUUsRUFBRSxXQUFXLENBQUMsQ0FBQTtZQUN6RCxPQUFNO1NBQ047UUFDRCxJQUFJLENBQUMsRUFBRSxHQUFHLEVBQUUsQ0FBQTtRQUVaLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxVQUFVLENBQUMsVUFBQyxJQUFZO1lBQzNDLEtBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUE7UUFDbkIsQ0FBQyxDQUFDLENBQUE7UUFDRixJQUFJLENBQUMsRUFBRSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxDQUFBO1FBRXJDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxVQUFVLENBQUMsVUFBQyxJQUFnQjtZQUMvQyxLQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxDQUFBO1FBQ3ZCLENBQUMsQ0FBQyxDQUFBO1FBQ0YsSUFBSSxDQUFDLEVBQUUsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQTtJQUN0QyxDQUFDO0lBRUQsc0VBQXNFO0lBQ3RFLHlCQUF5QjtJQUN6Qiw0QkFBVyxHQUFY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 \ No newline at end of file
diff --git a/vfs/vfs.ts b/vfs/vfs.ts
index 331a22b..e5d1f44 100644
--- a/vfs/vfs.ts
+++ b/vfs/vfs.ts
@@ -20,97 +20,57 @@ export interface WuiVfsNodeInterface {
export interface WuiVfsOptions {
id: string
- ListNodes: () => WuiResponseInterface
-
- // OnClickNode define an handler that will be called everytime a node is
- // clicked. The is_dir will be true, if the node is a directory.
- OnClickNode(path: string, is_dir: boolean): void
-}
-
-export async function NewWuiVfs(opts: WuiVfsOptions): Promise<WuiResponseInterface> {
- let vfs = new WuiVfs(opts)
- let res = await vfs.init()
- if (res.code != 200) {
- return res
- }
- res.data = vfs
- return res
+ // Open define an handler that will be called when a directory or a file
+ // is clicked from the WuiVfsPath or WuiVfsList.
+ Open(path: string, is_dir: boolean): WuiResponseInterface
}
export class WuiVfs {
private el!: HTMLElement
private com_path!: WuiVfsPath
private com_list!: WuiVfsList
- private path_node: WuiPathNode = {}
constructor(public opts: WuiVfsOptions) {
+ this.opts = opts
+
let el = document.getElementById(opts.id)
if (!el) {
console.error("WuiVfs: element id", opts.id, "not found")
return
}
this.el = el
- }
-
- //
- // (0) Fetch the list of nodes from remote server and store it in path_node.
- // (1) Create the WuiVfsPath
- // (2) Create the WuiVfsList
- // (3) Open the root "/"
- //
- async init(): Promise<WuiResponseInterface> {
- // (0)
- let res = await this.opts.ListNodes()
- if (res.code != 200) {
- return res
- }
-
- let res_path_node = res.data as WuiPathNodeInterface
- for (const key in res_path_node) {
- const value = res_path_node[key] as WuiVfsNodeInterface
- const node = new WuiVfsNode(value, (node: WuiVfsNode) => {
- if (this.opts.OnClickNode) {
- this.opts.OnClickNode(node.path, node.is_dir)
- }
- if (node.is_dir) {
- this.open(node)
- }
- })
- this.path_node[key] = node
- }
-
- this.el.innerHTML = ""
- // (1)
this.com_path = new WuiVfsPath((path: string) => {
- this.OpenPath(path)
+ this.OpenDir(path)
})
this.el.appendChild(this.com_path.el)
- // (2)
- this.com_list = new WuiVfsList()
+ this.com_list = new WuiVfsList((node: WuiVfsNode) => {
+ this.OnClickNode(node)
+ })
this.el.appendChild(this.com_list.el)
-
- // (3)
- this.open(this.path_node["/"])
-
- return res
}
- private open(node: WuiVfsNode) {
- this.com_path.Open(node)
- this.com_list.Open(node)
+ // OnClickNode is a handler that will be called when a node is clicked
+ // inside the WuiVfsList.
+ OnClickNode(node: WuiVfsNode): void {
+ if (!node.is_dir) {
+ this.opts.Open(node.path, false)
+ return
+ }
+ this.OpenDir(node.path)
}
- // OpenPath is a handler that will be called when the directory name on
- // top of UI clicked.
- OpenPath(this: WuiVfs, path: string) {
- const node = this.path_node[path]
- if (!node) {
- console.error("WuiVfs: OpenPath: invalid path: ", path)
+ // OpenDir is a handler that will be called when a path is clicked
+ // inside the WuiVfsPath.
+ async OpenDir(path: string): Promise<void> {
+ let res = await this.opts.Open(path, true)
+ if (res.code != 200) {
return
}
- this.open(node)
+ let node = new WuiVfsNode(res.data as WuiVfsNodeInterface)
+ this.com_path.Open(node)
+ this.com_list.Open(node)
}
}
@@ -124,9 +84,7 @@ class WuiVfsNode implements WuiVfsNodeInterface {
is_dir: boolean
childs: WuiVfsNode[]
- el: HTMLElement
-
- constructor(opts: WuiVfsNodeInterface, onClick: NodeClickHandler) {
+ constructor(opts: WuiVfsNodeInterface) {
this.path = opts.path || ""
this.name = opts.name || ""
this.mod_time_epoch = opts.mod_time_epoch || 0
@@ -136,48 +94,18 @@ class WuiVfsNode implements WuiVfsNodeInterface {
this.is_dir = opts.is_dir || false
this.childs = []
- if (opts.childs !== undefined) {
+ if (opts.childs) {
for (let c of opts.childs) {
- this.childs.push(new WuiVfsNode(c, onClick))
+ this.childs.push(new WuiVfsNode(c))
}
}
-
- this.el = document.createElement("div")
- this.el.style.padding = "1em"
- this.el.style.cursor = "pointer"
- this.el.innerHTML = this.name
-
- if (this.is_dir) {
- this.el.style.backgroundColor = "cornsilk"
- }
-
- this.el.onclick = (event) => {
- onClick(this)
- }
- this.el.onmouseout = (event) => {
- this.onMouseOut(this)
- }
- this.el.onmouseover = (event) => {
- this.onMouseOver(this)
- }
- }
-
- onMouseOut(t: WuiVfsNode) {
- if (this.is_dir) {
- this.el.style.backgroundColor = "cornsilk"
- } else {
- t.el.style.backgroundColor = "white"
- }
- }
- onMouseOver(t: WuiVfsNode) {
- t.el.style.backgroundColor = "aliceblue"
}
}
class WuiVfsList {
el: HTMLElement
- constructor() {
+ constructor(public onClick: NodeClickHandler) {
this.el = document.createElement("div")
this.el.style.borderWidth = "1px"
this.el.style.borderStyle = "solid"
@@ -187,12 +115,31 @@ class WuiVfsList {
Open(node: WuiVfsNode) {
this.el.innerHTML = ""
- if (node.childs === undefined) {
- return
- }
-
for (let c of node.childs) {
- this.el.appendChild(c.el)
+ let el = document.createElement("div")
+ el.style.padding = "1em"
+ el.style.cursor = "pointer"
+ el.innerHTML = c.name
+
+ if (c.is_dir) {
+ el.style.backgroundColor = "cornsilk"
+ }
+
+ el.onclick = (ev: MouseEvent) => {
+ this.onClick(c)
+ }
+ el.onmouseout = (event) => {
+ if (c.is_dir) {
+ el.style.backgroundColor = "cornsilk"
+ } else {
+ el.style.backgroundColor = "white"
+ }
+ }
+ el.onmouseover = (event) => {
+ el.style.backgroundColor = "aliceblue"
+ }
+
+ this.el.appendChild(el)
}
}
}
@@ -244,31 +191,16 @@ class WuiVfsPath {
this.onClick(full_path)
}
crumb.onmouseout = (event) => {
- this.onMouseOut(crumb, event)
+ crumb.style.backgroundColor = "white"
}
crumb.onmouseover = (event) => {
- this.onMouseOver(crumb, event)
+ crumb.style.backgroundColor = "aliceblue"
}
this.el.appendChild(crumb)
}
}
-
- private onMouseOut(crumb: HTMLElement, event: MouseEvent) {
- crumb.style.backgroundColor = "white"
- }
- private onMouseOver(crumb: HTMLElement, event: MouseEvent) {
- crumb.style.backgroundColor = "aliceblue"
- }
-}
-
-type WuiPathNode = {
- [key: string]: WuiVfsNode
}
-type WuiPathNodeInterface = {
- [key: string]: WuiVfsNodeInterface
-}
-
-type NodeClickHandler = (node: WuiVfsNode) => void
type PathClickHandler = (path: string) => void
+type NodeClickHandler = (node: WuiVfsNode) => void