document-outliner

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