feat: Animations

README.md

@@ -91,14 +91,23 @@ yarn install
 npm run dev
 ```
 
+## Other init options
+```
+// **scrollHistory**: Accepts a boolean: true or false
+// Adds a hash to the page url, to maintain history, when scrolling to a TOC item
+{
+  scrollHistory: false
+}
+```
+
 ## TODO
 
 - [x] Destory method
 - [x] Reload method
 - [x] Development env
 - [x] Test cases
-- [ ] Show and close animation
-- [ ] More configuration
+- [x] Show and close animation
+- [ ] More configurations
 
 ## Using with SSR
 

__tests__/index.test.ts

@@ -2,56 +2,64 @@ import generatoc from '../src/index';
 
 import createElement from './utils/createTestEnv'
 
-function checkElements () {
+
+function checkElements (ul: number, li: number, a: number) {
   const toc = document.querySelector('#toc')
   const uls = toc!.querySelectorAll('ul')
   const lis = toc!.querySelectorAll('li')
   const as = toc!.querySelectorAll('a')
-  expect(uls.length).toEqual(16)
-  expect(lis.length).toEqual(13)
-  as[6].click()
-  expect(
-    uls[8].style.display
-    + uls[9].style.display 
-    + uls[10].style.display
-  ).toEqual('blockblocknone')
-  as[2].click()
-  expect(
-    uls[8].style.display
-    + uls[9].style.display
-  ).toEqual('nonenone')
-  as[3].click()
-  expect(uls[4].style.display).toEqual('block')
-  as[10].click()
-  expect(
-    uls[14].style.display
-    + uls[15].style.display
-  ).toEqual('blockblock')
+  if (ul > 0) {
+    as[6].click()
+  }
+  expect(uls.length).toEqual(ul)
+  expect(lis.length).toEqual(li)
+  expect(as.length).toEqual(a)
 }
 
-test('GeneraToc Init function', () => {
-  createElement()
-  window.HTMLElement.prototype.scrollIntoView = jest.fn()
-  generatoc.init({content: '.post-content'})
-  checkElements()
-})
+describe('GeneraToc Init function', () => {
+  it('Test empty HTML case', () => {
+    createElement(false, false, false)
+    generatoc.init({ content: '.post-content' })
+    document.body.innerHTML = ''
 
-test('GeneraToc Destory function', () => {
-  generatoc.destroy()
-  const toc = document.querySelector('#toc')
-  expect(toc).not.toBeNull()
-  if (toc) {
-    expect(toc.innerHTML).toEqual('')
-  }
-})
+    createElement(false, false, true)
+    generatoc.init({ content: '.post-content' })
 
-test('GeneraToc Refesh function', () => {
-  generatoc.refresh()
-  const toc = document.querySelector('#toc')
-  expect(toc).not.toBeNull()
-  if (toc) {
-    const uls = toc.querySelectorAll('ul')
-    expect(uls.length).toBeGreaterThan(0)
-  }
-  checkElements()
-})
+    document.body.innerHTML = ''
+    createElement(false, true, true)
+    generatoc.init({ content: '.post-content' })
+    checkElements(0, 0, 0)
+  })
+
+  it('Test normal HTML case', () => {
+    document.body.innerHTML = ''
+    createElement(true, true, true)
+    window.HTMLElement.prototype.scrollIntoView = jest.fn()
+    generatoc.init({ content: '.post-content' })
+    checkElements(16, 13, 13)
+  })
+
+  it('GeneraToc Refesh function', () => {
+    generatoc.refresh()
+    const toc = document.querySelector('#toc')
+    expect(toc).not.toBeNull()
+    if (toc) {
+      const uls = toc.querySelectorAll('ul')
+      expect(uls.length).toBeGreaterThan(0)
+    }
+    checkElements(16, 13, 13)
+  })
+
+  it('GeneraToc Destory function', () => {
+    generatoc.destroy()
+    let toc = document.querySelector('#toc')
+    expect(toc).not.toBeNull()
+    if (toc) {
+      expect(toc.innerHTML).toEqual('')
+    }
+    toc?.remove()
+    toc = document.querySelector('#toc')
+    generatoc.destroy()
+    expect(toc).toBeNull()
+  })
+})

__tests__/utils/createTestEnv.ts

@@ -1,19 +1,26 @@
-
-export default function createElement () {
+export default function createElement (putContent: boolean, setToc: boolean, setPost: boolean) {
   const postContent: HTMLElement = document.createElement('div')
   postContent.setAttribute('class', 'post-content')
 
-  const headings = ['h1', 'h2', 'h3', 'h2', 'h3', 'h4', 'h5', 'h6', 'h2', 'h4', 'h6', 'h3', 'h4', 'h2', 'h5', 'h5']
+  if (putContent) {
+    const headings = ['h1', 'h2', 'h3', 'h2', 'h3', 'h4', 'h5', 'h6', 'h2', 'h4', 'h6', 'h3', 'h4', 'h2', 'h5', 'h5']
 
-  headings.forEach((h) => {
-    const hele: HTMLElement = document.createElement(h)
-    hele.innerHTML = h
-    postContent.appendChild(hele)
-  })
+    headings.forEach((h) => {
+      const hele: HTMLElement = document.createElement(h)
+      hele.innerHTML = h
+      postContent.appendChild(hele)
+    })
+  }
 
   const toc: HTMLElement = document.createElement('div')
   toc.setAttribute('id', 'toc')
   toc.innerHTML = 'test'
-  document.body.appendChild(postContent)
-  document.body.appendChild(toc)
+
+  if (setPost) {
+    document.body.appendChild(postContent)
+  }
+
+  if (setToc) {
+    document.body.appendChild(toc)
+  }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "generatoc",
-  "version": "1.1.7",
+  "version": "1.2.0",
   "description": "Automatically generate table of content from heading of HTML document",
   "main": "dist/index.js",
   "scripts": {
@@ -43,6 +43,7 @@
     "@rollup/plugin-typescript": "^4.1.1",
     "@types/jest": "^25.2.2",
     "coveralls": "^3.1.0",
+    "eslint": "^7.0.0",
     "jest": "^26.0.1",
     "postcss-preset-env": "^6.7.0",
     "rollup": "^2.10.0",