Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/appleple/document-outliner
HTML5 outliner
https://github.com/appleple/document-outliner
markup npm
Last synced: 5 days ago
JSON representation
HTML5 outliner
- Host: GitHub
- URL: https://github.com/appleple/document-outliner
- Owner: appleple
- License: mit
- Created: 2018-12-14T05:04:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:39:33.000Z (almost 2 years ago)
- Last Synced: 2024-05-29T05:45:57.818Z (6 months ago)
- Topics: markup, npm
- Language: TypeScript
- Homepage: https://appleple.github.io/document-outliner/
- Size: 3.06 MB
- Stars: 20
- Watchers: 8
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# document-outliner
[](https://badge.fury.io/js/document-outliner)
[](https://circleci.com/gh/appleple/document-outliner/tree/master)
[](https://www.npmjs.com/package/document-outliner)
[](https://raw.githubusercontent.com/appleple/document-outliner/master/LICENSE)
A utility to make ol/ul list by using html5 outline algorithm.
**Specifications**
> [Living Standard — Last Updated 11 December 2018](https://html.spec.whatwg.org/multipage/sections.html#outlines)
## Installation
### Vanilla (Plain JavaScript)
#### via npm
```sh
npm install document-outliner
```
#### via yarn
```sh
yarn add document-outliner
```
#### vid cdn
```html
```
### jQuery plugin
#### via cdn
```html
```
## Usage
### Vanilla (Plain JavaScript)
```javascript
import DocumentOutliner from 'document-outliner';
const outliner = new DocumentOutliner('.js-outline-src');
outliner.makeList('.js-outline-output', {listType: 'ul'});
```
### jQuery
```javascript
$(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**
```html
The Tax Book
Earning money
Earning money is good.
Getting a job
To earn money you typically need a job.
Spending money
Spending is what money is mainly used for.
Cheap things
Buying cheap things often not cost-effective.
Expensive things
The most expensive thing is often not the most cost-effective either.
Investing money
You can lend your money to other people.
Losing money
If you spend money or invest money, sooner or later you will lose money.
Poor judgement
Usually if you lose money it's because you made a mistake.
```
**JavaScript**
```javascript
const outliner = new DocumentOutliner('.container');
outliner.makeList('.outline', {
link: true,
listType: 'ul',
listClassName: 'list-group',
itemClassName: 'list-group-item',
anchorName: 'heading-$1'
});
```
**Yield**
```html
The Tax Book
Earning money
Earning money is good.
Getting a job
To earn money you typically need a job.
Spending money
Spending is what money is mainly used for.
Cheap things
Buying cheap things often not cost-effective.
Expensive things
The most expensive thing is often not the most cost-effective either.
Investing money
You can lend your money to other people.
Losing money
If you spend money or invest money, sooner or later you will lose money.
Poor judgement
Usually if you lose money it's because you made a mistake.
```
## Licence
[MIT](https://github.com/appleple/document-outliner/blob/master/LICENSE)