@joinbox/tableofcontents
v1.2.0
Published
Table of contents component
Downloads
71
Readme
Table of Contents
Table of contents component that
- displays any elements that match an arbitrary selector
- supports templating
- scrolls smoothly
- adds anchor links if desired
Polyfills
Example
<h1 class="toc">Table of Contents</h1>
<table-of-contents-component
data-chapters-selector="h1:not(.toc)"
data-template-selector="template"
data-template-content-selector=".text"
data-template-link-selector="a"
>
<ul>
<template>
<li>
<a href="#">
<span>Go to</span>
<span class="text"></span>
</a>
</li>
</template>
</ul>
</table-of-contents-component>'
<h1>First Title</h1>
<p>Some long content …</p>
<h1>Second title</h1>
<p>Some long content …</p>
<script type="module" src="@joinbox/tableofcontents/TableOfContentsElement.js"></script>
Components
TableOfContentsElement
Exposed Element
<table-of-contents-component></table-of-contents-component>
Attributes
data-chapters-selector
: CSS selector for all contents that should be displayed in the table of contents. All matching element'stextContent
will be added to the toc.data-template-selector
: CSS selector for the template within the<table-of-contents-component>
. Use a<template>
tag that is not visible in the browser. All contents will be appended to the parent of this element. It is important, that this element only contains one direct descendant (where the click event listener will be added to).data-template-content-selector
: CSS selector for an element within the element that matchesdata-template-selector
. ItstextContent
will be replaced with thetextContent
of a content element (seedata-chapters-selector
).data-template-link-selector
(optional): CSS selector for an element within the element that matchesdata-template-selector
. If provided, an id will be added to the corresponding content element (if it does not already exist) and a matching href (anchor link) will be added to the table of contents entry.data-offset-value
(optional): Number that will be used as scroll offset. If it is set and valid,data-offset-selector
will be ignored.data-offset-selector
(optional): CSS selector for an element whose height will be used as scroll offset. Helpful if there is e.g. a sticky menu at the top of the screen to prevent elements from scrolling behind it.data-offset-value
precedesdata-offset-selector
.data-update-event-name
: Name of an event that, if fired onwindow
, will update the contents of the table of contents.