vfs: add function "filter"

The filter function filter and display the list of node by its name.

1 files changed, 25 insertions, 3 deletions

diff --git a/vfs/vfs.ts b/vfs/vfs.ts
index 20491e9..d092a3e 100644
--- a/vfs/vfs.ts
+++ b/vfs/vfs.ts
@@ -39,8 +39,6 @@ export class WuiVfs {
   private com_list!: WuiVfsList;
 
   constructor(public opts: WuiVfsOptions) {
-    this.opts = opts;
-
     const el = document.getElementById(opts.id);
     if (!el) {
       console.error("WuiVfs: element id", opts.id, "not found");
@@ -59,6 +57,11 @@ export class WuiVfs {
     this.el.appendChild(this.com_list.el);
   }
 
+  // filter the VFS list based on text value.
+  filter(text: string) {
+    this.com_list.filter(text);
+  }
+
   // openNode is a handler that will be called when a node is clicked
   // inside the WuiVfsList.
   openNode(node: WuiVfsNodeInterface): void {
@@ -99,9 +102,27 @@ class WuiVfsList {
     this.el.style.borderColor = "silver";
   }
 
+  // filter re-render the list by including only the node that have name
+  // match with "text".
+  filter(text: string) {
+    const regexp = new RegExp(text, "i");
+
+    for (const elChild of this.el.children) {
+      if (regexp.test(elChild.innerHTML)) {
+        elChild.removeAttribute("hidden");
+      } else {
+        elChild.setAttribute("hidden", "true");
+      }
+    }
+  }
+
   open(node: WuiVfsNodeInterface) {
     this.node = node;
     this.el.innerHTML = "";
+
+    if (!this.node) {
+      return;
+    }
     if (!this.node.childs) {
       return;
     }
@@ -109,9 +130,10 @@ class WuiVfsList {
       const el = document.createElement("div");
       el.style.padding = "1em";
       el.style.cursor = "pointer";
-      el.innerHTML = c.name;
+      el.innerText = c.name;
 
       if (c.is_dir) {
+        el.innerText += "/";
         el.style.backgroundColor = "cornsilk";
       }