☰

rfc toc

rfc add toc sidebar

当前为 2017-03-22 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         rfc toc
  3. // @namespace    http://yurenchen.com/
  4. // @version      0.3
  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 url_jq   = domain+'/yurenchen000/i5ting_ztree_toc/master/js/jquery-1.4.4.min.js';
  74.     var url_ztree= domain+'/yurenchen000/i5ting_ztree_toc/master/js/jquery.ztree.core-3.5.js';
  75.     var url_toc  = domain+'/yurenchen000/i5ting_ztree_toc/master/src/ztree_toc.js';
  76.     var url_css  = domain+'/yurenchen000/i5ting_ztree_toc/master/css/zTreeStyle/zTreeStyle.css';
  77.  
  78.     //cdn remove 'nosniff' and fix 'mime type' from https://raw.githack.com/
  79.     appendScript(url_jq, load_cb1);
  80.     function load_cb1(){
  81.         appendScript(url_ztree, load_cb2);
  82.     }
  83.     function load_cb2(){
  84.         appendScript(url_toc, load_cb3);
  85.     }
  86.     function load_cb3(){
  87.         init_toc();
  88.     }
  89.  
  90.     appendTag('div', {id:'tree',innerHTML:'  TOC loading... ', style:'position: fixed; top:0px; right:0px; border:1px solid gray; height:100%;'});
  91.     appendCss(url_css);
  92.  
  93.     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});
  94.     function style_load_ok(){
  95.         console.log('style_load_ok ...');
  96.     }
  97.  
  98.  
  99.     //生成目录树
  100.     function init_toc(){
  101.         //生成目录树
  102.         $('#tree').ztree_toc({
  103.             _header_nodes:[{ id:1, pId:0, name:"Table of Content",open:true, url:'#legend', target: "_self" }],
  104.             debug: false,
  105.             is_auto_number: false,
  106.             refresh_scroll_time: 10,
  107.             scroll_selector: window,
  108.             documment_selector:'div.content',
  109.             ztreeStyle: {
  110.                 //width:'262px',
  111.                 overflow: 'auto',
  112.                 'z-index': 10
  113.             }
  114.         });
  115.  
  116.         //滚动同步, 内容滚动时, TOC 当前章节 滚入视野
  117.         window.onscroll=function(){
  118.             //var top=document.body.scrollTop||window.scrollTop||window.scrollY||window.pageYoffset;
  119.             if(typeof debug_offset != 'undefined')document.title=[top, $(window).scrollTop()];
  120.             var o=$('#tree .curSelectedNode')[0];
  121.             if(o)o.scrollIntoViewIfNeeded();
  122.             //console.log('onscroll:'+[top, tree.style.position, $(window).scrollTop()]);
  123.         };
  124.         window.onscroll();
  125.     }
  126.  
  127.     window.onload=function(){
  128.         adjust_spacer_height();
  129.     };
  130.     window.onresize=function(){
  131.         adjust_spacer_height();
  132.     };
  133.     function adjust_spacer_height(){
  134.         var last=$(':header:last')[0];
  135.         if(!last)return;
  136.         var lack_len = document.body.clientHeight- (document.body.offsetHeight - last.offsetTop) + 10;
  137.         spacer.style.height=lack_len+'px';
  138.     }
  139.  
  140.     //阻止 TOC 滚动时 body 被滚动
  141.     //http://stackoverflow.com/questions/5802467/prevent-scrolling-of-parent-element
  142.     //http://stackoverflow.com/questions/4326845/how-can-i-determine-the-direction-of-a-jquery-scroll-event
  143.     var lastScrollTop = 0;
  144.     tree.onscroll=function(e){
  145.         e.stopPropagation();
  146.         e.preventDefault();
  147.         e.cancelBubble= true;
  148.         e.returnValue = false;
  149.  
  150.         var scrollTop = $(this).scrollTop();
  151.         var pad=2;
  152.         if (scrollTop > lastScrollTop){//down
  153.             if(tree.scrollTop + tree.offsetHeight + 10 >= tree.scrollHeight)
  154.                 tree.scrollTop=tree.scrollHeight - tree.offsetHeight - pad;
  155.         } else {//up
  156.             if(tree.scrollTop <= 10)
  157.                 tree.scrollTop=pad;
  158.         }
  159.         lastScrollTop = scrollTop;
  160.         return false;
  161.     };
  162.  
  163. })();