diff options
Diffstat (limited to 'vfs/vfs.ts')
| -rw-r--r-- | vfs/vfs.ts | 180 |
1 files changed, 56 insertions, 124 deletions
@@ -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 |