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. })();