fix: bugs and dev mode

gadzan · May 15, 2020 · 9c5273f · 9c5273f
1 parent c4c3574
commit 9c5273f
Show file tree

Hide file tree

Showing 14 changed files with 132 additions and 45 deletions.
diff --git 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
diff --git a/build/generatoc.min.js b/build/generatoc.min.js
diff --git a/build/generatoc.min.js.map b/build/generatoc.min.js.map
diff --git a/demo/index.html b/demo/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="../build/generatoc.min.css">
-  <title>Document</title>
+  <title>GeneraToc Demo</title>
   <style>
     .post-content {
       width: 75%;
@@ -15,6 +15,8 @@
 </head>
 <body>
   <div class="post-content">
+      <button onclick="generatoc.refresh()">Refresh</button>
+      <button onclick="generatoc.destroy()">Destroy</button>
       <h1>H1: Donald Trump's 'stupid' suggestion for fighting coronavirus prompts furious response from medical experts</h1>
       <p>Donald Trump has been roundly slammed after suggesting that 'disinfectant injections' could help fight coronavirus during a bizarre White House press briefing.</p>
       <h2>H2: This is the 1st H2</h2>
@@ -35,7 +37,7 @@ <h5>H5: This is the 1st H5</h5>
         <p>Bryan had said the coronavirus appears to weaken more quickly when exposed to sunlight, heat and humidity, which could lead to a fall in infections as the weather improves.</p>
       <h6>H6: This is the 1st H6</h6>
       <p>Trump appeared to take that idea and run with it.</p>
-      <h2>H2: This is the 2nd H2</h2>
+      <h2>H2: This is the 3rd H2</h2>
       <p>
         "Supposing we hit the body with a tremendous... whether it's ultraviolet or just very powerful light," he asked.
       </p>
@@ -56,20 +58,21 @@ <h4>H4: This is the 3rd H4</h4>
       <p>
         After the briefing, health experts were quick to point out that ingesting such substances would likely prove fatal.
       </p>
-      <h2>H2: This is the 3rd H2</h2>
+      <h2>H2: This is the 4th H2</h2>
       <p>
         "This notion of injecting or ingesting any type of cleansing product into the body is irresponsible, and it's dangerous," global health policy expert Dr Vin Gupta told NBC. 
       </p>
       <p>
         He and other medical professionals reacting on social media urged people to ignore Trump's suggestions.
       </p>
-      <h5>H3: This is the 2nd H5</h5>
+      <h5>H5: This is the 2nd H5</h5>
       <p>
         It isn't the first time the president has pushed unsubstantiated 'solutions' to coronavirus, as he previously promoted hydroxychloroquine as a possible cure - a drug that has no proven benefit in fighting covid-19.
       </p>
       <p>|</p>
       <p>|</p>
       <p>|</p>
+      <h5>H5: This is the 3rd H5</h5>
       <p>|</p>
       <p>|</p>
       <p>|</p>

diff --git a/ds b/ds
diff --git a/package.json b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "generatoc",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Automatically generate table of content from heading of HTML document",
   "main": "dist/index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "build": "rollup -c",
+    "dev": "rollup -w -c rollup.config.dev.js",
     "release": "npm publish"
   },
   "repository": {
@@ -41,6 +42,8 @@
     "postcss-preset-env": "^6.7.0",
     "rollup": "^2.10.0",
     "rollup-plugin-postcss": "^3.1.1",
+    "rollup-plugin-serve": "^1.0.1",
+    "rollup-plugin-sourcemaps": "^0.6.2",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-typescript2": "^0.27.1",
     "tslib": "^2.0.0",

diff --git a/rollup.config.dev.js b/rollup.config.dev.js
@@ -0,0 +1,29 @@
+import path from 'path';
+import devServe from 'rollup-plugin-serve'
+import sourceMaps from "rollup-plugin-sourcemaps"
+import configList from './rollup.config'
+
+const PORT = 3030;
+
+const devConfig = configList
+  .filter((_config, index) => index !== 0)
+  .map((config, _index) => {
+    config.output.sourcemap = true;
+    config.plugins = [
+      ...config.plugins,
+      ...[
+        devServe({
+          open: true,
+          openPage: '/demo/',
+          port: PORT,
+          contentBase: [
+            path.resolve(__dirname, ''),
+          ]
+        })
+      ],
+      sourceMaps()
+    ]
+    return config;
+  })
+
+export default devConfig
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,25 +1,24 @@
 import path from 'path';
-// import typescript from '@rollup/plugin-typescript';
 import typescript from 'rollup-plugin-typescript2';
 import babel from '@rollup/plugin-babel'
 import postcss from 'rollup-plugin-postcss';
 import { terser } from "rollup-plugin-terser";
 
 const babelOptions = {
   presets: ['@babel/preset-env'],
+  babelHelpers: 'bundled'
 }
 
 export default [
+  // Output esm version to dist folder
   {
     input: [
       path.resolve(__dirname, 'src', 'index.ts'),
     ],
-    output: [
-      {
-        file: path.resolve(__dirname, 'dist','index.js'),
-        format: 'esm',
-      },
-    ],
+    output: {
+      file: path.resolve(__dirname, 'dist','index.js'),
+      format: 'esm',
+    },
     plugins: [
       typescript({
         typescript: require('typescript'),
@@ -32,19 +31,18 @@ export default [
       babel(babelOptions)
     ]
   },
+  // Output browser version to build folder
   {
     input: {
       'generatoc.min': path.resolve(__dirname, 'src','build.ts'),
     },
-    output: [
-      {
-        dir: 'build',
-        // file: path.resolve(__dirname, 'build','generatoc.min.js'),
-        format: 'iife',
-        name: 'generatoc',
-        plugins: [ terser() ]
-      }
-    ],
+    output: {
+      dir: 'build',
+      // file: path.resolve(__dirname, 'build','generatoc.min.js'),
+      format: 'iife',
+      name: 'generatoc',
+      plugins: [ terser() ]
+    },
     plugins: [
       typescript({
         typescript: require('typescript'),
@@ -55,8 +53,6 @@ export default [
         minimize: true,
       }),
       babel(babelOptions),
-      // terser()
     ]
   }
 ]
-
diff --git a/src/build.ts b/src/build.ts
@@ -1,5 +1,4 @@
-import './style/css.ts'
-
+import './style/main.css'
 import generatoc from './index'
 
 export default generatoc
diff --git a/src/index.ts b/src/index.ts
@@ -78,7 +78,7 @@ function getLastHeadingParentOf (level: number, headings: List[], index: number)
     ele: null,
     children: headings
   }
-  while (!tmp.ele || tmp.level !== level) {
+  while (tmp.level !== level) {
     parent = tmp
     tmp = last(tmp.children)
     if (typeof tmp === 'undefined') {
@@ -134,30 +134,27 @@ function traceParentAndShow (ele: HTMLElement) {
   }
 }
 
-function getRealUl (element: HTMLElement | Element): HTMLCollection | undefined {
-  if (!element || !element.children[0]) {
+function showRealUlChildren (element: HTMLElement | Element): HTMLCollection | undefined {
+  if (!element || !element.children || element.children.length === 0) {
     return undefined
   }
   if (element.children[0].tagName.toLowerCase() === 'ul') {
-    Array.prototype.forEach.call(element.children, (ul: HTMLElement) => {
-      ul.style.display = 'block'
+    Array.prototype.forEach.call(element.children, (ele: HTMLElement) => {
+      if (ele.tagName.toLowerCase() === 'ul') {
+        ele.style.display = 'block'
+      }
     })
-    return getRealUl(element.children[0])
+    return showRealUlChildren(element.children[0])
   }
-  return element.children
+  (<HTMLElement>element).style.display = 'block'
 }
 
 function showEvent (e: Event) {
   e.stopPropagation()
-  console.log(e)
+  // console.log(e)
   hideAllTocSubHeading(document.querySelector(tocSelector)!)
   const element = <HTMLElement>e.target
-  const uls = getRealUl(element.parentElement!.parentElement!.children[1])
-  if (uls) {
-    Array.prototype.forEach.call(uls, (ul: HTMLElement) => {
-      ul.style.display = 'block'
-    })
-  }
+  const ul = showRealUlChildren(element.parentElement!.parentElement!.children[1])
   traceParentAndShow(element)
 }
 
@@ -238,6 +235,7 @@ const generatoc: Generatoc = {
       previousNode = index === 0 ? null : headingNode[index - 1]
       processNode(hNode, previousNode, headingList, index)
     })
+    console.log('headingList', headingList)
     renderToc()
   },
   destroy () {

diff --git a/src/style/css.ts b/src/style/css.ts
diff --git a/src/style/main.css b/src/style/main.css
@@ -27,10 +27,12 @@ body {
 
 #toc ul {
   margin-left: 1em;
+  transition: all .2s ease-out;
 }
 
 #toc li {
   display: block;
+  transition: all .2s ease-out;
 }
 
 @media only screen and (max-width: 540px) {