From 9c5273fef69ae391cfd890d8465e81d528c3ae90 Mon Sep 17 00:00:00 2001 From: gadzan Date: Fri, 15 May 2020 14:56:35 +0800 Subject: [PATCH] fix: bugs and dev mode --- README.md | 17 ++++++++++++-- build/generatoc.min.css | 2 +- build/generatoc.min.js | 2 +- build/generatoc.min.js.map | 1 + demo/index.html | 11 +++++---- ds | 0 package.json | 5 ++++- rollup.config.dev.js | 29 ++++++++++++++++++++++++ rollup.config.js | 32 ++++++++++++-------------- src/build.ts | 3 +-- src/index.ts | 26 ++++++++++----------- src/style/css.ts | 1 - src/style/main.css | 2 ++ yarn.lock | 46 +++++++++++++++++++++++++++++++++++++- 14 files changed, 132 insertions(+), 45 deletions(-) create mode 100644 build/generatoc.min.js.map create mode 100644 ds create mode 100644 rollup.config.dev.js delete mode 100644 src/style/css.ts diff --git a/README.md b/README.md index 131df6a..c6f2145 100644 --- a/README.md +++ b/README.md @@ -4,15 +4,18 @@ GeneraToc generates a table of contents (TOC) from headings in an HTML document. This library was inspired by [Tocify](https://github.com/gfranko/jquery.tocify.js) and [Tocbot](https://github.com/tscanlin/tocbot), but GeneraToc **uses native DOM** methods with **no other dependencies** and unlike Tocbot, GeneraToc does **NOT rely on id attribute** to navigate to the heading. +## DEMO + +[https://gadzan.github.io/generatoc/demo/](https://gadzan.github.io/generatoc/demo/) + ## Installation Install it with npm. -``` +```bash npm install --save generatoc ``` OR Install it with yarn. - ```bash yarn add generatoc ``` @@ -69,6 +72,12 @@ const selector = '#toc' generatoc.init({ content, heading, selector }) ``` +## Development + +```bash +npm run dev +``` + ### One more thing ** If the `selector` is not `#toc` you have to modify css file manully **, just replace all `#toc` string with your selector name in css file which can be found at `./node_modules/generatoc/src/style/main.css` @@ -77,6 +86,10 @@ generatoc.init({ content, heading, selector }) - [x] Destory method - [x] Reload method +- [x] Development env +- [] Test cases +- [] Show and close animation +- [] More configuration ## LICENSE MIT diff --git a/build/generatoc.min.css b/build/generatoc.min.css index 6dee9ac..9fcde73 100644 --- a/build/generatoc.min.css +++ b/build/generatoc.min.css @@ -1 +1 @@ -body{--toc-color:#1b81b8}#toc{position:fixed;left:50%;top:20%;margin-left:400px;border-left:1px solid #ddd}#toc a{display:block;color:#ccc}#toc a:hover{padding:0}#toc .active a,#toc a:hover{color:var(--toc-color)}#toc ul{margin-left:1em}#toc li{display:block}@media only screen and (max-width:540px){#toc{display:none}} \ No newline at end of file +body{--toc-color:#1b81b8}#toc{position:fixed;left:50%;top:20%;margin-left:400px;border-left:1px solid #ddd}#toc a{display:block;color:#ccc}#toc a:hover{padding:0}#toc .active a,#toc a:hover{color:var(--toc-color)}#toc ul{margin-left:1em}#toc li,#toc ul{transition:all .2s ease-out}#toc li{display:block}@media only screen and (max-width:540px){#toc{display:none}} \ No newline at end of file diff --git a/build/generatoc.min.js b/build/generatoc.min.js index 5ec01a3..fc97d1d 100644 --- a/build/generatoc.min.js +++ b/build/generatoc.min.js @@ -1 +1 @@ -var generatoc=function(){"use strict";var e,n="",t="",r="#toc",l=[];function o(e){return e[e.length-1]}function c(e){return+e.substr(1)}function i(e){Array.prototype.forEach.call(e.children,(function(e){var n=e.querySelectorAll("ul");n&&Array.prototype.forEach.call(n,(function(e){e&&(e.style.display="none")}))}))}function u(n){var t=n.target.getAttribute("data-toc-index");e[+t].scrollIntoView({behavior:"smooth"})}function a(e){e.stopPropagation(),console.log(e),i(document.querySelector(r));var n=e.target,t=function e(n){if(n&&n.children[0])return"ul"===n.children[0].tagName.toLowerCase()?(Array.prototype.forEach.call(n.children,(function(e){e.style.display="block"})),e(n.children[0])):n.children}(n.parentElement.parentElement.children[1]);t&&Array.prototype.forEach.call(t,(function(e){e.style.display="block"})),function e(n){n.id!==r.substr(1)&&(Array.prototype.forEach.call(n.children,(function(e){e.style.display="block"})),e(n.parentElement))}(n)}function d(e){var n=document.createElement("ul");if(e.ele){var t=function(e,n){var t=document.createElement("li");t.setAttribute("style","cursor: pointer;");var r=document.createElement("a");return r.setAttribute("data-toc-index",n.toString()),r.innerHTML=e||"",t.appendChild(r),t}(e.ele.textContent,e.index);t.addEventListener("click",u),function(e){e.addEventListener("click",a)}(n),n.append(t)}return e.children.length>0&&e.children.forEach((function(e){n.append(d(e))})),n}function h(e,n,t,r){var l=c(e.localName),i=n?c(n.localName):0,u={index:r,level:l,ele:null,children:[]};if(l===i)u.ele=e,u.level=l,function(e){if(0===e.length)return e;for(var n=o(e),t=e;0!==n.children.length;)t=n.children,n=o(n.children);return t}(t).push(u);else if(l>i){var a=l-i;(function(e){for(var n=e;0!==n.length;)n=o(n).children;return n})(t).push(function e(n,t,r,l){var o={index:l,level:null,ele:null,children:[]};return n<=0?(o.level=r,o.ele=t):(o.level=r-n,o.children=[e(--n,t,r,l)]),o}(a-1,e,l,r))}else u.ele=e,function(e,n,t){for(var r=o(n),l={index:t,level:null,ele:null,children:n};(!r.ele||r.level!==e)&&(l=r,void 0!==(r=o(r.children))););return l}(l,t,r).children.push(u)}var f={init:function(o){var c,u=o.content,a=o.heading,f=void 0===a?["h2","h3","h4","h5"]:a,s=o.selector;r=void 0===s?"#toc":s,t=f.join(","),n=u,(e=document.querySelector(n).querySelectorAll(t)).forEach((function(n,t){h(n,0===t?null:e[t-1],l,t)})),null===(c=document.querySelector(r))&&console.error("Toc element not found!"),l[0]&&(l[0].index=-1,Array.prototype.forEach.call(l[0].children,(function(e){c.appendChild(d(e))})),i(c))},destroy:function(){var e=document.querySelector(r);e&&(e.querySelectorAll("ul").forEach((function(e){e.removeEventListener("click",a)})),e.querySelectorAll("li").forEach((function(e){e.removeEventListener("click",u)})),l=[],e.innerHTML="")},refresh:function(){f.destroy(),f.init({content:n,heading:t.split(","),selector:r})}};return f}(); +var generatoc=function(){"use strict";var e,n="",t="",r="#toc",l=[];function o(e){return e[e.length-1]}function c(e){return+e.substr(1)}function i(e){Array.prototype.forEach.call(e.children,(function(e){var n=e.querySelectorAll("ul");n&&Array.prototype.forEach.call(n,(function(e){e&&(e.style.display="none")}))}))}function a(n){var t=n.target.getAttribute("data-toc-index");e[+t].scrollIntoView({behavior:"smooth"})}function u(e){e.stopPropagation(),i(document.querySelector(r));var n=e.target;(function e(n){if(n&&n.children&&0!==n.children.length)return"ul"===n.children[0].tagName.toLowerCase()?(Array.prototype.forEach.call(n.children,(function(e){"ul"===e.tagName.toLowerCase()&&(e.style.display="block")})),e(n.children[0])):void(n.style.display="block")})(n.parentElement.parentElement.children[1]);!function e(n){n.id!==r.substr(1)&&(Array.prototype.forEach.call(n.children,(function(e){e.style.display="block"})),e(n.parentElement))}(n)}function d(e){var n=document.createElement("ul");if(e.ele){var t=function(e,n){var t=document.createElement("li");t.setAttribute("style","cursor: pointer;");var r=document.createElement("a");return r.setAttribute("data-toc-index",n.toString()),r.innerHTML=e||"",t.appendChild(r),t}(e.ele.textContent,e.index);t.addEventListener("click",a),function(e){e.addEventListener("click",u)}(n),n.append(t)}return e.children.length>0&&e.children.forEach((function(e){n.append(d(e))})),n}function h(e,n,t,r){var l=c(e.localName),i=n?c(n.localName):0,a={index:r,level:l,ele:null,children:[]};if(l===i)a.ele=e,a.level=l,function(e){if(0===e.length)return e;for(var n=o(e),t=e;0!==n.children.length;)t=n.children,n=o(n.children);return t}(t).push(a);else if(l>i){var u=l-i;(function(e){for(var n=e;0!==n.length;)n=o(n).children;return n})(t).push(function e(n,t,r,l){var o={index:l,level:null,ele:null,children:[]};return n<=0?(o.level=r,o.ele=t):(o.level=r-n,o.children=[e(--n,t,r,l)]),o}(u-1,e,l,r))}else a.ele=e,function(e,n,t){for(var r=o(n),l={index:t,level:null,ele:null,children:n};r.level!==e&&(l=r,void 0!==(r=o(r.children))););return l}(l,t,r).children.push(a)}var f={init:function(o){var c,a=o.content,u=o.heading,f=void 0===u?["h2","h3","h4","h5"]:u,s=o.selector;r=void 0===s?"#toc":s,t=f.join(","),n=a,(e=document.querySelector(n).querySelectorAll(t)).forEach((function(n,t){h(n,0===t?null:e[t-1],l,t)})),console.log("headingList",l),null===(c=document.querySelector(r))&&console.error("Toc element not found!"),l[0]&&(l[0].index=-1,Array.prototype.forEach.call(l[0].children,(function(e){c.appendChild(d(e))})),i(c))},destroy:function(){var e=document.querySelector(r);e&&(e.querySelectorAll("ul").forEach((function(e){e.removeEventListener("click",u)})),e.querySelectorAll("li").forEach((function(e){e.removeEventListener("click",a)})),l=[],e.innerHTML="")},refresh:function(){f.destroy(),f.init({content:n,heading:t.split(","),selector:r})}};return f}(); diff --git a/build/generatoc.min.js.map b/build/generatoc.min.js.map new file mode 100644 index 0000000..7eceaa8 --- /dev/null +++ b/build/generatoc.min.js.map @@ -0,0 +1 @@ +{"version":3,"file":"generatoc.min.js","sources":[],"sourcesContent":[],"names":[],"mappings":""} \ No newline at end of file diff --git a/demo/index.html b/demo/index.html index a07920a..d579276 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,7 +4,7 @@ - Document + GeneraToc Demo