☰

Clean TypeScript handbook

Make reading TypeScript documentation better on vertical monitor

  1. // ==UserScript==
  2. // @name         Clean TypeScript handbook
  3. // @namespace    http://kuntau.org
  4. // @version      0.1
  5. // @description  Make reading TypeScript documentation better on vertical monitor
  6. // @author       Kuntau
  7. // @match        https://www.typescriptlang.org/docs/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=typescriptlang.org
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.   'use strict';
  15.  
  16.   const checkElmExistTimer = setInterval(function() {
  17.     let topMenuSelector = "top-menu"
  18.  
  19.     // check our custom button
  20.     if (document.getElementsByClassName("custom-btn").length === 0) {
  21.       const topMenu = document.getElementById(topMenuSelector)
  22.       if (topMenu) {
  23.         addButton(topMenu)
  24.       }
  25.     }
  26.   }, 5000)
  27.  
  28.   function addButton(Node) {
  29.     const btnSidebar = createButton("☰", "Show/hide sidebar")
  30.     const btnTOC = createButton("☲", "Show/hide table of content")
  31.     const elm = document.createElement("div")
  32.  
  33.     let sidebarStatus = true
  34.     let tocStatus = true
  35.  
  36.     elm.style.display = "flex"
  37.     elm.appendChild(btnSidebar)
  38.     elm.appendChild(btnTOC)
  39.  
  40.     btnSidebar.onclick = function() {
  41.       sidebarStatus = !sidebarStatus
  42.       hideSidebar(sidebarStatus)
  43.     }
  44.  
  45.     btnTOC.onclick = function() {
  46.       tocStatus = !tocStatus
  47.       hideTOC(tocStatus)
  48.     }
  49.  
  50.     // Node.style.justifyContent = "flex-start"
  51.     Node.append(elm)
  52.   }
  53.  
  54.   function createButton(icon, title) {
  55.     const btn = document.createElement("button")
  56.     btn.innerHTML = icon
  57.     btn.setAttribute('class', 'custom-btn')
  58.     btn.setAttribute('title', title)
  59.  
  60.     return btn
  61.   }
  62.  
  63.   function hideSidebar(status) {
  64.     const sidebar = document.getElementById("sidebar")
  65.     if (status) {
  66.       sidebar.style.display = "block"
  67.     } else {
  68.       sidebar.style.display = "none"
  69.     }
  70.   }
  71.  
  72.   function hideTOC(status) {
  73.     const toc = document.getElementsByClassName("handbook-toc")
  74.     if (status) {
  75.       toc[0].style.display = "block"
  76.     } else {
  77.       toc[0].style.display = "none"
  78.     }
  79.   }
  80.  
  81. })();