InpageNavigation

InpageNavigation

new InpageNavigation(element, options)

Source:
Parameters:
NameTypeDescription
elementHTMLElement

DOM element for component instantiation and scope

optionsObject
Properties
NameTypeDescription
stickySelectorString

Selector for sticky inpage navigation element

containerSelectorString

Selector for inpage navigation container element

inPageListString

Selector for inpage navigation list element

spySelectorString

Selector for inpage navigation spied element

toggleSelectorString

Selector for inpage navigation trigger element

linksSelectorString

Selector for inpage navigation link element

spyActiveContainerString

Selector for inpage navigation container to spy on element

spyClassString

Selector to spy on

spyTriggerString
spyOffsetNumber
attachClickListenerBoolean

Whether or not to bind click events

attachKeyListenerBoolean

Whether or not to bind click events

attachResizeListenerBoolean

Whether or not to bind resize events

attachScrollListenerBoolean

Whether or not to bind scroll events

Classes

InpageNavigation

Methods

activateScrollSpy(event)

Description:
  • Activate scroll spy behaviors.

Source:
Parameters:
NameTypeDescription
eventEvent

closeList()

Description:
  • Close mobile list link.

Source:

deactivateScrollSpy()

Description:
  • Deactivate scroll spy behaviors.

Source:

destroy()

Description:
  • Destroy component instance.

Source:

destroyObserver()

Description:
  • Destroy observer.

Source:

destroyScrollSpy()

Description:
  • Destroy scroll spy behaviors.

Source:

destroySticky()

Description:
  • Destroy sticky behaviors.

Source:
Description:
  • Sets the necessary attributes to collapse inpage navigation list.

Source:
Parameters:
NameTypeDescription
eEvent

handleClickOnToggler(e)

Description:
  • Invoke event listeners on toggle click.

Source:
Parameters:
NameTypeDescription
eEvent

handleKeyboard(e)

Description:
  • Handle keyboard

Source:
Parameters:
NameTypeDescription
eEvent

handleResize()

Description:
  • Trigger events on resize Uses a debounce, for performance

Source:

init()

Description:
  • Initialise component.

Source:

initObserver()

Description:
  • Initiate observer.

Source:

initScrollSpy()

Description:
  • Initiate scroll spy behaviors.

Source:

initSticky()

Description:
  • Initiate sticky behaviors.

Source:

on(eventName, callback) → {void}

Description:
  • Register a callback function for a specific event.

Source:
Example
// Registering a callback for the 'onToggle' event
inpage.on('onToggle', (event) => {
  console.log('Toggle event occurred!', event);
});
Parameters:
NameTypeDescription
eventNamestring

The name of the event to listen for.

callbackfunction

The callback function to be invoked when the event occurs.

Returns:
Type
void

openList()

Description:
  • Open mobile list link.

Source:

setListHeight()

Description:
  • Calculate the available space for the dropwdown and set a max-height on the list

Source:

trigger(eventName, eventData)

Description:
  • Trigger a component event.

Source:
Parameters:
NameTypeDescription
eventNamestring

The name of the event to trigger.

eventDataany

Data associated with the event.

update()

Description:
  • Update scroll spy instance.

Source:

(static) autoInit(root) → {InpageNavigation}

Source:
Parameters:
NameTypeDescription
rootHTMLElement

DOM element for component instantiation and scope

Returns:

An instance of InpageNavigation.

Type
InpageNavigation

Events

onClick Triggered when an item is clicked

Description:
  • An array of supported events for this component.

Source:
Type:
  • Array.<string>