Table of Contents Levels
The Levels subcomponent is used by Table of Contents 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
UI Enhancer
Supported Events |
none |
---|---|
Methods |
none |
|
|
|
Options
The second argument to the creator function is the options argument. This is a JavaScript object containing name/value pairs: The name is the name of the option and the value is the desired setting. Components define their own default values for options, but integrators can override these defaults by providing new values using the options argument. For technical information about how options are merged with defaults, see Options Merging.
model
Description |
An object containing an array of information about the headings in the document. It should have the following form: { heading: [{ text: <heading text>, url: <link to anchor associated with the heading> headings: [<array of heading info for subheadings>] }, ... ] }
|
---|---|
Default |
{ heading: [] } |
produceTree
Description |
A function that will return a Renderer Component Tree for the table of contents. |
---|---|
Default |
|
Example |
produceTree: "customTreeProducerFn" |
See also |
|
rendererFnOptions
Description |
This option is an object containing options that will be passed on to the renderer function created for this component. |
---|---|
Default |
{ noexpand: true } |
Example |
rendererFnOptions: { noexpand: true } |
See also |
rendererOptions
Description |
This option is an object containing options that will be passed on to the Renderer. |
---|---|
Default |
{ debugMode: false } |
Example |
rendererOptions: { debugMode: true } |
See also |
repeatingSelectors
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 |
["level1", "level2", "level3", "level4", "level5", "level6", "items1", "items2", "items3", "items4", "items5", "items6"] |
Example |
|
See also |
|
resources
Description |
An object describing any resources that need to be loaded. |
---|---|
Default |
{ template: { forceCache: true, url: "../html/TableOfContents.html" } } |
Example |
resources: { template: { url: "../templates/CustomToCTemplate.html" } } |
See also |
|
Selectors
One of the options that can be provided to the component is a set of CSS-based selectors identifying where in the DOM different elements can be found. The value for the option is itself a Javascript object containing name/value pairs:
selectors: { selector1Name: "selector 1 string", selector2Name: "selector 2 string", ... }
The component defines defaults for these selectors: If you use those defaults in your markup, you do not need to specify the selectors option. If you do choose to override any of the selectors, you can specify your custom selector using this option.
level1 through level6
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 |
---|---|
Default |
|
Example |
selectors: { level1: "ol.level1", level2: "ol.level2", level3: "ol.level3", ... } |
items1 through items6
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 |
---|---|
Default |
|
Example |
selectors: { items1: ".level1 div", items2: ".level2 div", items3: ".level3 div", ... } |
link1 through link6
Description |
These selectors identify the link elements at each level. In the default template, these selectors identify |
---|---|
Default |
|
Example |
selectors: { link1: "a.tocLinks" } |