[feature] collapsible top level menu

clenemt · Nov 15, 2022 · d703317 · d703317
1 parent 90f527f
commit d703317
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/publish.js b/publish.js
@@ -409,7 +409,12 @@ function buildMemberNav(items, itemHeading, itemsSeen, linktoFn) {
         });
 
         if (itemsNav !== '') {
-            nav += '<h3>' + itemHeading + '</h3><ul>' + itemsNav + '</ul>';
+            if(docdash.collapse === "top") {
+                nav += '<h3 class="collapsed_header">' + itemHeading + '</h3><ul class="collapse_top">' + itemsNav + '</ul>';
+            }
+            else {
+                nav += '<h3>' + itemHeading + '</h3><ul>' + itemsNav + '</ul>';
+            }
         }
     }
 
@@ -485,7 +490,12 @@ function buildNav(members) {
             nav += '<h3>' + linkto('global', 'Global') + '</h3>';
         }
         else {
-            nav += '<h3>Global</h3><ul>' + globalNav + '</ul>';
+            if(docdash.collapse === "top") {
+                nav += '<h3 class="collapsed_header">Global</h3><ul class="collapse_top">' + globalNav + '</ul>';
+            }
+            else {
+                nav += '<h3>Global</h3><ul>' + globalNav + '</ul>';
+            }
         }
     }
 

diff --git a/static/scripts/collapse.js b/static/scripts/collapse.js
@@ -1,15 +1,34 @@
 function hideAllButCurrent(){
     //by default all submenut items are hidden
     //but we need to rehide them for search
+    document.querySelectorAll("nav > ul").forEach(function(parent) {
+        if (parent.className.indexOf("collapse_top") !== -1) {
+            parent.style.display = "none";
+        }
+    });
     document.querySelectorAll("nav > ul > li > ul li").forEach(function(parent) {
         parent.style.display = "none";
     });
+    document.querySelectorAll("nav > h3").forEach(function(section) {
+        if (section.className.indexOf("collapsed_header") !== -1) {
+            section.addEventListener("click", function(){
+                if (section.nextSibling.style.display === "none") {
+                    section.nextSibling.style.display = "block";
+                } else {
+                    section.nextSibling.style.display = "none";
+                }
+            });
+        }
+    });
 
     //only current page (if it exists) should be opened
     var file = window.location.pathname.split("/").pop().replace(/\.html/, '');
     document.querySelectorAll("nav > ul > li > a").forEach(function(parent) {
         var href = parent.attributes.href.value.replace(/\.html/, '');
         if (file === href) {
+            if (parent.parentNode.parentNode.className.indexOf("collapse_top") !== -1) {
+                parent.parentNode.parentNode.style.display = "block";
+            }
             parent.parentNode.querySelectorAll("ul li").forEach(function(elem) {
                 elem.style.display = "block";
             });

diff --git a/static/scripts/search.js b/static/scripts/search.js
@@ -33,6 +33,9 @@ document.getElementById("nav-search").addEventListener("keyup", function(event)
         document.querySelectorAll("nav > ul > li").forEach(function(elem) {
             elem.style.display = "block";
         });
+        document.querySelectorAll("nav > ul").forEach(function(elem) {
+            elem.style.display = "block";
+        });
         //hide all results
         document.querySelectorAll("nav > ul > li > ul li").forEach(function(elem) {
             elem.style.display = "none";
@@ -79,5 +82,18 @@ document.getElementById("nav-search").addEventListener("keyup", function(event)
                 parent.style.display = "none";
             }
         });
+        document.querySelectorAll("nav > ul.collapse_top").forEach(function(parent) {
+            var countVisible = 0;
+            parent.querySelectorAll("li").forEach(function(elem) {
+                if (elem.style.display !== "none") {
+                    countVisible++;
+                }
+            });
+
+            if (countVisible == 0) {
+                //has no child at all and does not contain text
+                parent.style.display = "none";
+            }
+        });
     }
 });
diff --git a/static/styles/jsdoc.css b/static/styles/jsdoc.css
@@ -242,6 +242,10 @@ nav h3 {
   color: #000;
 }
 
+nav h3.collapsed_header {
+  cursor: pointer;
+}
+
 nav ul {
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', arial, sans-serif;
   font-size: 100%;