Skip to content

Commit

Permalink
feat: new config scrollOffset and duration
Browse files Browse the repository at this point in the history
  • Loading branch information
Gadzan committed Jun 21, 2020
1 parent 1ed5d8f commit 34f4eab
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 15 deletions.
27 changes: 22 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ OR Install it with yarn.
yarn add generatoc
```

OR include in browser environment
include the script at the bottom of the page before the closing body tag.
```html
<script src="https://cdn.jsdelivr.net/npm/generatoc/build/generatoc.min.js"></script>
Expand All @@ -55,7 +56,7 @@ Define a `div` element with id attribute
<div id="toc"></div>
```

Use GeneraToc with typescript:
#### Use GeneraToc with typescript:
```typescript
import generatoc from 'generatoc'
// Typescript
Expand All @@ -71,7 +72,7 @@ const selector: string = '#toc'
generatoc.init({ content, heading, selector })
```

Use GeneraToc with javascript:
#### Use GeneraToc with javascript:
```javascript
// JavaScript
import generatoc from 'generatoc'
Expand All @@ -81,6 +82,14 @@ const selector = '#toc'
generatoc.init({ content, heading, selector })
```

#### Use in browser environment
```javascript
const content = '.post-content'
const heading = ['h2', 'h3', 'h4', 'h5']
const selector = '#toc'
generatoc.init({ content, heading, selector })
```

### You need to know when importing css file

**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`
Expand All @@ -94,10 +103,18 @@ 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
// 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,
// scrollOffset: Accepts a number: default to 0
// Scroll to the target with a vertical offset(pixel). If you have a fixed header in your page, this is what you need to set.
scrollOffset: 0,
// duration: Accepts a number: default to 7
// The duration of scroll animation, a larger number means slower scroll. please input with a number larger than 1.
duration: 7,
}
```

Expand Down
3 changes: 2 additions & 1 deletion build/generatoc.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

121 changes: 116 additions & 5 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,52 +19,107 @@
<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>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h2>H2: This is the 1st H2</h2>
<p>
The US President also pondered whether it was possible to shine ultraviolet rays 'inside the body'.
</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h3>H3: This is the 1st H3</h3>
<p>
The US president's ideas were quickly dubbed 'irresponsible and dangerous' by medical experts following his rambling speculation in front of reporters, the Mirror reports.
</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h2>H2: This is the 2nd H2</h2>
<p>Walter Shaub, the former boss of the Office of Government Ethics in the US, is reported to have said on Twitter: "It is incomprehensible to me that a moron like this holds the highest office in the land and that there exist people stupid enough to think this is OK.</p>
<p>Walter Shaub, the former boss of the Office of Government Ethics in the US, is reported to have said on Twitter: "It is incomprehensible to me that a moron like this holds the highest office in the land and that there exist people stupid enough to think this is OK.</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h3>H3: This is the 2nd H3</h3>
<p>"I can’t believe that in 2020 I have to caution anyone listening to the president that injecting disinfectant could kill you.”</p>
<p>"I can’t believe that in 2020 I have to caution anyone listening to the president that injecting disinfectant could kill you.”</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h4>H4: This is the 1st H4</h4>
<p>Trump, who is already facing ongoing criticism for his handling of the pandemic, raised the ideas as he questioned William Bryan, acting head of the US Department of Homeland Security's Science and Technology Directorate.</p>
<p>Trump, who is already facing ongoing criticism for his handling of the pandemic, raised the ideas as he questioned William Bryan, acting head of the US Department of Homeland Security's Science and Technology Directorate.</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<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>
<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>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h6>H6: This is the 1st H6</h6>
<p>Trump appeared to take that idea and run with it.</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<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>
<!-- <h3>H3</h3> -->
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h4>H4: This is the 2nd H4</h4>
<p>
"Supposing we brought the light inside the body, which you can do either through the skin or in some other way. Sound interesting.
</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h6>H6: This is the 2nd H6</h6>
<p>
"I see the disinfectant, where it knocks it out in a minute, one minute, and is there a way we can do something like that, by injection inside... or almost a cleaning...
</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<h3>H3: This is the 3rd H3</h3>
<p>
"As you see it gets in the lungs, and it does a tremendous number on the lungs."
</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<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>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<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>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<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.
Expand Down Expand Up @@ -96,6 +151,62 @@ <h5>H5: This is the 3rd H5</h5>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
</div>
<div id="toc"></div>
<script src="../build/generatoc.min.js"></script>
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "generatoc",
"version": "1.2.3",
"version": "1.2.4",
"description": "Automatically generate table of content from heading of HTML document",
"main": "dist/index.js",
"scripts": {
Expand Down
Loading

0 comments on commit 34f4eab

Please sign in to comment.