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 @@