Show:

(require("TableOfContents"))(props) → {TableOfContents}

...
Initializes the sidebar's Table of Contents.
Parameters:
Name Type Description
props TableOfContentsProps
Source:
Returns:
Type
TableOfContents

Members

(inner) activeSubSection :HTMLElement|undefined

...
Type:
Source:

(inner) activeTopSection :HTMLElement|undefined

...
Type:
Source:

(inner) expandedSections :Array.<HTMLElement>

...
Type:
Source:

(inner, constant) tableOfContentsConfig

...
TableOfContents Config object for filling mustache templates
Source:

(inner, constant) templateTocContents

...
TableOfContents Mustache templates
Source:

Methods

(inner) activateSection(id)

...
Sets an `ACTIVE_SECTION_CLASS` on the element with an id that matches `id`. Sets an `ACTIVE_TOP_SECTION_CLASS` on the top level heading (e.g. element with the `TOP_SECTION_CLASS`). If the element is a top level heading, the element will have both classes.
Parameters:
Name Type Description
id string The id of the element to be activated in the Table of Contents.
Source:

(inner) bindHashChangeListener()

...
Bind event listener for hash change events that match the hash of LINK_CLASS. Note that if the user clicks a link inside the TOC, the onHeadingClick callback will fire instead of the onHashChange callback, since it takes precedence.
Source:

(inner) bindPinnedToggleListeners()

...
Bind event listener for clicking on show/hide Table of Contents links.
Source:

(inner) bindSubsectionToggleListeners()

...
Bind event listeners for clicking on section headings and toggle buttons.
Source:

(inner) changeActiveSection(id)

...
Parameters:
Name Type Description
id string
Source:

(inner) collapseSections(selectedIdsopt)

...
Removes all `EXPANDED_SECTION_CLASS` CSS class names from the top level sections in the ToC.
Parameters:
Name Type Attributes Description
selectedIds Array.<string> <optional>
Source:

(inner) deactivateSections()

...
Removes the `ACTIVE_SECTION_CLASS` from all ToC sections.
Source:

(inner) expandSection(id)

...
Adds the `EXPANDED_SECTION_CLASS` CSS class name to a top level heading in the ToC.
Parameters:
Name Type Description
id string
Source:

(inner) getActiveSectionIds() → {activeSectionIds}

...
Get the ids of the active sections.
Source:
Returns:
Type
activeSectionIds

(inner) getExpandedSectionIds() → {Array.<string>}

...
Get the IDs of expanded sections.
Source:
Returns:
Type
Array.<string>

(inner) getTableOfContentsData(sections) → {SectionsListData}

...
Parameters:
Name Type Description
sections Array.<Section>
Source:
Returns:
Type
SectionsListData

(inner) getTableOfContentsHTML(sections) → {string}

...
Generates the HTML for the table of contents.
Parameters:
Name Type Description
sections Array.<Section>
Source:
Returns:
Type
string

(inner) getTableOfContentsListHtml(data) → {string}

...
Generates the table of contents List HTML from the templates
Parameters:
Name Type Description
data Object
Source:
Returns:
Type
string

(inner) getTableOfContentsSectionsData(sections, toclevel) → {Array.<Section>}

...
Prepares the data for rendering the table of contents, nesting child sections within their parent sections. This should yield the same result as the php function VectorComponentTableOfContents::getTemplateData(), please make sure to keep them in sync.
Parameters:
Name Type Default Description
sections Array.<Section>
toclevel number 1
Source:
Returns:
Type
Array.<Section>

(inner) handleHashChange()

...
Event handler for hash change event.
Source:

(inner) initialize()

...
Binds event listeners and sets the default state of the component.
Source:

(inner) initializeExpandedStatus()

...
Set aria-expanded attribute for all toggle buttons.
Source:

(inner) isTopLevelSection(id) → {boolean}

...
Parameters:
Name Type Description
id string
Source:
Returns:
Type
boolean

(inner) prefersReducedMotion() → {boolean}

...
Does the user prefer reduced motion?
Source:
Returns:
Type
boolean

(inner) reExpandSections()

...
Reexpands all sections that were expanded before the table of contents was reloaded. Edited Sections are not reexpanded, as the ID of the edited section is changed after reload.
Source:

(inner) reloadPartialHTML(elementId, html)

...
Replaces the contents of the given element with the given HTML
Parameters:
Name Type Description
elementId string
html string
Source:

(inner) reloadTableOfContents(sections) → {Promise.<any>}

...
Reloads the table of contents from saved data
Parameters:
Name Type Description
sections Array.<Section>
Source:
Returns:
Type
Promise.<any>

(inner) scrollToActiveSection(id)

...
Scroll active section into view if necessary
Parameters:
Name Type Description
id string The id of the element to be scrolled to in the Table of Contents.
Source:

(inner) toggleExpandSection(id)

...
Parameters:
Name Type Description
id string
Source:

(inner) unbindHashChangeListener()

...
Unbinds event listener for hash change events.
Source:

(inner) updateTocToggleStyles(scrollBelow)

...
Updates button styling for the TOC toggle button when scrolled below the page title
Parameters:
Name Type Description
scrollBelow boolean
Source:

Type Definitions

activeSectionIds

...
Type:
  • Object
Properties:
Name Type Description
parent string | undefined The active top level section ID
child string | undefined The active subsection ID
Source:

ArraySectionsData

...
Type:
  • Object
Properties:
Name Type Description
number-section-count number
array-sections Array.<Section>
Source:

onHashChange(id)

...
Fired when the page's hash fragment has changed. Note that if the user clicks a link inside the TOC, the `onHeadingClick` callback will fire instead of the `onHashChange` callback to avoid redundant behavior.
Parameters:
Name Type Description
id string The id of the list item that corresponds to the hash change event.
Source:

onHeadingClick(id)

...
Fired when the user clicks a toc link. Note that this callback takes precedence over the onHashChange callback. The onHashChange callback will not be called when the user clicks a toc link.
Parameters:
Name Type Description
id string The id of the clicked list item.
Source:

onToggleClick(id)

...
Parameters:
Name Type Description
id string The id of the list item corresponding to the arrow.
Source:

onTogglePinned()

...
Source:

Section

...
Type:
  • Object
Properties:
Name Type Description
toclevel number
anchor string
line string
number string
index string
byteoffset number
fromtitle string
is-parent-section boolean
is-top-level-section boolean
array-sections Array.<Section>
level string
Source:

SectionsListData

...
Type:
  • Object
Properties:
Name Type Description
is-vector-toc-beginning-enabled boolean
array-sections Array.<Section>
vector-is-collapse-sections-enabled boolean
msg-vector-toc-beginning string
Source:

tableOfContents(props) → {TableOfContents}

...
Parameters:
Name Type Description
props TableOfContentsProps
Source:
Returns:
Type
TableOfContents

TableOfContents

...
Type:
  • Object
Properties:
Name Type Description
reloadTableOfContents reloadTableOfContents
changeActiveSection changeActiveSection
expandSection expandSection
toggleExpandSection toggleExpandSection
updateTocToggleStyles updateTocToggleStyles
unmount unmount
ACTIVE_SECTION_CLASS string
ACTIVE_TOP_SECTION_CLASS string
EXPANDED_SECTION_CLASS string
LINK_CLASS string
TOGGLE_CLASS string
Source:

TableOfContentsProps

...
Type:
  • Object
Properties:
Name Type Attributes Description
container HTMLElement The container element for the table of contents.
onHeadingClick onHeadingClick Called when an arrow is clicked.
onHashChange onHashChange Called when a hash change event matches the id of a LINK_CLASS anchor element.
onToggleClick onToggleClick <optional>
 Called when an arrow is clicked.
onTogglePinned onTogglePinned Called when pinned toggle buttons are clicked.
Source: