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

...

(inner) activeTopSection :HTMLElement|undefined

...

(inner) expandedSections :Array.<HTMLElement>

...

(inner, constant) tableOfContentsConfig

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

(inner, constant) templateBody

...
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) bindCollapseToggleListeners()

...
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 shoul yield the same result as the php function SkinVector22::getTocData(), 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) 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)

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

(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:

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:

onHeadingClick(id)

...
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:

onToggleCollapse()

...

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-heading string
number-section-count number
msg-vector-toc-beginning string
msg-vector-toc-toggle-position-title string
msg-vector-toc-toggle-position-sidebar string
Source:

TableOfContents

...
Type:
  • Object
Properties:
Name Type Description
changeActiveSection changeActiveSection
expandSection expandSection
toggleExpandSection toggleExpandSection
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 Description
container HTMLElement The container element for the table of contents.
onHeadingClick onHeadingClick Called when an arrow is clicked.
onToggleClick onToggleClick Called when a list item is clicked.
onToggleCollapse onToggleCollapse Called when collapse toggle buttons are clicked.
Source: