HTML docs should allow collapse/expand of modules

[daurnimator]

I'm thinking sort of like in the windows file explorer: a little + that expands all the functions under a module.

Implementation constraints:

• You can't edit the html directly (only the template) as it's generated by pandoc
• Must work offline (i.e. no pulling in stylesheet/js from an external URL)

[RyanSquared]

Should be simple enough. I know this is both pseudocode and a jQuery-ism, but $('.collapsable').on('click', '.collapse-button', ()=> getParent(e).toggle())

[RyanSquared]

Feel free to stab me when I'm home so I can write it.

[daurnimator]

FWIW I'd like to not pull in any external dependencies for this. I don't see why it would need to be more than ~20 lines of JS.

[RyanSquared]

Sorry; my example was an extremely basic example I wrote. It's simple enough to just do it manually.

[RyanSquared]

diff --git a/doc/template.html b/doc/template.html
index a74a7b6..50231fa 100644
--- a/doc/template.html
+++ b/doc/template.html
@@ -67,5 +67,45 @@ $body$
 $for(include-after)$
 $include-after$
 $endfor$
+<script defer type="text/javascript">
+  function insertAfter(newNode, referenceNode) {
+    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+  }
+  // write out a basic 'dropdown_link' reference element
+  var dropdown_link = document.createElement('a');
+  dropdown_link.setAttribute('class', 'dropdown_link');
+  dropdown_link.onclick = function(e) {
+    console.log(e);
+  }
+  dropdown_link.innerHTML = " <b>&ndash;</b>"; // the space is for padding
+  dropdown_link.style.cursor = "pointer";
+  // hack in an ID name for the module list
+  document.querySelector('li a[href="#modules"]')
+    .parentElement
+    .querySelector("ul")
+    .setAttribute("id", "modules-list");
+  // for each item, add a dropdown +/-, and a handler
+  var modulesList = document.querySelectorAll('#modules-list > li');
+  modulesList.forEach(function(element) {
+    // add a clone of the node to prevent lingering element scoping
+    // otherwise each time a dropdown is clicked it only does the last one
+    var dropdown_link_copy = dropdown_link.cloneNode(true);
+    var list = element.querySelector('ul');
+    element.setAttribute("state", "down");
+    dropdown_link_copy.onclick = function() {
+      if (element.getAttribute("state") == "down") {
+        element.setAttribute("state", "up");
+        list.style.display = "none";
+        dropdown_link_copy.innerHTML = " <b>+</b>";
+      } else {
+        element.setAttribute("state", "down");
+        list.style.display = "block";
+        dropdown_link_copy.innerHTML = " <b>&ndash;</b>";
+      }
+    }
+    insertAfter(dropdown_link_copy, element.querySelector('a'));
+    console.log(element);
+  });
+</script>
 </body>
 </html>

[daurnimator]

@ChickenNuggers could you send a PR?

feedback:

• the 'modules-list' id is pointless, as you just immediately use it (and never again)
• please don't litter globals (enclose your code in an anonymous function)
• insertAfter doesn't need to be a function: just put the function body at your single use site
• there's a console.log leftover in there
• Could you start the lists closed?
• I don't think the script should have defer, as it will allow the layout jump around...

[RyanSquared]

• the 'modules-list' id is pointless, as you just immediately use it (and never again)
• please don't litter globals (enclose your code in an anonymous function)
• insertAfter doesn't need to be a function: just put the function body at your single use site
  there's a console.log leftover in there
• Could you start the lists closed?
• I don't think the script should have defer, as it will allow the layout jump around...

[daurnimator]

querySelectorAll becomes recursive without using it as an anchor element. I'm working on everything else now, though.

Then give it a more exact path: e.g. "nav > ul > li > ul > li"

[daurnimator]

What about using a 'details' element? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Edit: no. we can't. doesn't meet the restriction of not being able to modify the html.