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

• Use a template polyfill if needed
• Use a scrollIntoView polyfill if needed

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's textContent 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 matches data-template-selector. Its textContent will be replaced with the textContent of a content element (see data-chapters-selector).
• data-template-link-selector (optional): CSS selector for an element within the element that matches data-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 precedes data-offset-selector.
• data-update-event-name: Name of an event that, if fired on window, will update the contents of the table of contents.