Page Comparison

Div

class	component-api-page

Span

class	small

Production Status: SNEAK PEEK

The Table of Contents component examines a page for HTML heading elements, and generates and formats a list of links to headings that can be used to navigate the page. It is used by the User Interface Options component.

Table of Contents Levels

User Interface Options API

Anchor

	top
	top

Div

class	summary-table

Creator	`fluid.tableOfContents(container, options)`
Supported Events	`onReady` Fires when the component has finished instantiating and ready to use. `onRefresh` Fires when the table of contents needs to be refreshed. This firing of this event also triggers the refresh. `afterRender` Fires after the table of contents has been rendered.
Methods	`headingTextToAnchorInfo(headings, GUID)` Returns the information required for generating the anchor for one of the headings. `generateGUID()` Generates an unique ID. This ID is used in the process of creating anchors for the headings. `hide()` Hides the table of contents. `insertAnchor(name, element, anchorClass)` Inserts anchors before each heading. `show()` Shows the table of contents.
Options	`listeners` See #Supported Events for information. `selectors` See below.
Selectors	`headings` Identifies the headings in the page `tocContainer` Container for the generated table of contents `tocAnchors` The selector to identify the generated table of contents anchors.
Subcomponents	`levels` Renders the generated table of contents. `modelBuilder` Builds an internal model of the structure of the headings in the document.

Creator

Span

class	back-to-top

back to top

Use the following function to create a Table of Contents component:

fluid.tableOfContents(container, options)

Div

class	api-table

Method

fluid.tableOfContents(container, options);

Description

Instantiates a Table of Contents component applied to the specified container.

Parameters

container
A CSS-based selectors, single-element jQuery object, or DOM element that identifies the root DOM node where the Table of Contents component should search for headings.

options
An optional data structure that configures the Table of Contents component, as described below.

Returns

The Table of Contents component

Examples

Code Block

	javascript
	javascript

var toc = fluid.tableOfContents("#main");

Notes

The Table of Contents only processes headings found inside the element provided by the container argument. This allows the component to be applied to only a section of a page, if desired. Keep in mind that the generated list of links will be placed inside the container, as specified by the tocContainer selector.

Supported Events

Span

class	back-to-top

back to top

Include Page

	_supported events intro
	_supported events intro

onReady

Div

class	api-table

Description	This event fires when the DOM is fully instantiated and ready to use.
Type	default
Parameters	The instantiated table of contents component
Availability	Infusion 1.5 and later

onRefresh

Div

class	api-table

Description	This event fires when the Table of Contents Levels need to be refreshed. The firing triggers the refresh of the Table of Contents Levels subcomponent.
Type	default
Parameters	none
Availability	Infusion 1.5 and later

afterRender

Div

class	api-table

Description	This event fires Fires when the table of contents is rendered.
Type	default
Parameters	The Table of Contents Levels subcomponent
Availability	Infusion 1.5 and later

Methods

Span

class	back-to-top

back to top

Include Page

	_methods intro
	_methods intro

`headingTextToAnchorInfo(headings, GUID)`

Div

class	api-table

Description	Returns the information required for generating the anchor for the heading.
Parameters	heading The heading, usually one of headings generated by `that.locate("headings")` GUID The unique ID used to identify the generated anchor.
Configurable	yes Default implementation: `"fluid.tableOfContents.headingTextToAnchorInfo"`
Availability	Infusion v1.5
See Also	generateGUID()

generateGUID()

Div

class	api-table

Description	Used by the component in the creation of unique anchors for the headings. The default implementation uses fluid.allocateSimpleId.
Parameters	none
Configurable	yes Default implementation: `"fluid.allocateSimpleId"`
Availability	Infusion v1.4
See also	headingTextToAnchorInfo(headings, GUID)

insertAnchor(name, element, anchorClass)

Div

class	api-table

Description	Used by the component to create and insert anchors before each element linked to by the table of contents. The default implementation creates an HTML `<a>` element using the `name` parameter as both the name and id of the element and applies anchorClass to the element.
Parameters	name The name used in the creation of the anchor. element The element to insert the anchor before. anchorClass The css class to be applied to the anchor.
Configurable	yes Default implementation: `"fluid.tableOfContents.insertAnchor"`
Availability	Infusion v1.4 (note that the component signature changed in 1.5)

hide()

Div

class	api-table

Description	Hides the generated table of contents.
Parameters	none
Configurable	no
Availability	Infusion v1.0
See also	show()

show()

Div

class	api-table

Description	Shows the generated table of contents.
Parameters	none
Configurable	no
Availability	Infusion v1.0
See also	hide()

Options

Span

class	back-to-top

back to top

Include Page

	_options intro
	_options intro

`selectors`

Div

class	api-table

Description	See below for details.

Selectors

Span

class	back-to-top

back to top

Include Page

	_selectors intro
	_selectors intro

The selectors supported by Table of Contents are described below.

`headings`

Div

class	api-table

Description

This selector will be used to identify all of the headings in the page. These headings will be used in the table of contents (after filtering).

Default

":header:visible:not(.flc-toc-tocContainer :header)"

Example

Code Block

	javascript
	javascript

fluid.tableOfContents(".myContainer", {
    selectors: {
        headings: "h1,h2,h3" // limit to only three levels deep
    }
});

`tocContainer`

Div

class	api-table

Description

This selector identifies the container into which the generated table of contents will be inserted. This will typically be an empty <div> element.

Default

".flc-toc-tocContainer"

Example

Code Block

	javascript
	javascript

fluid.tableOfContents(".myContainer", {
    selectors: {
        tocContainer: "#tableOfContentsDiv"
    }
});

`tocAnchors`

Div

class	api-table

Description

This selector identifies the generated table of contents anchors. These anchors are removed at every refresh before new anchors are added.

Default

".flc-toc-anchors"

Example

Code Block

	javascript
	javascript

fluid.tableOfContents(".myContainer", {
    selectors: {
        tocAnchors: "#tableOfContentsAnchors"
    }
});

Subcomponents

Subcomponents can be configured though the parent component's components option using the following pattern:

Code Block

	javascript
	javascript

parent.component.name(".myContainer", {
    components: {
        <subcomponentName>: {
            options: {
                <subcomponent options>
            }
        }
    }
});

levels

Div

class	api-table

Description	The `levels` subcomponent renders the generated table of contents based on a template.
Default implementation	`fluid.tableOfContents.levels`
See also	Table of Contents Levels

modelBuilder

Div

class	api-table

Description	The `modelBuilder` subcomponent builds an internal model of the structure of the headings in the document. This model is used by the Table of Contents component to generated a hierarchical table of contents.
Default implementation	`fluid.tableOfContents.modelBuilder`
See also	Table of Contents Model Builder

Versions Compared

Old Version 27

New Version 28

Key

Creator

fluid.tableOfContents(container, options)

Supported Events

onReady

onRefresh

afterRender

Methods

`headingTextToAnchorInfo(headings, GUID)`

generateGUID()

insertAnchor(name, element, anchorClass)

hide()

show()

Options

`selectors`

Selectors

`headings`

`tocContainer`

`tocAnchors`

Subcomponents

levels

modelBuilder