☰

Nodejs Document Content Navigation

Provide directory navigation for node.js document website content.

  1. // ==UserScript==
  2. // @name         Nodejs Document Content Navigation
  3. // @name:zh-CN   Nodejs 文档内容导航
  4. // @namespace    https://github.com/wang1212/user-script/blob/main/nodejs-docs-navigation
  5. // @version      0.1.0
  6. // @description  Provide directory navigation for node.js document website content.
  7. // @description:zh-cn 提供 Node.js 文档网站的内容目录导航。
  8. // @author       wang1212
  9. // @match        http*://nodejs.org/*/*/docs/api/*
  10. // @match        http*://nodejs.org/*/*/docs/api/*
  11. // @grant        none
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.   'use strict';
  16.  
  17.   const log = console.log;
  18.  
  19.   /* ------------------------------- Init ----------------------------- */
  20.  
  21.   /* ---------------------- Parser Content Navigation ----------------------------- */
  22.  
  23.   function updateContentNavigation() {
  24.     let navBarElem = document.querySelector('.wang1212_md-content-nav');
  25.  
  26.     // Remove existing
  27.     navBarElem && navBarElem.remove();
  28.  
  29.     // navBar button
  30.     navBarElem = document.createElement('div');
  31.     navBarElem.classList.add('wang1212_md-content-nav');
  32.     navBarElem.title = '文档内容导航';
  33.  
  34.     navBarElem.innerText = 'N';
  35.  
  36.     // Panel
  37.     const navBarPanelElem = document.createElement('div');
  38.     navBarPanelElem.classList.add('wang1212_md-content-nav_panel');
  39.  
  40.     navBarPanelElem.appendChild(document.querySelector('#toc').cloneNode(true));
  41.  
  42.     // --- CSS Style ---
  43.     const styleElem = document.createElement('style');
  44.     styleElem.type = 'text/css';
  45.     styleElem.innerHTML = `
  46. .wang1212_md-content-nav {
  47. position: fixed;
  48. right: 1rem;
  49. bottom: 3.5rem;
  50. z-index: 1999;
  51. width: 2rem;
  52. height: 2rem;
  53. color: white;
  54. font-size: 1.5rem;
  55. line-height: 2rem;
  56. text-align: center;
  57. background-color: rgb(36, 41, 46);
  58. cursor: pointer;
  59. }
  60. .wang1212_md-content-nav_panel {
  61. position: absolute;
  62. right: 0;
  63. bottom: 2rem;
  64. display: block;
  65. width: 30rem;
  66. height: 75vh;
  67. padding: 0.5rem;
  68. overflow: auto;
  69. color: #ddd;
  70. font-size: 1rem;
  71. line-height: 1rem;
  72. text-align: left;
  73. background: white;
  74. box-shadow: rgba(0, 0, 0, 0.25) 0 0 0.5rem 0;
  75. }
  76. .wang1212_md-content-nav_to-anchor {
  77. line-height: 1.6 !important;
  78. }
  79. .wang1212_md-content-nav_to-anchor:hover {
  80. color: rgb(0, 0, 0);
  81. }
  82. `;
  83.  
  84.     navBarElem.appendChild(navBarPanelElem);
  85.     document.body.appendChild(navBarElem);
  86.     document.head.appendChild(styleElem);
  87.  
  88.     // --- Event ---
  89.     // Show/Hide
  90.     navBarElem.addEventListener(
  91.       'click',
  92.       (e) => {
  93.         if (e.target !== navBarElem) return;
  94.  
  95.         if (navBarPanelElem.style.display === 'none') {
  96.           navBarPanelElem.style.display = 'block';
  97.         } else {
  98.           navBarPanelElem.style.display = 'none';
  99.         }
  100.       },
  101.       false
  102.     );
  103.   }
  104.  
  105.   /* ------------------------------- To Top ----------------------------- */
  106.  
  107.   // to top button
  108.   function updateGoToTopButton() {
  109.     let toTopElem = document.querySelector('.wang1212_to-top');
  110.  
  111.     // Remove existing
  112.     toTopElem && toTopElem.remove();
  113.  
  114.     // toTop button
  115.     toTopElem = document.createElement('div');
  116.     toTopElem.classList.add('wang1212_to-top');
  117.     toTopElem.title = '回到顶部';
  118.  
  119.     toTopElem.innerText = '↑';
  120.  
  121.     // --- CSS Style ---
  122.     const styleElem = document.createElement('style');
  123.     styleElem.type = 'text/css';
  124.     styleElem.innerHTML = `
  125. .wang1212_to-top {
  126. position: fixed;
  127. right: 1rem;
  128. bottom: 1rem;
  129. z-index: 1999;
  130. width: 2rem;
  131. height: 2rem;
  132. color: white;
  133. font-size: 1.5rem;
  134. line-height: 2rem;
  135. text-align: center;
  136. background-color: rgb(36, 41, 46);
  137. cursor: pointer;
  138. }
  139. `;
  140.  
  141.     document.body.appendChild(toTopElem);
  142.     document.head.appendChild(styleElem);
  143.  
  144.     // --- Event ---
  145.     // fly to view
  146.     toTopElem.addEventListener(
  147.       'click',
  148.       () => {
  149.         document.body.scrollIntoView({ behavior: 'smooth' });
  150.       },
  151.       false
  152.     );
  153.   }
  154.  
  155.   /* ------------------------------- Load ----------------------------- */
  156.  
  157.   function load() {
  158.     updateContentNavigation();
  159.     updateGoToTopButton();
  160.   }
  161.  
  162.   // Monitor page reload
  163.   // document.addEventListener('pjax:end', load, false);
  164.  
  165.   //
  166.   load();
  167. })();