doc: make header smaller and dropdown click-driven when JS is on

Author: ShogunPanda

doc/api_assets/README.md

@@ -1,5 +1,9 @@
 # API Reference Document Assets
 
+## api.js
+
+The main script for API reference documents.
+
 ## hljs.css
 
 The syntax theme for code snippets in API reference documents.

doc/api_assets/api.js

@@ -0,0 +1,87 @@
+'use strict';
+    
+// Check if we have Javascript support
+document.querySelector(':root').classList.add('has-js');
+
+// Restore user mode preferences
+const kCustomPreference = 'customDarkTheme';
+const userSettings = sessionStorage.getItem(kCustomPreference);
+const themeToggleButton = document.getElementById('theme-toggle-btn');
+if (userSettings === null && window.matchMedia) {
+  const mq = window.matchMedia('(prefers-color-scheme: dark)');
+  if ('onchange' in mq) {
+    function mqChangeListener(e) {
+      document.documentElement.classList.toggle('dark-mode', e.matches);
+    }
+    mq.addEventListener('change', mqChangeListener);
+    if (themeToggleButton) {
+      themeToggleButton.addEventListener('click', function() {
+        mq.removeEventListener('change', mqChangeListener);
+      }, { once: true });
+    }
+  }
+  if (mq.matches) {
+    document.documentElement.classList.add('dark-mode');
+  }
+} else if (userSettings === 'true') {
+  document.documentElement.classList.add('dark-mode');
+}
+if (themeToggleButton) {
+  themeToggleButton.hidden = false;
+  themeToggleButton.addEventListener('click', function() {
+    sessionStorage.setItem(
+      kCustomPreference,
+      document.documentElement.classList.toggle('dark-mode')
+    );
+  });
+}
+
+// Handle pickers with click/taps rather than hovers
+const pickers = document.querySelectorAll('.picker-header');
+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) {
+        other.classList.remove('expanded');
+      }
+
+      picker.classList.add('expanded');
+    }
+  });
+}
+
+// Track when the header is in sticky position
+const header = document.querySelector(".header");
+let ignoreNextIntersection = false;
+new IntersectionObserver(
+  ([e]) => {
+    const currentStatus = header.classList.contains('is-pinned');
+    const newStatus = e.intersectionRatio < 1;
+
+    // Same status, do nothing
+    if(currentStatus === newStatus) {
+      return;
+    } else if(ignoreNextIntersection) { 
+      ignoreNextIntersection = false;
+      return;
+    }
+
+    /*
+      To avoid flickering, ignore the next change event that is triggered
+      as the visible elements in the header change once we pin it.
+
+      The timer is reset anyway after few milliseconds
+    */
+    ignoreNextIntersection = true;
+    setTimeout(() => ignoreNextIntersection = false, 50);
+
+    header.classList.toggle('is-pinned', newStatus);
+  },
+  { threshold: [1] }
+).observe(header);

doc/api_assets/style.css

@@ -189,19 +189,23 @@ li.picker-header .expanded-arrow {
   display: none;
 }
 
-li.picker-header:hover .collapsed-arrow {
+li.picker-header.expanded .collapsed-arrow, 
+:root:not(.has-js) li.picker-header:hover .collapsed-arrow {
   display: none;
 }
 
-li.picker-header:hover .expanded-arrow {
+li.picker-header.expanded .expanded-arrow, 
+:root:not(.has-js) li.picker-header:hover .expanded-arrow {
   display: inline-block;
 }
 
-li.picker-header:hover > a {
+li.picker-header.expanded > a,
+:root:not(.has-js) li.picker-header:hover > a {
   border-radius: 2px 2px 0 0;
 }
 
-li.picker-header:hover > .picker {
+li.picker-header.expanded > .picker, 
+:root:not(.has-js) li.picker-header:hover > .picker {
   display: block;
   z-index: 1;
 }
@@ -807,13 +811,31 @@ kbd {
   background-color: var(--color-fill-app);
 }
 
-@media not screen, (max-height: 1000px) {
+@media not screen, (max-width: 600px), (max-height: 1000px) {
   .header {
     position: relative;
     top: 0;
   }
 }
 
+.header .pinned-header {
+  display: none;
+  margin-right: 0.4rem;
+  font-weight: 700;
+}
+
+.header.is-pinned .header-container {
+  display: none;
+}
+
+.header.is-pinned .pinned-header {
+  display: inline;
+}
+
+.header.is-pinned #gtoc {
+  margin: 0;
+}
+
 .header-container {
   display: flex;
   align-items: center;
@@ -845,6 +867,14 @@ kbd {
     padding-right: 0;
   }
 
+  .header #gtoc > ul > li.pinned-header {
+    display: none;
+  }
+
+  .header.is-pinned #gtoc > ul > li.pinned-header {
+    display: inline;
+  }
+
   #gtoc > ul > li.gtoc-picker-header {
     display: none;
   }

doc/template.html

@@ -39,6 +39,7 @@ <h1>Node.js __VERSION__ documentation</h1>
         </div>
         <div id="gtoc">
           <ul>
+            <li class="pinned-header">Node.js __VERSION__</li>
             __TOC_PICKER__
             __GTOC_PICKER__
             __ALTDOCS__
@@ -73,41 +74,6 @@ <h1>Node.js __VERSION__ documentation</h1>
       </div>
     </div>
   </div>
-  <script>
-    'use strict';
-    {
-      const kCustomPreference = 'customDarkTheme';
-      const userSettings = sessionStorage.getItem(kCustomPreference);
-      const themeToggleButton = document.getElementById('theme-toggle-btn');
-      if (userSettings === null && window.matchMedia) {
-        const mq = window.matchMedia('(prefers-color-scheme: dark)');
-        if ('onchange' in mq) {
-          function mqChangeListener(e) {
-            document.documentElement.classList.toggle('dark-mode', e.matches);
-          }
-          mq.addEventListener('change', mqChangeListener);
-          if (themeToggleButton) {
-            themeToggleButton.addEventListener('click', function() {
-              mq.removeEventListener('change', mqChangeListener);
-            }, { once: true });
-          }
-        }
-        if (mq.matches) {
-          document.documentElement.classList.add('dark-mode');
-        }
-      } else if (userSettings === 'true') {
-        document.documentElement.classList.add('dark-mode');
-      }
-      if (themeToggleButton) {
-        themeToggleButton.hidden = false;
-        themeToggleButton.addEventListener('click', function() {
-          sessionStorage.setItem(
-            kCustomPreference,
-            document.documentElement.classList.toggle('dark-mode')
-          );
-        });
-      }
-    }
-  </script>
+  <script src="assets/api.js" type="text/javascript"></script>
 </body>
 </html>