目录树导航 - 显示文章目录大纲导航
// ==UserScript== // @name TreeBar // @name:zh-CN 目录树导航 // @namespace https://github.com/zhilidali/TreeBar/ // @version 0.1.11 // @description 目录树导航 - 显示文章目录大纲导航 // @description:zh-cn 目录树导航 - 显示文章目录大纲导航 // @author zhilidali // @mail [email protected] // @license MIT Licensed // @match *://www.jianshu.com/p/* // @match *://cdn2.jianshu.io/p/* // @match *://juejin.im/post/* // @match *://juejin.im/entry/* // @match *://sspai.com/* // @match *://zhuanlan.zhihu.com/p/* // @match *://mp.weixin.qq.com/s?* // @match *://cnodejs.org/topic/* // @match *://div.io/topic/* // @match *://www.zcfy.cc/article/* // @grant none // ==/UserScript== (function() { 'use strict'; var map = { jianshu: { tagName: '.ouvJEz', style: { top: '55px', color: '#ea6f5a', } }, zhihu: { tagName: '.Post-RichText', }, sspai: { tagName: '.notion-page-content', }, juejin: { tagName: '.article-content', }, div: { tagName: '.topic-firstfloor-detail' }, zcfy: { tagName: '.markdown-body', }, qq: { tagName: '.rich_media_content', }, default: { tagName: 'body' } }; var treeBar = window.treeBar = { site: { name: '', tagName: '', }, className: 'treeBar', style: ` /* 样式重置 */ html { scroll-behavior: smooth; } .treeBar ul { padding-left: 1.1em; margin: 0; } .treeBar > ul > li { list-style-type: disc; } .treeBar > ul > li > ul > li { list-style-type: circle; } .treeBar > ul > li > ul > li > ul > li { list-style-type: square; } /* common */ .treeBar { z-index: 99999; position: fixed; top: 10%; right: 0; max-width: 300px; max-height: 88%; border: 1px solid #ddd; overflow-y: auto; overflow-x: visible; background-color: rgba(255, 255, 255, .9); } .treeBar-resize { position: absolute; /*cursor: col-resize;*/ width: 5px; left: -2px; top: 0; bottom: 0; } .treeBar-btn { box-sizing: border-box; position: absolute; top: -1px; left: -1px; width: 72px; height: 28px; padding: 0; border: 1px solid #ddd; border-radius: 3px; box-shadow: 0 1px 1px 1px #ddd; font-size: 14px; background-color: #fff; vertical-align: middle; text-align: center; outline: none; cursor: pointer; color: #333; } .treeBar > ul { padding: 30px 10px 10px 25px; } .treeBar > ul > li a { line-height: 30px; /*overflow: hidden; white-space: nowrap; text-overflow: ellipsis;*/ text-decoration: none; font-size: 14px; cursor: pointer; color: #0371e9; } .treeBar > ul > li a:hover { text-decoration: underline; } /* slideToggle */ .treeBar-slide { overflow-y: visible; } .treeBar-slide .treeBar-btn { left: -71px; top: -1px; } .treeBar-slide > ul { display: none; }`, innerDom: `<button class="treeBar-btn">TreeBar</button><div class="treeBar-resize"></div>`, matchSite: function() {/* 匹配站点 */ var domain = location.href.match(/([\d\w]+)\.(com|cn|net|org|im|io|cc)/i); this.site.name = (domain && domain[1]); var siteInfo = map[this.site.name] || map.default; this.site.tagName = siteInfo.tagName; this.site.sync = siteInfo.sync || false; if (siteInfo.style) { this.style += ` .treeBar { top: ${siteInfo.style.top}; border-color: ${siteInfo.style.color}; } .treeBar-btn { border-color: ${siteInfo.style.color}; background-color: ${siteInfo.style.color}; color: #fff; } .treeBar > ul > li a { color: ${siteInfo.style.color}; } `; } }, createDom: function() {/* 创建DOM */ var style = document.createElement('style'), dom = document.createElement('div'); style.innerHTML = this.style; document.head.appendChild(style); dom.className = this.className; dom.innerHTML = this.innerDom + this.ul; document.body.appendChild(dom); }, onEvent: function() { var eTree = document.querySelector('.treeBar'), eBtn = document.querySelector('.treeBar-btn'), eResize = document.querySelector('.treeBar-resize'); eBtn.onclick = function () { eTree.classList.toggle('treeBar-slide'); }; /*var resize = {}; document.body.onmouseup = function() { console.log('up'); resize.flag = false; }; eResize.onmousedown = function() { resize.flag = true; }; document.body.onmousemove = function() { if (!resize.flag) return; if (resize.current === undefined) { resize.current = event.x; return; } var x = event.x - resize.current; if(Math.abs(x) >= 10) { tree.style.width = tree.offsetWidth - x + 'px'; console.log(x); resize.current = event.x; } };*/ }, init: function() { console.time('TreeBar'); // 1. 获取DOM var hList = document.querySelector(treeBar.site.tagName) .querySelectorAll('h1, h2, h3, h4, h5, h6'); // 2. 构建数据 var tree = transformTree(Array.from(hList)); // 3. 构建DOM treeBar.ul = compileList(tree); treeBar.createDom(); // 4. 注册事件 treeBar.onEvent(); console.timeEnd('TreeBar'); } }; // 0. 匹配站点 treeBar.matchSite(); if (treeBar.site.tagName !== 'body' && document.querySelector(treeBar.site.tagName)) { treeBar.init(); } else { document.onreadystatechange = function () { document.readyState === "complete" && treeBar.init(); }; } /* 解析DOM，构建树形数据 */ function transformTree(list) { var result = []; list.reduce(function (res, cur, index, arr) { var prev = res[res.length - 1]; if (compare(prev, cur)) { if (!prev.sub) prev.sub = []; prev.sub.push(cur); if (index === arr.length - 1) prev.sub = transformTree(prev.sub); } else { construct(res, cur); if (prev && prev.sub) prev.sub = transformTree(prev.sub); } return res; }, result); // 转为树形结构的条件依据 function compare(prev, cur) { return prev && cur.tagName.replace(/h/i, '') > prev.tagName.replace(/h/i, ''); } // 转为树形结构后的数据改造 function construct(arr, obj) { arr.push({ name: obj.innerText, id: obj.id = obj.innerText, tagName: obj.tagName }); } return result; } /* 根据数据构建目录 */ function compileList(tree) { var list = ''; tree.forEach(function(item) { var ul = item.sub ? compileList(item.sub) : ''; list += `<li> <a href="#${item.id}" title="${item.name}">${item.name}</a>${ul} </li>`; }); return `<ul>${list}</ul>`; } })();
