csdn.net CSDN博客目录列表

辅助CSDN跳转列表插件

目前为 2019-04-05 提交的版本。查看 最新版本

  1. // ==UserScript==
  2. // @name csdn.net CSDN博客目录列表
  3. // @namespace https://www.jianshu.com/u/15893823363f
  4. // @version 1.1
  5. // @description 辅助CSDN跳转列表插件
  6. //https://cdn.jsdelivr.net/npm/marked/marked.min.js
  7. //https://cdn.staticfile.org/jquery/3.3.1/jquery.min.js
  8. //https://code.createjs.com/1.0.0/tweenjs.min.js
  9. // @author Zszen John
  10. // @match https://blog.csdn.net/*/article/details/*
  11. // @grant none
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16. let isDebug = 1
  17. let poolLink = [];
  18. document.title = '';
  19. setTimeout(function () {
  20. let div = $('<div id="zszen_jianshu" class="简书列表" style="border-radius:5px;font-size:13;line-height:17px;overflow:hidden; position:fixed; left:18%; top:9%; z-index:9999;height: 25px; width: 53px;border:3px solid #00CBA0;background-color:#ffffff"></div>');
  21. $('body').append(div);
  22. let title = $('<h4 id="title_jianshu" style="text-align:left;width:500%;line-height:13px;margin-bottom:2px;margin-top:2pxpx;line-height:1;padding-left:2px;padding-top:0px;-webkit-margin-before:.3em;-webkit-margin-after:.3em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-weight: bold;"><font id="title" style="font-weight:800;color:#00CBA0;font-size:13px">目录</font></h4>');
  23. div.append(title);
  24. let items = $('<ol id="itemList_jianshu" style="width:300%;align:left;line-height:16px;text-align:left;padding-left:7px;padding-top:0px;color:#8B8E85"/>');//<font style="font-size:12px;color:#68ac10">{{item.title}}</font>
  25. div.append(items);
  26. document.title = $('h1.title-article').html();
  27. if(document.title.length>8){
  28. document.title = document.title.substr(0,10)+'..';
  29. }
  30. // for(let i=1;i<=7;i++){
  31. // $('h'+i).not((idx,el)=>{return $(el).attr('class')!=undefined || $(el).attr('id')}).each(function(idx,el){
  32. // $(el).attr('id','h'+i+'_'+idx)
  33. // });
  34. // //DLOG('id','h'+i+'_'+idx);
  35. // }
  36. //let oldIndent = 999;
  37. let oldItems = [items];
  38. //$('h1,h2,h3,h4,h5,h6,h7').not('.title').not('#title_jianshu').
  39. $('h1,h2,h3,h4,h5,h6,h7').not((idx,el)=>{return $(el).attr('class')!=undefined || $(el).attr('id')}).each(function(idx,el){
  40. let indent = parseInt($(el)[0].tagName[1]);
  41. let idName = 'h'+indent+'_'+idx;
  42. $(el).attr('id',idName);
  43. //DLOG($(el),$(el).attr('id'));
  44. let unit = $('<li indent="'+indent+'" style="line-height:18px;align:left"></li>');//;font-size:12px
  45. let link = $('<a focus="'+idName+'">'+$(el).text()+'</a>');
  46. unit.append(link);
  47. //DLOG('>>>',link);
  48. link.on('mouseover',(evt)=>{
  49. DLOG(evt.currentTarget);
  50. evt.currentTarget.style.color = '#00CBA0';
  51. evt.currentTarget.style.fontWeight = 600;
  52. });
  53. link.on('mouseout',(evt)=>{
  54. evt.currentTarget.style.color = '#333333';
  55. evt.currentTarget.style.fontWeight = 100;
  56. });
  57. link.on('click',(evt)=>{
  58. let bt = $(evt.currentTarget);
  59. let target = $('#'+bt.attr('focus'));
  60. let motionTo = target.offset().top-60;
  61. //createjs.Tween.get($(document)).to({alpha:1}, 1000);//.call(handleComplete);
  62. $('body,html').animate({scrollTop: motionTo}, 'normal', 'swing');
  63. });
  64. let lastEl = null;
  65. for(let i=oldItems.length-1;i>=0;i--){
  66. lastEl = oldItems[i];
  67. let distance = (oldItems.length-1)*6
  68. if(i>0){
  69. let lastIndent = parseInt(lastEl.attr('indent'));
  70. //DLOG(i,indent,lastIndent);
  71. if(indent<=lastIndent){
  72. oldItems.pop();
  73. continue;
  74. }else{
  75. unit.css({'text-indent':distance+'px','font-size':Math.max(15-i*2,11)+'px','font-weight':'100'})
  76. lastEl.append(unit);
  77. oldItems.push(unit);
  78. }
  79. }else{
  80. unit.css({'text-indent':distance+'px','font-size':Math.max(15-i*2,11)+'px','font-weight':'100'})
  81. lastEl.append(unit);
  82. oldItems.push(unit);
  83. }
  84. break;
  85. }
  86. //oldIndent = indent;
  87. });
  88.  
  89. //$(window).resize(updateWin);
  90. updateWin();
  91.  
  92. //showList();
  93. //showList();
  94. // recursivelySelf(1);
  95. // DLOG(poolLink);
  96. },1000);
  97.  
  98. // function recursivelySelf(level){
  99. // if(level>6)return;
  100. // $('h'+level).not('.title').each(function(idx,el){
  101. // poolLink.push($(el).html());
  102. // recursivelySelf(level+1);
  103. // })
  104. // }
  105.  
  106. function updateWin(){
  107. let div = $('div#zszen_jianshu');
  108. if($(window).width()<0){
  109. hideList();
  110. div.on('mouseover',showList)
  111. div.on('mouseout',hideList)
  112. }else{
  113. showList();
  114. div.off('mouseover',showList)
  115. div.off('mouseout',hideList)
  116. }
  117. }
  118.  
  119. function showList(){
  120. //DLOG(document.title);
  121. let h = $('div#zszen_jianshu').find('ol#itemList_jianshu').height()+20;
  122. $('h4#title_jianshu').css({'text-align':'left',width:'500%'})
  123. $('h4#title_jianshu').children().html(document.title);
  124. $('div#zszen_jianshu').css({width:'155px',height:h+'px'})
  125. $('div#zszen_jianshu').find('font#title').css({'font-size':'16px'})
  126. $('div#zszen_jianshu').find('ol#itemList_jianshu').show();
  127. }
  128.  
  129. function hideList(){
  130. $('h4#title_jianshu').children().html('目录');
  131. $('h4#title_jianshu').css({'text-align':'center',width:'100%'})
  132. $('div#zszen_jianshu').css({width:'53px',height:'30px'})
  133. $('div#zszen_jianshu').find('font#title').css({'font-size':'13px'})
  134. $('div#zszen_jianshu').find('ol#itemList_jianshu').hide();
  135. }
  136.  
  137. function DLOG(...args){
  138. args.unshift('[DEBUG]:')
  139. if(isDebug) console.log.apply(this,args);
  140. }
  141.  
  142. // Your code here...
  143. })();