☰

Greasy Fork is available in English.

TOC of github readme for d3.js

generate a TOC of github readme for d3.js

このスクリプトの質問や評価の投稿はこちら、通報はこちらへお寄せください 
  1. // ==UserScript==
  2. // @name         TOC of github readme for d3.js
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  generate a TOC of github readme for d3.js
  6. // @author       theme
  7. // @match        https://github.com/d3/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Your code here...
  15.     function pre_iterate_node(tree_node, callback_f){
  16.         callback_f(tree_node);
  17.         var children = tree_node.children;
  18.         if ( children.length > 0 ) {
  19.             var i;
  20.             for (i = 0; i< children.length; i++){
  21.                 pre_iterate_node(children[i], callback_f);
  22.             }
  23.         }
  24.     }
  25.     function create_toc_item(text){
  26.         var div = document.createElement("div");
  27.         div.innerText = text;
  28.         return div;
  29.     }
  30.     function toc_item_from_el(c){ // check a element, populate a TOC item
  31.         var toc_item = null;
  32.         if (c.tagName == "H1") {
  33.             toc_item = create_toc_item(c.innerText); // create a toc item of this title
  34.             toc_item.style.backgroundColor = "rgba(204,255,204,0.5)";
  35.             toc_item.style.foneSize = "2em";
  36.             return toc_item;
  37.         } else if ( c.tagName == "H2" ) {
  38.             toc_item = create_toc_item(c.innerText);
  39.             toc_item.style.backgroundColor = "rgba(221,255,221,0.5)";
  40.             toc_item.style.foneSize = "1.5em";
  41.             toc_item.style.textIndent = "1em";
  42.             return toc_item;
  43.         } else if ( c.tagName == "H3" ) {
  44.             toc_item = create_toc_item(c.innerText);
  45.             toc_item.style.backgroundColor = "rgba(233,255,233,0.5)";
  46.             toc_item.style.foneSize = "1.17em";
  47.             toc_item.style.textIndent = "2em";
  48.             return toc_item;
  49.         } else if (c.tagName == "P" ){
  50.             return null;
  51.         } else if (c.tagName == "A" && (c.getAttribute("href").startsWith("#"))) {
  52.             if (c.previousSibling == null){
  53.                 toc_item = create_toc_item("");
  54.                 toc_item.innerHTML = '<a href="' + c.getAttribute("href") + '">' + c.parentNode.innerText + '</a>';
  55.                 toc_item.style.backgroundColor = "rgba(255,255,255,0.5)";
  56.                 toc_item.style.foneSize = "1em";
  57.                 toc_item.style.textIndent = "3em";
  58.                 return toc_item;
  59.             } else {
  60.                 return null;
  61.             }
  62.         } else {
  63.             return null;
  64.         }
  65.     }
  66.     // logic
  67.     var div_readme = document.getElementById("readme");
  68.     if (null !== div_readme) {
  69.         // render TOC inside it
  70.         var toc = document.createElement("div");
  71.         toc.setAttribute("id", "toc");
  72.         var css = toc.style;
  73.         css.border = "1px solid";
  74.         css.position = "fixed";
  75.         css.display = "block";
  76.         css.top = "5%";
  77.         css.left = "1%";
  78.         css.padding = "1em";
  79.         css.maxWidth = "20%";
  80.         css.maxHeight = "90%";
  81.         css.overflow = "scroll";
  82.         //css.display = "none";
  83.         document.body.append(toc);
  84.         pre_iterate_node(div_readme, function(c){ // for every div under `div_readme`
  85.             var toc_item = toc_item_from_el(c);
  86.             if (null !== toc_item) {
  87.                 // append toc item to toc div
  88.                 toc.appendChild(toc_item);
  89.             }
  90.         });
  91.     }
  92. })();