doc: hide menus in appropriate pages

nodejs · Jan 10, 2022 · 75bcc68 · 75bcc68
1 parent 96e4e58
commit 75bcc68
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 21 deletions.
diff --git a/doc/api_assets/style.css b/doc/api_assets/style.css
@@ -238,6 +238,12 @@ li.picker-header a span {
   padding-left: 1rem;
 }
 
+.picker li a.active,
+.picker li a.active:hover,
+.picker li a.active:focus {
+  font-weight: 700;
+}
+
 .picker li:last-child a {
   border-bottom-right-radius: 1px;
   border-bottom-left-radius: 1px;

diff --git a/doc/template.html b/doc/template.html
@@ -40,23 +40,9 @@ <h1>Node.js __VERSION__ documentation</h1>
         <div id="gtoc">
           <ul>
             <li class="pinner-header">Node.js __VERSION__</li>
-            <li class="picker-header">
-              <a href="#">
-                <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
-                Table of contents
-              </a>
-
-              <div class="picker">__TOC_PICKER__</div>
-            </li>
+            __TOC_PICKER__
             __ALTDOCS__
-            <li class="picker-header gtoc-picker-header">
-              <a href="#">
-                <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
-                Index
-              </a>
-
-              <div class="picker">__GTOC__</div>
-            </li>
+            __GTOC_PICKER__
             <li>
               <a href="all.html">View on single page</a>
             </li>
@@ -114,12 +100,16 @@ <h1>Node.js __VERSION__ documentation</h1>
 
       // Handle pickers with click/taps rather than hovers
       const pickers = document.querySelectorAll('.picker-header');
-      for(const picker of document.querySelectorAll('.picker-header')) {
-        picker.addEventListener('click', function() {
-          if(picker.classList.contains('expanded')) {
+      for(const picker of pickers) {
+        picker.addEventListener('click', e => {
+          if (!e.target.closest('.picker')) {
+            e.preventDefault();
+          }
+
+          if (picker.classList.contains('expanded')) {
             picker.classList.remove('expanded');
           } else {
-            for(const other of pickers) {
+            for (const other of pickers) {
               other.classList.remove('expanded');
             }
 

diff --git a/tools/doc/html.mjs b/tools/doc/html.mjs
@@ -99,7 +99,8 @@ export function toHTML({ input, content, filename, nodeVersion, versions }) {
                      .replace('__SECTION__', content.section)
                      .replace(/__VERSION__/g, nodeVersion)
                      .replace(/__TOC__/g, content.toc)
-                     .replace(/__TOC_PICKER__/g, content.tocPicker)
+                     .replace(/__TOC_PICKER__/g, tocPicker(id, content))
+                     .replace(/__GTOC_PICKER__/g, gtocPicker(id))
                      .replace(/__GTOC__/g, gtocHTML.replace(
                        `class="nav-${id}"`, `class="nav-${id} active"`))
                      .replace('__EDIT_ON_GITHUB__', editOnGitHub(filename))
@@ -523,3 +524,41 @@ function altDocs(filename, docCreated, versions) {
 function editOnGitHub(filename) {
   return `<li class="edit_on_github"><a href="https://github.com/nodejs/node/edit/master/doc/api/${filename}.md">Edit on GitHub</a></li>`;
 }
+
+function gtocPicker(id) {
+  if (id === 'index') {
+    return '';
+  }
+
+  const gtoc = gtocHTML.replace(
+    `class="nav-${id}"`, `class="nav-${id} active"`
+  );
+
+  return `
+    <li class="picker-header">
+      <a href="#">
+        <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+        Index
+      </a>
+
+      <div class="picker">${gtoc}</div>
+    </li>
+  `;
+}
+
+function tocPicker(id, content) {
+  if (id === 'index') {
+    return '';
+  }
+
+  return `
+    <li class="picker-header">
+      <a href="#">
+        <span class="collapsed-arrow">&#x25ba;</span><span class="expanded-arrow">&#x25bc;</span>
+        Table of contents
+      </a>
+
+      <div class="picker">${content.tocPicker}</div>
+    </li>
+  `;
+}