Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
__tests__
bundle
docs
example
lib
src
.gitignore
LICENSE
README.md
jest.config.js
package-lock.json
package.json
tsconfig.json
webpack.dev.js
webpack.prod.js

README.md

document-outliner

npm version CircleCI npm download GitHub license

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

Specifications

Living Standard — Last Updated 11 December 2018

Installation

Vanilla (Plain JavaScript)

via npm

npm install document-outliner

via yarn

yarn add document-outliner

vid cdn

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

jQuery plugin

via cdn

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

Usage

Vanilla (Plain JavaScript)

import DocumentOutliner from 'document-outliner';

const outliner = new DocumentOutliner('.js-outline-src');
outliner.makeList('.js-outline-output', {listType: 'ul'});

jQuery

$(function () {
  $('.container').documentOutliner('.output', {link: false});
});

Options

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

Example

HTML

<div class="outline"></div>

<div class="container">
  <h1 id="the-tax-book">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>
  <section>
    <h1 id="spending-money">Spending money</h1>
    <p>Spending is what money is mainly used for.</p>
    <section>
      <h1>Cheap things</h1>
      <p>Buying cheap things often not cost-effective.</p>
    </section>
    <section>
      <h1>Expensive things</h1>
      <p>The most expensive thing is often not the most cost-effective either.</p>
    </section>
  </section>
  <section>
    <h1 id="investing-money">Investing money</h1>
    <p>You can lend your money to other people.</p>
  </section>
  <section>
    <h1 id="losing-money">Losing money</h1>
    <p>If you spend money or invest money, sooner or later you will lose money.</p>
    <section>
      <h1>Poor judgement</h1>
      <p>Usually if you lose money it's because you made a mistake.</p>
    </section>
  </section>
</div>

JavaScript

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

Yield

<div class="outline">
  <ul class="level-1 list-group">
    <li class="list-group-item"><a href="#the-tax-book" class="scrollTo">The Tax Book</a>
      <ul class="level-2 list-group">
        <li class="list-group-item"><a href="#heading-2" class="scrollTo">Earning money</a>
          <ul class="level-3 list-group">
            <li class="list-group-item"><a href="#heading-3" class="scrollTo">Getting a job</a></li>
          </ul>
        </li>
        <li class="list-group-item"><a href="#spending-money" class="scrollTo">Spending money</a>
          <ul class="level-3 list-group">
            <li class="list-group-item"><a href="#heading-5" class="scrollTo">Cheap things</a></li>
            <li class="list-group-item"><a href="#heading-6" class="scrollTo">Expensive things</a></li>
          </ul>
        </li>
        <li class="list-group-item"><a href="#investing-money" class="scrollTo">Investing money</a></li>
        <li class="list-group-item"><a href="#losing-money" class="scrollTo">Losing money</a>
          <ul class="level-3 list-group">
            <li class="list-group-item"><a href="#heading-9" class="scrollTo">Poor judgement</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

<div class="container">
  <h1 id="the-tax-book">The Tax Book</h1>
  <section>
    <h1 id="heading-2">Earning money</h1>
    <p>Earning money is good.</p>
    <section>
      <h1 id="heading-3">Getting a job</h1>
      <p>To earn money you typically need a job.</p>
    </section>
  </section>
  <section>
    <h1 id="spending-money">Spending money</h1>
    <p>Spending is what money is mainly used for.</p>
    <section>
      <h1 id="heading-5">Cheap things</h1>
      <p>Buying cheap things often not cost-effective.</p>
    </section>
    <section>
      <h1 id="heading-6">Expensive things</h1>
      <p>The most expensive thing is often not the most cost-effective either.</p>
    </section>
  </section>
  <section>
    <h1 id="investing-money">Investing money</h1>
    <p>You can lend your money to other people.</p>
  </section>
  <section>
    <h1 id="losing-money">Losing money</h1>
    <p>If you spend money or invest money, sooner or later you will lose money.</p>
    <section>
      <h1 id="heading-9">Poor judgement</h1>
      <p>Usually if you lose money it's because you made a mistake.</p>
    </section>
  </section>
</div>

Licence

MIT