Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Div
classcomponent-api-page

Span
classsmall
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.

See Also
Table of Contents Model Builder

Table of Contents Levels

User Interface Options API

 

Anchor
top
top

Div
classsummary-table

Creator

fluid.tableOfContents(container, options)

Supported Events

onReady
Fires when the component has finished instantiating and ready to use.

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.

 locateHeadings()
Returns a jQuery object containing all of the headings to be included in the Table of Contents.

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
classback-to-top
back to top
Use the following function to create a Table of Contents component:

fluid.tableOfContents(container, options)

Div
classapi-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
classback-to-top
back to top
Include Page
_supported events intro
_supported events intro

onReady

Div
classapi-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
classapi-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
classapi-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
classback-to-top
back to top
Include Page
_methods intro
_methods intro

headingTextToAnchorInfo(headings, GUID)

Div
classapi-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 AlsogenerateGUID()

generateGUID()

Div
classapi-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)

locateHeadings()

Div
classapi-table

Description

Used by the component to locate the headings to be used to generate the Table of Contents from. The default implementation finds all of the headings specified by the headings selector, minus the headings matching selectors specified in the ignoreForToC option.

Parameters

none

Configurable

yes
Default implementation: "fluid.tableOfContents.locateHeadings"

Availability

Infusion v1.9

insertAnchor(name, element, anchorClass)

Div
classapi-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
classapi-table

Description

Hides the generated table of contents.

Parameters

none

Configurable

no

Availability

Infusion v1.0

See also

show()

show()

Div
classapi-table

Description

Shows the generated table of contents.

Parameters

none

Configurable

no

Availability

Infusion v1.0

See also

hide()

Options

Span
classback-to-top
back to top
Include Page
_options intro
_options intro

selectors

Div
classapi-table

Description

See below for details.

Selectors

Span
classback-to-top
back to top
Include Page
_selectors intro
_selectors intro

The selectors supported by Table of Contents are described below.

headings

Div
classapi-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
classapi-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
classapi-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
classapi-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
classapi-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