DocumentOutline

DocumentOutline is a vanilla JavaScript library that automatically generates the "Table of Contents" of an HTML document.

The table of contents you see on this page is generated with DocumentOutline.js.

How To Use

Import needed files:


x
<html>
  <head>
    <!-- Import CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AngeloFaella/DocumentOutline@1.0/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/DocumentOutline@1.0/DocumentOutline.js"></script>
  </body>
</html>

Then initialize the outline:


xxxxxxxxxx
let outline = new DocumentOutline();

Or initialize with custom options:


xxxxxxxxxx
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