active-toc

Table of Contents

• ActiveToc
• init
  • Parameters
• destroy
• unobserve

ActiveToc

Make your table of contents (toc) active.

Please visit ulf.codes/tools/active-toc to see ActiveToc in action or download the GitHub repo and open the file index.html to see the usage.

Embed the script active-toc.min.js in your web page.

<script src="active-toc.min.js"></script>

ActiveToc is using the IntersectionObserver API.

init

Without defining the toc container a call like ActiveToc.init() will search for an element with id="header" or a header tag and will make that element the container for the active toc. The container has to hold a set of links to headings (h2, h3, h4, h5, h6) inside of the document. Each heading needs to be identified with the id attribute. When scrolling contents or resizing the window, the links in the tocContainer will be assigned a combination of the CSS classes

• is-visible if the associated heading of the link is visible
• is-active if the heading is not visible, but still can be considered active
• is-highlight as the single one that´s suggested to be highlighted (to avoid highlighting multiple entries)

In addition, the headings themself also get CSS classes assigned:

• h-is-visible if the heading visible
• h-is-active if the heading is not visible, but still can be considered active
• h-is-highlight as the single heading that´s suggested to be highlighted (to avoid highlighting multiple entries)

If no tocContainer can be found, the headings of the document will only be processed if settings.headless is true, otherwise the headings will be ignored. If settings.headless is true, the headings alone will be analyzed and the h-is-visible, h-is-active, h-is-highlight classes will be assigned as appropriate to the headings.

Parameters

• settings (string | Object)? – Optional: Can be empty, a String, or a settings object. A String will be interpreted as a selector for the toc container. A settings object must contain a tocContainer property that will store the selector for the toc container.
  • settings.tocContainer string? Optional: Specify the selector of the container that holds the links to the headings inside of your document. Default id is #header. If not specified the first html header tag will be used.
  • settings.headless boolean Optional: If true, headings are processed without an associated tocContainer (optional, default false)
  • settings.intersectionOptions IntersectionOptions? Optional: The Intersection observer options as defined by the intersection observer API
  • settings.onVisible function (Object, Object)? Optional: A function that will be called when an element receives visible status. The toc entry that received visible status (null if the entry doesn´t exist) and the associated heading will be passed as arguments into the function.
  • settings.onActive function (Object, Object)? Optional: A function that will be called when an element receives active status. The toc entry that received active status (null if the entry doesn´t exist) and the associated heading will be passed as arguments into the function.
  • settings.onHighlight function (Object, Object)? Optional: A function that will be called when an element receives highlight status. The toc entry that received visible status (null if the entry doesn´t exit) and the associated heading will be passed as arguments into the function.
  • settings.offHighlight function ()? Optional: A function that will be called when a highlighted element looses the highlight status and no new highlighted element is available.

destroy

Revert all changes that have been made by ActiveToc

unobserve

Do no longer observe the headings of the document