JSDoc: o-layout

CharacterHighlight

Properties

• 0 - (type: string) the character in the suggestion
• 1 - (type: boolean) should it be highlighted?

Type

Array

Links

• "CharacterHighlight" typedef on Github

PopulateOptions(options)

Returns

• void

Type

function

Links

• "PopulateOptions" typedef on Github

Source(query, populateOptions)

Returns

• void

Type

function

Links

• "Source" typedef on Github

MapOptionToSuggestedValue(option)

Returns

• string - The string to display as the suggestions for this option

Type

function

Links

• "MapOptionToSuggestedValue" typedef on Github

onConfirm(option)

Returns

• void

Type

function

Links

• "onConfirm" typedef on Github

AutocompleteOptions

Properties

• defaultValue - (type: string) Specify a string to prefill the autocomplete with
• source - (type: Source) The function which retrieves the suggestions to display
• mapOptionToSuggestedValue - (type: MapOptionToSuggestedValue) Function which transforms a suggestion before rendering
• onConfirm - (type: onConfirm) Function which is called when the user selects an option

Type

object

Links

• "AutocompleteOptions" typedef on Github

highlightSuggestion(suggestion, query)

Global Function

Returns

• Array.<CharacterHighlight> - An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

• "highlightSuggestion" function on Github

createLoadingContainer

Global Function

Create DOM for the loading container.

Returns

• HTMLDivElement - The loading container.

Links

• "createLoadingContainer" function on Github

showLoadingPane(instance)

Global Function

Show the loading panel

Returns

• void

Links

• "showLoadingPane" function on Github

hideLoadingPane(instance)

Global Function

Hide the loading panel

Returns

• void

Links

• "hideLoadingPane" function on Github

createClearButton(id)

Global Function

Create the DOM tree which corresponds to <button class="o-autocompleteclear" type="button" aria-controls=${autocompleteEl.id} title="Clear input"> <span class="o-autocompletevisually-hidden">Clear input</span> </button>

Returns

• HTMLButtonElement - The clear button DOM tree

Links

• "createClearButton" function on Github

initClearButton(instance)

Global Function

Attach the clear button and corresponding event listeners to the o-autocomplete instance

Returns

• void

Links

• "initClearButton" function on Github

new Autocomplete(autocompleteEl, options)

Class constructor.

Methods

• suggestionTemplate(suggestedValue) - (instance) Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.
• getDataAttributes(autocompleteEl) - (static) Get the data attributes from the AutocompleteElement. If the element is being set up declaratively, this method is used to extract the data attributes from the DOM.
• init(rootElement, options) - (static) Initialise o-autocomplete component/s.

Properties

• mapOptionToSuggestedValue - (type: MapOptionToSuggestedValue)

Links

• "Autocomplete" class on Github

new Banner(bannerElement, options)

Represents a banner.

Class constructor.

Methods

• render - (instance) Render the banner.
• open - (instance) Open the banner.
• close - (instance) Close the banner.
• buildBannerElement(bannerElement) - (instance) Build a full banner element. This is used when no banner or a partial banner exists in the DOM.
• buildCloseButtonElement - (instance) Build a close button element.
• getOptionsFromDom(bannerElement) - (static) Get the data attributes from the bannerElement. If the banner is being set up declaratively, this method is used to extract the data attributes from the DOM.
• destroy - (instance) Undo the init method
• init(rootElement, options) - (static) Initialise banner components.

Links

• "Banner" class on Github

new Drawer(headerEl)

Class constructor.

Methods

• handleEvent(event) - (instance) Event Handler
• render - (instance) Drawer rendering
• toggleDrawer - (instance) Drawer hide/show functionality

Properties

• enabled - Check if the drawer is currently enabled. If the burger element is visible, the drawer is enabled.

Links

• "Drawer" class on Github

new DropDown(headerEl, drawer)

Class constructor

Methods

• handleEvent(event) - (instance) Event Handler
• isDrawer - (instance) Checks if primary nav is in a drawer This boolean will change the drop down behaviour.
• reset - (instance) Returns nav items to their original collapsed state, items which contain links with the attribute `aria-current` set to true remain expanded.
• isExpanded(item) - (static) Checks whether nav menu is expanded
• expand(item) - (static) Expands closed nav menu
• position(item) - (static) Changes nav menu position relative to the window
• collapse(item) - (static) Collapses open nav menu
• collapseAll(items) - (static) Collapses all open nav menus
• expandAll(items) - (static) Expands all open nav menus
• getCurrent(items) - (static) Returns items which contain an anchor with the attribute `aria-current` set to true or "page".

Properties

• navItems - (type: Array.<Element>) - Nav items with a dropdown.

Links

• "DropDown" class on Github

new HeaderServices(headerEl)

Class constructor

Methods

• init(rootElement, options) - (static) Initialise header component

Links

• "HeaderServices" class on Github

new Layout(layoutEl, options)

Class constructor.

Methods

• constructNavFromDOM - (instance) Construct the sidebar navigation from headings within the DOM.
• destroy - (instance) Unmount the sideBarNavigation.
• highlightNavItems - (instance) Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.
• getDataAttributes(layoutElement) - (static) Get the data attributes from the layoutEl. If the layout is being set up declaratively, this method is used to extract the data attributes from the DOM.
• init(rootEl, opts) - (static) Initialise layout component.

Properties

• navAnchors - (type: Array.<HTMLAnchorElement>)
• navAnchors - (type: Array.<HTMLAnchorElement>)

Links

• "Layout" class on Github

new LinkedHeading(...)

Represents a linked heading.

Class constructor.

Links

• "LinkedHeading" class on Github

new Scroll(headerEl)

Class constructor

Methods

• render - (instance) Scroll functionality rendering
• toggleScrollButtons - (instance) Hide/show scroll buttons
• scroll(event) - (instance) Scrolling functionality
• showCurrentSelection - (instance) Scroll secondary nav to 'current selection'

Links

• "Scroll" class on Github

<anonymous>~customSource

Inner Property

Type

• Source

Links

• "customSource" constant on Github

Autocomplete#mapOptionToSuggestedValue

Instance Property

Type

• MapOptionToSuggestedValue

Links

• "mapOptionToSuggestedValue" member on Github

Autocomplete#options.source(query, populateOptions)

Static Method

Returns

• void

Links

• "source" function on Github

Autocomplete#options.source~callback(options)

Inner Function

Returns

• void

Links

• "callback" function on Github

templates.suggestion(option)

Static Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

Returns

• string | undefined - HTML string to represent a single suggestion.

Links

• "suggestion" function on Github

templates.inputValue(option)

Static Method

Used when a suggestion is selected, the return value of this will be used as the value for the input element.

Returns

• string | undefined - String to represent the suggestion.

Links

• "inputValue" function on Github

Autocomplete#suggestionTemplate(suggestedValue)

Instance Method

Used when rendering suggestions, the return value of this will be used as the innerHTML for a single suggestion.

Returns

• string - HTML string to be represent a single suggestion.

Links

• "suggestionTemplate" function on Github

<anonymous>~characters

Inner Property

Type

• Array.<CharacterHighlight>

An array of arrays which contain two items, the first is the character in the suggestion, the second is a boolean which indicates whether the character should be highlighted.

Links

• "characters" constant on Github

Autocomplete.getDataAttributes(autocompleteEl)

Static Method

Get the data attributes from the AutocompleteElement. If the element is being set up declaratively, this method is used to extract the data attributes from the DOM.

Returns

• object - An options object which can be used for configuring the component

Links

• "getDataAttributes" function on Github

Autocomplete.init(rootElement, options)

Static Method

Initialise o-autocomplete component/s.

Returns

• Autocomplete | Array.<Autocomplete> - The newly constructed Autocomplete components

Links

• "init" function on Github

Banner#render

Instance Method

Render the banner.

Returns

• void

Links

• "render" function on Github

Banner#open

Instance Method

Open the banner.

Returns

• void

Links

• "open" function on Github

Banner#close

Instance Method

Close the banner.

Returns

• void

Links

• "close" function on Github

Banner#buildBannerElement(bannerElement)

Instance Method

Build a full banner element. This is used when no banner or a partial banner exists in the DOM.

Returns

• HTMLElement - Returns the new banner element

Links

• "buildBannerElement" function on Github

Banner#buildCloseButtonElement

Instance Method

Build a close button element.

Returns

• HTMLElement - Returns the new close button element

Links

• "buildCloseButtonElement" function on Github

Banner.getOptionsFromDom(bannerElement)

Static Method

Get the data attributes from the bannerElement. If the banner is being set up declaratively, this method is used to extract the data attributes from the DOM.

Returns

• Object.<string, any> - - The options

Links

• "getOptionsFromDom" function on Github

Banner#destroy

Instance Method

Undo the init method

Links

• "destroy" function on Github

Banner.init(rootElement, options)

Static Method

Initialise banner components.

Returns

• Banner | Array.<Banner> - - The newly instantiated Banner (or Banners, if rootElement was not a banner)

Links

• "init" function on Github

Drawer#handleEvent(event)

Instance Method

Event Handler

Returns

• void

Links

• "handleEvent" function on Github

Drawer#enabled

Instance Property

Check if the drawer is currently enabled. If the burger element is visible, the drawer is enabled.

Links

• "enabled" member on Github

Drawer#render

Instance Method

Drawer rendering

Returns

• void

Links

• "render" function on Github

Drawer#toggleDrawer

Instance Method

Drawer hide/show functionality

Returns

• void

Links

• "toggleDrawer" function on Github

DropDown#navItems

Instance Property

Type

• Array.<Element>

- Nav items with a dropdown.

Links

• "navItems" member on Github

DropDown#handleEvent(event)

Instance Method

Event Handler

Returns

• void

Links

• "handleEvent" function on Github

DropDown#isDrawer

Instance Method

Checks if primary nav is in a drawer This boolean will change the drop down behaviour.

Returns

• boolean - - whether the drawer is enabled or not

Links

• "isDrawer" function on Github

DropDown#reset

Instance Method

Returns nav items to their original collapsed state, items which contain links with the attribute aria-current set to true remain expanded.

Returns

• void

Links

• "reset" function on Github

DropDown.isExpanded(item)

Static Method

Checks whether nav menu is expanded

Returns

• boolean - - whether the nav menu is expanded

Links

• "isExpanded" function on Github

DropDown.expand(item)

Static Method

Expands closed nav menu

Returns

• void

Links

• "expand" function on Github

DropDown.position(item)

Static Method

Changes nav menu position relative to the window

Returns

• void

Links

• "position" function on Github

DropDown.collapse(item)

Static Method

Collapses open nav menu

Returns

• void

Links

• "collapse" function on Github

DropDown.collapseAll(items)

Static Method

Collapses all open nav menus

Returns

• void

Links

• "collapseAll" function on Github

DropDown.expandAll(items)

Static Method

Expands all open nav menus

Returns

• void

Links

• "expandAll" function on Github

DropDown.getCurrent(items)

Static Method

Returns items which contain an anchor with the attribute aria-current set to true or "page".

Returns

• HTMLElement - - The current menu item

Links

• "getCurrent" function on Github

HeaderServices.init(rootElement, options)

Static Method

Initialise header component

Returns

• Array.<HTMLElement> | HTMLElement - - The header(s) initalised.

Links

• "init" function on Github

Layout#navAnchors

Instance Property

Type

• Array.<HTMLAnchorElement>

Links

• "navAnchors" member on Github

Layout#constructNavFromDOM

Instance Method

Construct the sidebar navigation from headings within the DOM.

Links

• "constructNavFromDOM" function on Github

Layout#navAnchors

Instance Property

Type

• Array.<HTMLAnchorElement>

Links

• "navAnchors" member on Github

Layout#destroy

Instance Method

Unmount the sideBarNavigation.

Links

• "destroy" function on Github

Layout#highlightNavItems

Instance Method

Enables navigation item highlighting based on scroll position. Relies on heading ids and anchor href being the same.

Returns

• void

Links

• "highlightNavItems" function on Github

Layout.getDataAttributes(layoutElement)

Static Method

Get the data attributes from the layoutEl. If the layout is being set up declaratively, this method is used to extract the data attributes from the DOM.

Returns

• Object.<string, any> - - Options for configuring the layout

Links

• "getDataAttributes" function on Github

Layout.init(rootEl, opts)

Static Method

Initialise layout component.

Returns

• Layout | Array.<Layout> - Returns either a single Layout instance or an array of Layout instances

Links

• "init" function on Github

Scroll#render

Instance Method

Scroll functionality rendering

Returns

• void

Links

• "render" function on Github

Scroll#toggleScrollButtons

Instance Method

Hide/show scroll buttons

Returns

• void

Links

• "toggleScrollButtons" function on Github

Scroll#scroll(event)

Instance Method

Scrolling functionality

Returns

• void

Links

• "scroll" function on Github

Scroll#showCurrentSelection

Instance Method

Scroll secondary nav to 'current selection'

Returns

• void

Links

• "showCurrentSelection" function on Github