☰

rfc toc

rfc add toc sidebar

  1. // ==UserScript==
  2. // @name         rfc toc
  3. // @namespace    http://yurenchen.com/
  4. // @version      0.4
  5. // @description  rfc add toc sidebar
  6. // @author       yurenchen
  7. // @match        https://tools.ietf.org/html/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     function appendScript(url,cb){
  15.         var e=document.createElement('script');
  16.         e.src=url;
  17.         e.onload=cb;
  18.         document.body.appendChild(e);
  19.     }
  20.     function appendCss(url){
  21.         var e=document.createElement('link');
  22.         e.rel="stylesheet";
  23.         e.href=url;
  24.         document.body.appendChild(e);
  25.     }
  26.     function appendTag(tag, prop){
  27.         var e=document.createElement(tag);
  28.         for(var k in prop){
  29.             if(typeof(k)=="string" )//&& typeof(prop[k])=="string")
  30.                 e[k]=prop[k];
  31.             console.log(k,prop[k]);
  32.         }
  33.         document.body.appendChild(e);
  34.         return e;
  35.     }
  36.     //加载资源文件
  37.     /*
  38.     appendCss("http://note.yurenchen.com/usr/themes/chen/zTreeStyle.css");
  39.     appendScript("http://note.yurenchen.com/usr/themes/chen/jquery-1.4.4.min.js");
  40.     appendScript("http://note.yurenchen.com/usr/themes/chen/jquery.ztree.core-3.5.js");
  41.     appendScript("http://note.yurenchen.com/usr/themes/chen/ztree_toc.js");
  42.     */
  43.     /*
  44.     appendCss("https://raw.githubusercontent.com/yurenchen000/i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css");
  45.     appendScript("https://raw.githubusercontent.com/yurenchen000/i5ting_ztree_toc/master/js/jquery-1.4.4.min.js");
  46.     appendScript("https://raw.githubusercontent.com/yurenchen000/i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.js");
  47.     appendScript("https://raw.githubusercontent.com/yurenchen000/i5ting_ztree_toc/master/src/ztree_toc.js");
  48.     */
  49.  
  50.     /*
  51.         //cdn remove 'nosniff' and fix 'mime type' from https://raw.githack.com/
  52.     appendScript("https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/js/jquery-1.4.4.min.js", load_cb1);
  53.     function load_cb1(){
  54.         appendScript("https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.js", load_cb2);
  55.     }
  56.     function load_cb2(){
  57.         appendScript("https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/src/ztree_toc.js", load_cb3);
  58.     }
  59.     function load_cb3(){
  60.         init_toc();
  61.     }
  62.     appendCss("https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css");
  63.     */
  64. /*
  65.     var url_jq   ='https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/js/jquery-1.4.4.min.js';
  66.     var url_ztree='https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.js';
  67.     var url_toc  ='https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/src/ztree_toc.js';
  68.     var url_css  ='https://rawcdn.githack.com/yurenchen000/i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css';
  69. */
  70.  
  71.     //var domain = 'https://rawcdn.githack.com';
  72.     //var domain = 'https://cdn.rawgit.com';
  73.     var domain = 'https://rawgit.com';
  74.     var url_jq   = domain+'/yurenchen000/i5ting_ztree_toc/master/js/jquery-1.4.4.min.js';
  75.     var url_ztree= domain+'/yurenchen000/i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.js';
  76.     var url_toc  = domain+'/yurenchen000/i5ting_ztree_toc/master/src/ztree_toc.js';
  77.     var url_css  = domain+'/yurenchen000/i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css';
  78.  
  79.     //cdn remove 'nosniff' and fix 'mime type' from https://raw.githack.com/
  80.     appendScript(url_jq, load_cb1);
  81.     function load_cb1(){
  82.         appendScript(url_ztree, load_cb2);
  83.     }
  84.     function load_cb2(){
  85.         appendScript(url_toc, load_cb3);
  86.     }
  87.     function load_cb3(){
  88.         init_toc();
  89.     }
  90.  
  91.     appendTag('div', {id:'tree',innerHTML:'  TOC loading... ', style:'position: fixed; top:0px; right:0px; border:1px solid gray; height:100%;'});
  92.     appendCss(url_css);
  93.  
  94.     appendTag('style',{innerHTML:'#tree a:hover { text-decoration: underline; color: green;} #tree a {text-decoration: none;} #tree a.curSelectedNode {color: red; text-decoration: underline;}',onload:window.style_load_ok});
  95.     function style_load_ok(){
  96.         console.log('style_load_ok ...');
  97.     }
  98.  
  99.  
  100.     //生成目录树
  101.     function init_toc(){
  102.         //生成目录树
  103.         $('#tree').ztree_toc({
  104.             _header_nodes:[{ id:1, pId:0, name:"Table of Content",open:true, url:'#legend', target: "_self" }],
  105.             debug: false,
  106.             is_auto_number: false,
  107.             refresh_scroll_time: 10,
  108.             scroll_selector: window,
  109.             documment_selector:'div.content',
  110.             ztreeStyle: {
  111.                 //width:'262px',
  112.                 overflow: 'auto',
  113.                 'z-index': 10
  114.             }
  115.         });
  116.  
  117.         //滚动同步, 内容滚动时, TOC 当前章节 滚入视野
  118.         window.onscroll=function(){
  119.             //var top=document.body.scrollTop||window.scrollTop||window.scrollY||window.pageYoffset;
  120.             if(typeof debug_offset != 'undefined')document.title=[top, $(window).scrollTop()];
  121.             var o=$('#tree .curSelectedNode')[0];
  122.             if(o)o.scrollIntoViewIfNeeded();
  123.             //console.log('onscroll:'+[top, tree.style.position, $(window).scrollTop()]);
  124.         };
  125.         window.onscroll();
  126.     }
  127.  
  128.     window.onload=function(){
  129.         adjust_spacer_height();
  130.     };
  131.     window.onresize=function(){
  132.         adjust_spacer_height();
  133.     };
  134.     function adjust_spacer_height(){
  135.         var last=$(':header:last')[0];
  136.         if(!last)return;
  137.         var lack_len = document.body.clientHeight- (document.body.offsetHeight - last.offsetTop) + 10;
  138.         spacer.style.height=lack_len+'px';
  139.     }
  140.  
  141.     //阻止 TOC 滚动时 body 被滚动
  142.     //http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element
  143.     //http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event
  144.     var lastScrollTop = 0;
  145.     tree.onscroll=function(e){
  146.         e.stopPropagation();
  147.         e.preventDefault();
  148.         e.cancelBubble= true;
  149.         e.returnValue = false;
  150.  
  151.         var scrollTop = $(this).scrollTop();
  152.         var pad=2;
  153.         if (scrollTop > lastScrollTop){//down
  154.             if(tree.scrollTop + tree.offsetHeight + 10 >= tree.scrollHeight)
  155.                 tree.scrollTop=tree.scrollHeight - tree.offsetHeight - pad;
  156.         } else {//up
  157.             if(tree.scrollTop <= 10)
  158.                 tree.scrollTop=pad;
  159.         }
  160.         lastScrollTop = scrollTop;
  161.         return false;
  162.     };
  163.  
  164. })();