DocumentOutliner

Demo Quick Start GitHub Download

DocumentOutliner

A utility to make ol/ul list by using html5 outline algorithm.

Download GitHub

Demo

Quick start

Using CDN

You can easily start by using CDN.

Add the following description in the <head> tag of the web page you want to use DocumentOutliner.

<script src="https://unpkg.com/document-outliner@latest/bundle/document-outliner.js"></script>

You can also bundle the library with Browserify/Webpack

npm install document-outliner --save
import DocumentOutliner from 'document-outliner'

Wrap the container you want to make outline with

<div class="outline"></div>
<div class="container">
  <h1>The Tax Book</h1>
  <section>
    <h1>Earning money</h1>
    <p>Earning money is good.</p>
    <section>
      <h1>Getting a job</h1>
      <p>To earn money you typically need a job.</p>
    </section>
  </section>
</div>

Write the following script

new DocumentOutliner('.container');
outliner.makeList('.outline', {
  link: true,
  listType: 'ul',
  listClassName: 'list-group',
  itemClassName: 'list-group-item',
  anchorName: 'heading-$1'
});

If you want to use it with jQuery

Load the following script

<script src="https://unpkg.com/document-outliner@latest/bundle/document-outliner.js"></script>

Execute!

$(function () {
  $('.container').documentOutliner('.output', {
    link: true,
    listType: 'ul',
    listClassName: 'list-group',
    itemClassName: 'list-group-item',
    anchorName: 'heading-$1'
  });
});

Options

Some options are available when making new instances like below.

const outliner = new DocumentOutliner('.container');
outliner.makeList('.outline', {
  link: true,
  listType: 'ul',
  listClassName: 'list-group',
  itemClassName: 'list-group-item',
  anchorName: 'heading-$1'
});

For your reference, below is the list of the options available.

Name Default Description
link true create HTML anchor link
linkType 'ol' HTML list type
listClassName '' ol/ul class name
itemClassName '' li class name
linkClassName '' link class name
anchorName 'heading-$1' anchor link name ($1 is to be link number)
levelLimit 99 limit on number of level

Join development on

GitHub
License