DocumentOutline.js
DocumentOutline is a vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.
See a live example here.
How To Use
Import needed files:
<html>
<head>
<!-- Import CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AngeloFaella/[email protected]/outline.css">
</head>
<body>
<!-- Wrap your main content in a div -->
<div>
<!-- Use heading tags to structure your document -->
<h1> 1 - Title</h1>
<h2> 1.1 - Subtitle</h2>
<h3> 1.2 - Subtitle</h3>
...
<h1> 2 - Title</h1>
<h2> 2.1 - Subtitle</h2>
<h3> 2.2 - Subtitle</h3>
...
</div>
<!-- Import the library -->
<script src="https://cdn.jsdelivr.net/gh/AngeloFaella/[email protected]/DocumentOutline.js"></script>
</body>
</html>
Then initialize the outline:
let outline = new DocumentOutline();
Or initialize with custom options:
let outline = new DocumentOutline({
backgroundColor: '#02181d',
textColor: 'white',
textColorLight: 'lightgrey',
accentColor: 'rgb(221 201 0)',
defaultOpen: false
});
Documentation
Classes
DocumentOutline
Kind: global class
Functions
new DocumentOutline(options)
| Param | Type | Description |
|---|---|---|
| options | Object |
|
| [options.backgroundColor] | String |
background color of the outline |
| [options.textColor] | String |
text color of the first-level sections |
| [options.accentColor] | String |
accent color of the outline |
| [options.textColorLight] | String |
text color of the sub sections |
| [options.defaultOpen] | String |
indicate the initial mode of the outline. Outline is open by default on desktop and closed on mobile. |
onSearchInput(text)
Called when a search is submitted
Kind: global function
| Param | Type | Description |
|---|---|---|
| text | String |
text to search |
showOutline()
Show document outline.
On desktop the outline is placed to the left of the main content takes 20% of the width.
On mobile the outline is placed above the main content and takes 100% of the width.
Kind: global function
hideOutline()
Hide document outline.
On desktop the outline reduces its width to 3%.
On mobile the outline disappears completely and a floating button appears in the bottom-left corner.
Kind: global function
153 Jan 2, 2023
25 Dec 29, 2022
1 Aug 24, 2021
11 Sep 7, 2022
11 Nov 10, 2022
3 Oct 25, 2022
50 Nov 9, 2022
113 Dec 30, 2022
13 Mar 8, 2022
32 Jan 3, 2023