add search bar

static/css/cours.css

@@ -63,6 +63,10 @@ button {
   display: none;
 }
 
+input[type="text"] {
+  outline: none;
+}
+
 @media only screen and (max-width: 640px) {
   aside {
     display: none;
@@ -82,7 +86,7 @@ button {
   }
 
   input {
-    width: 80vw;
+    width: 85vw;
   }
 }
 

static/js/cours.js

@@ -80,6 +80,35 @@ const deepestNodeOpened = (path, options) => {
   }
 };
 
+const searchFiles = (query, parent, currentFile) => {
+  const children = parent.querySelectorAll("li");
+
+  if (query === "") {
+    children.forEach((item) => {
+      item.style.display = "";
+      if (
+        item.classList.contains("directory") &&
+        !item.classList.contains("collapsed")
+      ) {
+        item.classList.add("collapsed");
+      }
+    });
+
+    uncollapse(currentFile);
+    return;
+  }
+
+  children.forEach((item) => {
+    if (item.innerText.toLowerCase().includes(query.toLowerCase())) {
+      item.style.display = "";
+      uncollapse(item);
+      console.log(query, item.innerText);
+    } else {
+      item.style.display = "none";
+    }
+  });
+};
+
 window.addEventListener("load", () => {
   // Build the filetree
   const fileTreeElement = document.getElementsByTagName("aside")[0];
@@ -97,21 +126,26 @@ window.addEventListener("load", () => {
   if (infoURL.length > 1) {
     const fullpath = infoURL[1].substring(2);
     const path = fullpath.substring(0, fullpath.lastIndexOf("/"));
-    const last_openeded = deepestNodeOpened(
+    const currently_open = deepestNodeOpened(
       path.split("/"),
       fileTreeElement.querySelector("ul").childNodes
     );
+    uncollapse(currently_open);
 
     // Bold opened file
     const opened_file = fullpath.split("/").at(-1);
-    last_openeded.querySelector("ul").childNodes.forEach((el) => {
+    currently_open.querySelector("ul").childNodes.forEach((el) => {
       if (el.innerText === opened_file) {
         el.style.fontWeight = "bold";
       }
     });
 
-    uncollapse(last_openeded);
+    // Search bar hook
+    document.getElementById("searchBar").addEventListener("input", (e) => {
+      searchFiles(e.target.value, fileTreeElement, currently_open);
+    });
   }
+
   // Responsive menu
   let menuOpen = false;
   const button = document.getElementsByTagName("button")[0];

templates/cours.html

@@ -13,6 +13,7 @@
 
     <button type="button">Ouvrir le menu</button>
     <aside>
+      <input type="text" id="searchBar" placeholder="Recherche..." autofocus />
       <span data-json="{{filetree}} "></span>
     </aside>
     <main>