jquery-docout

This is a jQuery plugin for producing Document Outline as shown below.

How it works

By default, the plugin:

• finds all header tags (h1, h2 etc) inside a given element (ex. body),
• assigns them ids if they don't already have and
• produces nested unordered lists of links to them respecting the hierarchy

The plugin is already being used in my blog.

Installation

via npm

There is an npm package available. Install it with:

npm install jquery.docout

via JS file

Download the jquery.docout.min.js file from the dist folder and add it to your application.

Using jquery.docout

Default usage

Suppose you have a div with id content including the content you want to outline and another div with id outline in which you want to render the resolved outline. All you have to do is:

$('#content').docout({ target: '#outline' });

Plugin options

The plugins supports the following options:

• target: where the document outline will be rendered. Defaults to body
• immediate: whether the document oultine should be resolved and rendered immediatelly. Defaults to true. Check this example for non-immediate usage.
• rootClass: the css class to be appended to the outer outline wrapper (which by default is a ul element). Defaults to docout-root-wrap
• childClass: the css class to be appended to each child wrapper (ex. ul > li > ul.docout-child-wrap). Defaults to docout-child-wrap
• elements: the elements to be outlined. The order matters. Defaults to [ "h1", "h2", "h3", "h4", "h5", "h6", "h7", "h8" ]
• replace: whether the resolve outlined will replace the target's content or be prepended to it. Defaults to false
• gntLink: function used to generate an outline link. The original element (ex. h1) is passed as an argument and it has already been assigned an id in case it didn't have one. If you don't set an override, the original function returns a simple a tag with appropriate href attribute and text.
• gntLinkWrap: function used to generate the wrapper of an outline link. The original element (ex. h1) is passed as an argument and it has already been assigned an id in case it didn't have one. If you don't set an override, the original function returns a simple li tag.
• gntRootWrap: function used to generate the outer wrapper of the outline. If you don't set an override, the original function returns a simple ul tag with the css class defined at the rootClass option.
• gntChildWrap: function used to generate each child collection wrapper (ex. h1 > h2 > h3, h3, h3). If you don't set an override, the original function returns a simple ul tag with the css class defined at the childClass option.
• gntId: function used to resolve the id of each outline link href in case the original element (ex. h1) didn't have one. If you don't define an override, the original function returns docout-<index> where index is the index of the given element in the list of all elements that will be outlined.

Outlining other tags

Suppose your page has the following structure and you want to outline it.

<div class="book">
  <div class="book-title">Sapiens</div>
  <div class="book-metadata">
    <strong>Properties</strong>
 
    <p>Non dolere, inquam, istud quam vim habeat postea videro; Quippe: habes enim a rhetoribus; Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Venit ad extremum; Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. </p>
  </div>
 
  <div class="book-statistics">
    <strong>Statistics</strong>
 
    <p>Non dolere, inquam, istud quam vim habeat postea videro; Quippe: habes enim a rhetoribus; Atque haec ita iustitiae propria sunt, ut sint virtutum reliquarum communia. Sit ista in Graecorum levitate perversitas, qui maledictis insectantur eos, a quibus de veritate dissentiunt. Venit ad extremum; Quid enim ab antiquis ex eo genere, quod ad disserendum valet, praetermissum est? Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Sed tamen omne, quod de re bona dilucide dicitur, mihi praeclare dici videtur. Nummus in Croesi divitiis obscuratur, pars est tamen divitiarum. </p>
  </div>
</div>

You can create the outline with:

$('body').docout({ elements: [ ".book-title", ".book-metadata strong, .book-statistics strong" ] });

See this example for more details.

Contributing

1. Fork it ( https://github.com/iridakos/jquery.docout/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Credits

I used the awesome jQuery Boilerplate template to develop this plugin.

License

This code is open source under the MIT License terms.