DocumentOutliner

Demo Quick Start GitHub Download

DocumentOutliner

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

Download GitHub

Demo

  1. The Tax Book
    1. Earning money
      1. Getting a job
    2. Spending money
      1. Cheap things
      2. Expensive things
    3. Investing money
    4. Losing money
      1. Poor judgement

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
scrollable

Join development on

GitHub
License