Table of Content Component

Component to insert a table of content that helps visitors to navigate the content of the page.

User Story

As an author, I want to insert a table of content to my page that lists all the titles that are within the page.

Requirements

• Lists all H1-H6 elements that are rendered on the page, regardless of which component renders them (title or teaser component, custom components, RTE, etc).
• Lists also those titles that are coming from the page template or from (nested) experience fragments.
• Links to the corresponding component on the page by using the id attribute that is set on the closest parent from the title element.
• Creates a nested list of the titles found on the page, rendering them either with UL/LI or OL/LI.
• Capability for the author to choose how to render the list (unordered list - the default, or ordered list).
• Capability for the author to restrict the start level (default being 1) and the end level (default being 6) of the titles listed.

Extended Requirements

• Capability for the Carousel, Tabs and Accordion to automatically show potentially hidden element when navigating to it.
• Same to function also when loading a page with the hash in the url: automatically show the corresponding Carousel, Tabs and Accordion element.

Nesting algorithm

Nesting should function as a child-parent relationship where each item must have a top-level parent node, and where multiple nesting cannot happen without a real element to materialize it. So it should never be possible to start an item or sub-item that is nested more than 1 level.

--------------------------------
1: Simple example

h1. One    |  * One
h2. Two    |      * Two
h3. Three  |          * Three
h4. Four   |              * Four

--------------------------------
2: Simple example

h1. One    |  * One
h2. Two    |      * Two
h1. Three  |  * Three
h2. Four   |      * Four

--------------------------------
3: Ignore unused levels in-between

h1. One    |  * One
h3. Two    |      * Two
h5. Three  |          * Three
h6. Four   |              * Four

--------------------------------
4: Ignore unused levels at start

h3. One    |  * One
h4. Two    |      * Two
h3. Three  |  * Three
h4. Four   |      * Four

--------------------------------
5: Nest items only when they have parents

h4. One    |  * One
h3. Two    |  * Two
h2. Three  |  * Three
h4. Four   |      * Four

--------------------------------
6: Don't double-nest child item either

h1. One    |  * One
h4. Two    |      * Two
h3. Three  |      * Three
h2. Four   |      * Four

--------------------------------
7: Combining all complexities

h3. One    |  * One
h6. Two    |      * Two
h5. Three  |      * Three
h2. Four   |  * Four