This documentation is currently being moved to our new documentation site.
Please view or edit the documentation there, instead.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.
Table of Contents API
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
| |
| |
| |
| |
|
Creator
back to top Use the following function to create a Table of Contents component:
fluid.tableOfContents(container, options)
Method |
|
---|---|
Description | Instantiates a Table of Contents component applied to the specified container. |
Parameters |
|
Returns | The Table of Contents component |
Examples | var toc = fluid.tableOfContents("#main"); |
Notes | The Table of Contents only processes headings found inside the element provided by the |
Supported Events
Listeners can be attached to any supported events through a component's listeners
option. Values can be a function reference (not a string function name) or an anonymous function definition, as illustrated below:
var myComponent = component.name("#myContainerID", { listeners: { eventName1: functionName, eventName2: function (params) { ... } } });
For information on the different types of events, see Infusion Event System.
onReady
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
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
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
This component has public methods that can be invoked by integrators as necessary. These methods are typcially implemented as Invokers, which resolve their arguments from the environment at invocation time. These methods can be configured by the integrator if necessary: arguments can be changed, and in fact the entire implementation function can be replaced by a custom function (though it is likely rare that this would be necessary or desirable).
Configuration of invokers should be carried by creating a grade, using the following pattern:
fluid.defaults("<new name of overriding grade>", { gradeNames: ["<name of grade being overridden", "autoInit"], invokers: { <invokerName>: { funcName: <implementation function name>, args: [<array of argument specifications>] } } });
Example of overriding an invoker
The Infusion Pager component has a method called {{acquireDefaultRange}} which, by default, simply returns the total range. An integrator may wish to override this using their own custom function:
fluid.defaults("my.pager", { gradeNames: ["fluid.pager", "autoInit"], invokers: { acquireDefaultRange: { funcName: "my.pager.acquireDefaultRange } } });
headingTextToAnchorInfo(headings, GUID)
Description | Returns the information required for generating the anchor for the heading. |
---|---|
Parameters | heading GUID |
Configurable | yes |
Availability | Infusion v1.5 |
See Also | generateGUID() |
generateGUID()
Description | Used by the component in the creation of unique anchors for the headings. The default implementation uses fluid.allocateSimpleId. |
---|---|
Parameters | none |
Configurable | yes |
Availability | Infusion v1.4 |
See also |
locateHeadings()
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 |
---|---|
Parameters | none |
Configurable | yes |
Availability | Infusion v1.9 |
insertAnchor(name, element, anchorClass)
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 |
---|---|
Parameters | name anchorClass |
Configurable | yes |
Availability | Infusion v1.4 (note that the component signature changed in 1.5) |
hide()
Description | Hides the generated table of contents. |
---|---|
Parameters | none |
Configurable | no |
Availability | Infusion v1.0 |
See also |
show()
Description | Shows the generated table of contents. |
---|---|
Parameters | none |
Configurable | no |
Availability | Infusion v1.0 |
See also |
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.
selectors
Description | See below for details. |
---|
ignoreForToc
Description | A key/value pairing where the keys are selectors representing headings to NOT include in the Table of Contents. |
---|---|
Example | "ignoreForToC": { "overviewPanel": ".flc-overviewPanel" } |
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.
The selectors supported by Table of Contents are described below.
headings
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 |
|
Example | fluid.tableOfContents(".myContainer", { selectors: { headings: "h1,h2,h3" // limit to only three levels deep } }); |
tocContainer
Description | This selector identifies the container into which the generated table of contents will be inserted. This will typically be an empty |
---|---|
Default |
|
Example | fluid.tableOfContents(".myContainer", { selectors: { tocContainer: "#tableOfContentsDiv" } }); |
tocAnchors
Description | This selector identifies the generated table of contents anchors. These anchors are removed at every refresh before new anchors are added. |
---|---|
Default |
|
Example | fluid.tableOfContents(".myContainer", { selectors: { tocAnchors: "#tableOfContentsAnchors" } }); |
Subcomponents
Subcomponents can be configured though the parent component's components
option using the following pattern:
parent.component.name(".myContainer", { components: { <subcomponentName>: { options: { <subcomponent options> } } } });
levels
Description | The |
---|---|
Default implementation | |
See also |
modelBuilder
Description | The |
---|---|
Default implementation | |
See also |