diff --git a/static/css/cours.css b/static/css/cours.css
index 1391639..b843623 100644
--- a/static/css/cours.css
+++ b/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;
}
}
diff --git a/static/js/cours.js b/static/js/cours.js
index 76418e2..aa50662 100644
--- a/static/js/cours.js
+++ b/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];
diff --git a/templates/cours.html b/templates/cours.html
index 47b5400..83eabd3 100644
--- a/templates/cours.html
+++ b/templates/cours.html
@@ -13,6 +13,7 @@