Clone or download
atsu666
atsu666 1.0.4
Latest commit 7b0d7b5 Dec 25, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci fix circleci Dec 20, 2018
__tests__ fix test case Dec 21, 2018
bundle bugfix: listClassName option Dec 21, 2018
docs fix docs Dec 20, 2018
example bugfix: untitled section. Dec 21, 2018
lib bugfix: listClassName option Dec 21, 2018
src bugfix: listClassName option Dec 21, 2018
.gitignore first commit Dec 14, 2018
LICENSE Initial commit Dec 14, 2018
README.md fix readme Dec 25, 2018
jest.config.js add test. Dec 18, 2018
package-lock.json 1.0.4 Dec 25, 2018
package.json 1.0.4 Dec 25, 2018
tsconfig.json first commit Dec 14, 2018
webpack.dev.js first commit Dec 14, 2018
webpack.prod.js add jquery plugin Dec 19, 2018

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