Page Comparison

Wiki Markup
{div:class=floatRight} {info}This documentation applies to {color:purple}v1.4{color} of Table of Contents. For earlier versions, see [fluid:Table of Contents API].{info} {div}

{div:class=

Wiki Markup

Div

class	floatRight

Info
This documentation applies to v1.4 of Table of Contents. For earlier versions, see Table of Contents API.

} {

Div

class	component-api-page

Span

:

class

=

	small

}

Production

Status:

SNEAK

PEEK

{span}

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

[

UI

Enhancer

]

component.

*

See

Also

* [

UI

Enhancer

] *

New

in

1.4

* {

Span

:

class

=

	small

}

(August,

2011)

{span} * Code refactored {anchor:top} {div2:class=summary-table} ||[#Creator]| {{[

Code refactored

Anchor

	top
	top

Div

class	summary-table

#Creator	`#fluid.tableOfContents(container,`

options)

]}}| ||[#Supported Events]| {{[#onReady]}}\\ Fires when the component has finished initializing.\\ \\ {{[#afterRender]}}\\ Fires after the table of contents has been rendered. | ||[#Methods]| {{[#filterHeadings(headings)]}}\\ Used to filter the headings that will appear in the table of contents.\\ \\ {{[#generateGUID()]}}\\ Used in the process of creating anchors for the headings.\\ \\ {{[#hide()]}}\\ Hides the table of contents.\\ \\ {{[#insertAnchor(name, element)]}}\\ Used to insert 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| ||[#Subcomponents]| {{[#levels]}}\\ Renders the generated table of contents.\\ \\ {{[#modelBuilder]}}\\ Builds an internal model of the structure of the headings in the document.| {div2} h2. Creator {span:class=back-to-top}[back to top|#top]{span} Use the following function to create a Table of Contents component: h3. fluid.tableOfContents(container, options) {div2: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:javascript}


#Supported Events	`#onReady` Fires when the component has finished initializing. `#afterRender` Fires after the table of contents has been rendered.
#Methods	`#filterHeadings(headings)` Used to filter the headings that will appear in the table of contents. `#generateGUID()` Used in the process of creating anchors for the headings. `#hide()` Hides the table of contents. `#insertAnchor(name, element)` Used to insert 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
#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");

{code} | ||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.| {div2} h2. Supported Events {span:class=back-to-top}[back to top|#top]{span} {include:_supported events intro} h3. onReady {div2:class=api-table} ||Description|This event fires when the DOM is fully loaded. This event triggers the creation of the [Table of Contents] subcomponent. | ||Type| default | ||Parameters| _none_ | ||Availability| Infusion 1.4 and later | {div2} h3. afterRender {div2:class=api-table} ||Description|This event fires Fires when any settings have changed. | ||Type| default | ||Parameters| _newModel_\\ The overall model containing the user's current selections.\\ \\ _oldModel_\\ A "snapshot" of the previous state of the model, before the change.\\ \\ _changeRequest_\\ The original change request object.| ||Availability| Infusion 1.4 and later | ||See also| [Firing a change using a ChangeApplier|Infusion13:ChangeApplier#Firing a change using a ChangeApplier]| {div2} h2. Methods {span:class=back-to-top}[back to top|#top]{span} {include:_methods intro} h3. filterHeadings(headings) {div2:class=api-table} ||Description| Used by the component to filter a list of headings. The default implementation filters the list based on visibility. | ||Parameters| _headings_\\ A list of headings, usually generated by {{that.locate("headings")}}| ||Configurable| _yes_\\ Default implementation: {{"fluid.tableOfContents.filterHeadings"}} | ||Availability| Infusion v1.4 | {div2} h3. generateGUID() {div2: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.tableOfContents.generateGUID"}} | ||Availability| Infusion v1.4 | ||See also| [#insertAnchor]| {div2} h3. hide() {div2:class=api-table} ||Description| Hides the generated table of contents. | ||Parameters| _none_ | ||Configurable| _no_ | ||Availability| Infusion v1.0 | ||See also| [#show()] | {div2} h3. insertAnchor(name, element) {div2: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. | ||Parameters| _name_\\ The name used in the creation of the anchor.\\ \\ _element_\\ The element to insert the anchor before.|| ||Configurable| _yes_\\ Default implementation: {{"fluid.tableOfContents.insertAnchor"}} | ||Availability| Infusion v1.4 | ||See also| [#generateGUID]| {div2} h3. show() {div2:class=api-table} ||Description| Shows the generated table of contents. | ||Parameters| _none_ | ||Configurable| _no_ | ||Availability| Infusion v1.0 | ||See also| [#hide()] | {div2} h2. Options {span:class=back-to-top}[back to top|#top]{span} {include:_options intro} h3. {{selectors}} {div2:class=api-table} ||Description|See below for details. | {div2} h2. Selectors {span:class=back-to-top}[back to top|#top]{span} {include:_selectors intro} The selectors supported by Table of Contents are described below. h3. {{headings}} {div2: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"}} | ||Example| {code:javascript}

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 loaded. This event triggers the creation of the Table of Contents subcomponent.
Type	default
Parameters	none
Availability	Infusion 1.4 and later

afterRender

Div

class	api-table

Description	This event fires Fires when any settings have changed.
Type	default
Parameters	newModel The overall model containing the user's current selections. oldModel A "snapshot" of the previous state of the model, before the change. changeRequest The original change request object.
Availability	Infusion 1.4 and later
See also	Firing a change using a ChangeApplier

Methods

Span

class	back-to-top

back to top

Include Page

	_methods intro
	_methods intro

filterHeadings(headings)

Div

class	api-table

Description	Used by the component to filter a list of headings. The default implementation filters the list based on visibility.
Parameters	headings A list of headings, usually generated by `that.locate("headings")`
Configurable	yes Default implementation: `"fluid.tableOfContents.filterHeadings"`
Availability	Infusion v1.4

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.tableOfContents.generateGUID"`
Availability	Infusion v1.4
See also	#insertAnchor

hide()

Div

class	api-table

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

insertAnchor(name, element)

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.
Parameters	name The name used in the creation of the anchor. element The element to insert the anchor before.
Configurable	yes Default implementation: `"fluid.tableOfContents.insertAnchor"`
Availability	Infusion v1.4
See also	#generateGUID

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"

Example

Code Block

	javascript
	javascript


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

{code} | ||See also|{{[#filterHeadings]}}| {div2} h3. {{tocContainer}} {div2: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| {{

`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:javascript}

Example

Code Block

	javascript
	javascript


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

{code} | {div2} h2. Subcomponents Subcomponents can be configured though the parent component's {{components}} option using the following pattern: {code:javascript}

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>
            }
        }
    }
});

{code} h3. levels {div2:class=

levels

Div

class	api-table

} ||Description| The {{levels}} subcomponent renders the generated table of contents based on a template.| ||Default implementation| {{[

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

|Table of Contents Levels]}} | ||See also| [Table of Contents Levels]| {div2} h3. modelBuilder {div2: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... | ||Default implementation| {{[fluid.tableOfContents.modelBuilder|Table of Contents Model Builder]}} | ||See also| [Table of Contents Model Builder] {div2} {div}


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...
Default implementation	`fluid.tableOfContents.modelBuilder`
See also	Table of Contents Model Builder

Versions Compared

Old Version 2

New Version 3

Key

Creator

fluid.tableOfContents(container, options)

Supported Events

onReady

afterRender

Methods

filterHeadings(headings)

generateGUID()

hide()

insertAnchor(name, element)

show()

Options

`selectors`

Selectors

`headings`

`tocContainer`

Subcomponents

levels

modelBuilder