search in files

1 files changed, 37 insertions, 3 deletions

diff --git a/resources/index.html b/resources/index.html
index 5875c28..ef38d38 100644
--- a/resources/index.html
+++ b/resources/index.html
@@ -106,6 +106,7 @@
      async function browseTo(id) {
        filesOpenAbort.abort();
        document.querySelector('#files').open=true;
+       document.querySelector('#file-search').value='';
        const fileList = document.querySelector('ul#file-list');
        const pathList = document.querySelector('ul#path-list');
        const itemTemplate = document.querySelector('#file-item');
@@ -150,10 +151,30 @@
                     },
                   );
 
-         document.querySelector('#recent').
+         document.querySelector('#file-search').
                   addEventListener(
-                    'toggle',
-                    async (event) => {
+                    'input',
+                    (event) => {
+                      const textRe = new RegExp(event.target.value,'i');
+                      
+                      document.querySelector('ul#file-list').childNodes.forEach(
+                        e => {
+                          if (e.tagName != "LI") { return; }
+                          const match = e.textContent.search(textRe) >= 0;
+                          if (match) {
+                            e.classList.remove('hidden');
+                          } else {
+                            e.classList.add('hidden');
+                          }
+                        },
+                      );
+                    },
+                  );
+
+       document.querySelector('#recent').
+                addEventListener(
+                  'toggle',
+                  async (event) => {
                       if (event.target.open) {
                         await loadRecent();
                       }
@@ -184,6 +205,10 @@
      body { font-size: 12vw }
      * { font-size: inherit }
 
+     .hidden {
+       display: none;
+     }
+     
      div.thing {
        padding: 0.2em 0.1em 0.2em 0.1em;
        margin-top: 0.5em;
@@ -252,6 +277,14 @@
        white-space: pre;
      }
 
+     #file-search-p {
+       margin: 0.2em;
+       border: dotted thick blue;
+     }
+     #file-search {
+       border: none;
+     }
+     
      #path-list {
        display: flex;
      }
@@ -308,6 +341,7 @@
       </details>
       <details id="files" class="file-list">
         <summary>files</summary>
+        <p id="file-search-p"><input type="text" id="file-search"></p>
         <ul id="path-list">
         </ul>
         <ul id="file-list">