Versions Compared

Key

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

Anchor
top
top

The Levels subcomponent is used by Table of Contents API to render the generated list of links to headers into a template.

Do not use this component directly. The information on this page should be use when customizing Table of Contents.

See Also
Table of Contents API
UI Enhancer

Div
classsummary-table

Supported Events

none

Methods

none

#Options Options

#modelmodel
An array of information about the headings in the document
#produceTree
produceTree
A function that will return a Renderer Component Tree.
#rendererFnOptions
rendererFnOptions
Options passed on to the renderer function.
#rendererOptions
rendererOptions
Options passed on to the renderer.
#repeatingSelectors
repeatingSelectors
An array of selector names for elements that will be repeated.
#resources
resources
Information about resources that need to be loaded.

selectors
See below.

#SelectorsSelectors

#level1 level1 through level6
Identify the elements in the template for the levels.

#items1 items1 through items6
Identify the elements in the template for the items at each level.

#link1 link1 through link6
Identify the elements in the template for the links to the headings.

Options

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

model

Div
classapi-table

Description

An object containing an array of information about the headings in the document. It should have the following form:

Code Block
javascript
javascript
{
    heading: [{
        text: <heading text>,
        url: <link to anchor associated with the heading>
        headings: [<array of heading info for subheadings>]
    },
    ...
    ]
}


By default, this information is generated by the component as part of its initialization process.

Default

Code Block
javascript
javascript
{
    heading: []
}

produceTree

Div
classapi-table

Description

A function that will return a Renderer Component Tree for the table of contents.

Default

"fluid.tableOfContents.levels.produceTree"

Example

Code Block
javascript
javascript
produceTree: "customTreeProducerFn"

See also

 Renderer Components

rendererFnOptions

Div
classapi-table

Description

This option is an object containing options that will be passed on to the renderer function created for this component.

Default

Code Block
javascript
javascript
{
    noexpand: true
}

Example

Code Block
javascript
javascript
rendererFnOptions: {
    noexpand: true
}

See also

Renderer Components

rendererOptions

Div
classapi-table

Description

This option is an object containing options that will be passed on to the Renderer.

Default

Code Block
javascript
javascript
{
    debugMode: false
}

Example

Code Block
javascript
javascript
rendererOptions: {
    debugMode: true
}

See also

Renderer Components

repeatingSelectors

Div
classapi-table

Description

This option is an array of the selector names that identify elements in the template that will be replicated by the renderer as needed, based on the data being rendered.

Default

Code Block
javascript
javascript
["level1", "level2", "level3", "level4", "level5", "level6",
 "items1", "items2", "items3", "items4", "items5", "items6"]

Example

 

See also

 

resources

Div
classapi-table

Description

An object describing any resources that need to be loaded.

Default

Code Block
javascript
javascript
{
    template: {
        forceCache: true,
        url: "../html/TableOfContents.html"
    }
}

Example

Code Block
javascript
javascript
resources: {
    template: {
        url: "../templates/CustomToCTemplate.html"
    }
}

See also

 Renderer Components

Selectors

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

level1 through level6

Div
classapi-table

Description

These selectors identify the elements in the template that serve as containers for the different levels of header links. In the default template, these selectors identify <ul> elements.

Default

".flc-toc-levels-level1" through ".flc-toc-levels-level6"

Example

Code Block
javascript
javascript
selectors: {
    level1: "ol.level1",
    level2: "ol.level2",
    level3: "ol.level3",
    ...
}

items1 through items6

Div
classapi-table

Description

These selectors identify the elements in the template that serve as containers for the links at each level. In the default template, these selectors identify <li> elements.

Default

".flc-toc-levels-items1" through ".flc-toc-levels-items6"

Example

Code Block
javascript
javascript
selectors: {
    items1: ".level1 div",
    items2: ".level2 div",
    items3: ".level3 div",
    ...
}

link1 through link6

Div
classapi-table

Description

These selectors identify the link elements at each level. In the default template, these selectors identify <a> elements.

Default

".flc-toc-levels-link1" through ".flc-toc-levels-link6"

Example

Code Block
javascript
javascript
selectors: {
    link1: "a.tocLinks"
}