Enable sliding categories and extract TODOs

src/scripts/modules/expanders.ts

@@ -1,30 +1,3 @@
-// function anchorToId(anchor: HTMLAnchorElement) {
-//     return anchor.href.replace("./", "");
-// }
-// 
-// const stored = localStorage.getItem("expanded") ?? "[]";
-// let parsed: string[];
-// try {
-//     parsed = JSON.parse(stored) as string[];
-// }
-// catch (e) {
-//     parsed = [];
-// }
-// const state = new Set(parsed);
-// const submenus = Array.from(document.querySelectorAll("#menu .submenu-item"));
-// for (const sub of submenus) {
-//     try {
-//         if (state.has(anchorToId(sub.children[0] as HTMLAnchorElement))) sub.classList.add("expanded");
-//     }
-//     catch (e) {
-//         // TODO: create logger
-//         console.warn("Could not restore expanded state"); // eslint-disable-line no-console
-//         console.error(e); // eslint-disable-line no-console
-//     }
-// }
-
-// TODO: Swap this system to use type-book for full-link category
-
 // In case a linked article lead to a new tree
 const activeLink = document.querySelector("#menu a.active");
 if (activeLink) {
@@ -45,15 +18,10 @@ export default function setupExpanders() {
             if ((e.target as Element).closest(".submenu-item,.item") !== ex) return;
             e.preventDefault();
             e.stopPropagation();
-            // ex.parentElement.parentElement.classList.toggle("expanded");
-            ex.classList.toggle("expanded");
-            // const id = anchorToId(ex.closest("a")!);
-            // if (state.has(id)) state.delete(id);
-            // else state.add(id);
-            // // TODO: be able to remove all submenus of currently collapsed
-            // localStorage.setItem("expanded", JSON.stringify([...state]));
+            const ul = ex.querySelector("ul")!;
+            ul.style.height = `${ul.scrollHeight}px`;
+            setTimeout(() => ex.classList.toggle("expanded"), 1);
+            setTimeout(() => ul.style.height = ``, 200);
         });
     }
-
-
 }

src/scripts/modules/highlight.ts

@@ -19,7 +19,6 @@ const highlightJQuery: HLJSPlugin = {
         result.value = result.value.replaceAll(/([^A-Za-z0-9.])\$\((.+)\)/g, function(match, prefix, variable) {
             return `${prefix}<span class="hljs-variable language_">$(</span>${variable}<span class="hljs-variable language_">)</span>`;
         });
-        // TODO: add highlighting for static calls like $.ajax
     }
 };
 
@@ -32,14 +31,12 @@ export default function addHljs() {
     if (!codeblocks.length) return; // If there are none, don't add dependency
 
     // Add the hightlight.js styles from the child note of this script
-    // TODO: make this a mapping
     const link = document.createElement("link");
     link.rel = "stylesheet";
     link.href = "api/notes/cVaK9ZJwx5Hs/download";
     document.head.append(link);
 
     // Add the highlight.js script too
-    // TODO: make this a mappin as well
     const script = document.createElement("script");
     script.src = "api/notes/6PVElIem02b5/download";
     script.addEventListener("load", () => {

src/scripts/modules/search.ts

@@ -25,7 +25,6 @@ function buildResultItem(result: SearchResult) {
 export default function setupSearch() {
     const searchInput: HTMLInputElement = document.querySelector(".search-input")!;
 
-    // TODO: move listener to another function
     searchInput.addEventListener("keyup", debounce(async () => {
         // console.log("CHANGE EVENT");
         const current = document.body.dataset.noteId;
@@ -48,7 +47,7 @@ export default function setupSearch() {
         container.style.minWidth = `${rect.width}px`;
         
         const existing = document.querySelector(".search-results");
-        if (existing) existing.replaceWith(container); // TODO: consider updating existing container and never removing
+        if (existing) existing.replaceWith(container);
         else document.body.append(container);
     }, 500));
 

src/scripts/modules/theme.ts

@@ -12,7 +12,6 @@ if (preference) {
 
 export default function setupThemeSelector() {
     const themeSwitch: HTMLInputElement = document.querySelector(".theme-selection input")!;
-    // TODO: consolidate this with initialization (DRY)
     themeSwitch?.addEventListener("change", () => {
         if (themeSwitch.checked) {
             document.body.classList.add("theme-dark");