o-overlay JSDoc - Origami Registry

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)

parameter	type	default	description
options	Array.<*>		The options which match the rext which was typed into the autocomplete by the user

Returns

void

Type

function

Links

"PopulateOptions" typedef on Github

Source(query, populateOptions)

parameter	type	default	description
query	string		Text which was typed into the autocomplete by the user
populateOptions	PopulateOptions		Function to call when ready to update the suggestions dropdown

Returns

void

Type

function

Links

"Source" typedef on Github

MapOptionToSuggestedValue(option)

parameter	type	default	description
option	*		The option to transform into a suggestion string

Returns

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

Type

function

Links

"MapOptionToSuggestedValue" typedef on Github

onConfirm(option)

parameter	type	default	description
option	*		The option the user selected

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

ErrorSummaryElement

Properties

element - (type: HTMLInputElement) the associated element
id - (type: string) the input element's id
valid - (type: boolean) was the user's value valid?
error - (type: string) the error message for this element
field - (type: HTMLElement) a containing o-forms-field element
label - (type: HTMLLabelElement) an associated label element

Type

object

Links

"ErrorSummaryElement" typedef on Github

highlightSuggestion(suggestion, query)

Global Function

parameter	type	default	description
suggestion	string		Text which is going to be suggested to the user
query	string		Text which was typed into the autocomplete by the user

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

parameter	type	default	description
instance	Autocomplete		The autocomplete instance whose loading panel should be shown

Returns

void

Links

"showLoadingPane" function on Github

hideLoadingPane(instance)

Global Function

Hide the loading panel

parameter	type	default	description
instance	Autocomplete		The autocomplete instance whose loading panel should be hidden

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>

parameter	type	default	description
id	string		The id of the autocomplete input to associate the clear button with

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

parameter	type	default	description
instance	Autocomplete		The autocomplete instance to setup the clear button for

Returns

void

Links

"initClearButton" function on Github

new Autocomplete(autocompleteEl, options)

Class constructor.

parameter	type	default	description
autocompleteEl (optional)	HTMLElement		The component element in the DOM
options (optional)	AutocompleteOptions	{}	An options object for configuring the component

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 Drawer(headerEl)

Class constructor.

parameter	type	default	description
headerEl (optional)	HTMLElement		The component element in the DOM

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

parameter	type	default	description
headerEl	HTMLElement		The component element in the DOM
drawer

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 ErrorSummary(elements, headingMessage)

Class constructor.

parameter	type	default	description
elements (optional)	Array.<ErrorSummaryElement>		An array of objects, where each object describes an invalid input element
headingMessage (optional)	string	'There is a problem'	A message to show in the header. It defaults to: 'There is a problem'

Methods

createSummary - (instance) Generate Node to hold list of invalid inputs
createList(inputs) - (static) Generate list of anchors
createItem(input) - (static) Generate an item for the error summary
createAnchor(input) - (static) Generate anchor element to point at invalid input

Example

const elementsExample = [
		{
			id: 'text-input',
			valid: false,
			error: 'Please fill out this field',
			label: 'Input Label',
			element: <Element />,
		},
		{...},
	];
	new ErrorSummary(example, 'This is a heading message')

Links

"ErrorSummary" class on Github

new ExpanderUtility(...)

Class constructor.

parameter	type	description
oExpanderElement	HTMLElement	The component element in the DOM
opts	object	An options object for configuring the component.
opts.shrinkTo	string \| number	['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState	string \| number	['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.expandedToggleText	string	['fewer'] - Toggle text when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText	string	['more'] - Toggle text when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".
opts.selectors	object	The selectors for expander elements.
opts.selectors.toggle	string	A selector for the expanders toggles e.g. `.my-expander__toggle`.
opts.selectors.content	string	A selector for the expanders content, which will collapse or expand e.g. `.my-expander__content`.
opts.selectors.item	string	A selector for the items within the expander content e.g. `li` (required only when `shrinkTo` is set to a number).
opts.classnames	object	The classnames to apply to the expander for different states.
opts.classnames.initialized	string	The class to apply to the top level of the expander when initialised by JS e.g. `.my-expander--initialized`.
opts.classnames.inactive	string	The class to apply to the top level of the expander when it can not expand or collapse e.g. `.my-expander--inactive`.
opts.classnames.expanded	string	The class to apply to the expander content when it is expanded e.g. `.my-expander--expanded`.
opts.classnames.collapsed	string	The class to apply to the expander content when it is collapsed JS e.g. `.my-expander--collapsed`.
opts.classnames.collapsibleItem	string	The class to apply to any item (see the `selectors.item` option) which will be hidden when collapsed e.g. `.my-expander__collapsible-item` (required only when `shrinkTo` is set to a number).

Methods

apply(isSilent) - (instance) Recalculate and apply the styles to expand or collapse the expander according to its current state.
toggle - (instance) Toggle the expander so expands or, if it's already expanded, collapses.
expand(isSilent) - (instance) Expand the expander.
collapse(isSilent) - (instance) Collapse the expander.
isCollapsed - (instance) Return true if the expander is currently collapsed.
destroy - (instance) Remove the expander from the page.

Links

"ExpanderUtility" class on Github

new Expander(...)

o-expander constructor.

parameter	type	description
oExpanderElement	HTMLElement	The component element in the DOM
opts	object	An options object for configuring the component.
opts.shrinkTo	string \| number	['height'] - The expander collapse method, "height", "hidden", or a number of items.
opts.toggleState	string \| number	['all'] - How to update the expander toggles: "all" to update text and aria-expanded attributes, "aria" to update only aria-expanded attributes, "none" to avoid updating toggles on click.
opts.itemSelector	string	['li'] - A selector for the expandable items when `shrinkTo` is set to a number, relative to `.o-expander__content`.
opts.expandedToggleText	string	['fewer'] - Toggle text for when the expander is collapsed. Defaults to "fewer", or "less" when `shrinkTo` is "height", or "hidden" when `shrinkTo` is "hidden".
opts.collapsedToggleText	string	['more'] - Toggle text for when the expander is collapsed. Defaults to "more" or "show" when `shrinkTo` is "hidden".

Methods

createCustom(oExpanderElement, opts) - (static) Construct a custom expander. Useful to add customised expander functionality to a component. E.g. to animate away collapsed items rather than hide them immediately.
init(rootEl, opts) - (static) Initialise the component.

Links

"Expander" class on Github

new Forms(formElement, options)

Class constructor.

parameter	type	default	description
formElement (optional)	HTMLElement		The form element in the DOM
options (optional)	object	{}	An options object for configuring the form

Methods

getDataAttributes(formElement) - (static) Get the data attributes from the formElement. If the form is being set up declaratively, this method is used to extract the data attributes from the DOM.
handleEvent(event) - (instance) Event Handler
validateFormInputs - (instance) Form validation Validates every element in the form and creates input objects for the error summary
setState(...)
destroy - (instance) Destroy form instance
init(rootEl, opts) - (static) Initialise form component.

Links

"Forms" class on Github

new HeaderServices(headerEl)

Class constructor

parameter	type	default	description
headerEl (optional)	HTMLElement		The component element in the DOM

Methods

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

Links

"HeaderServices" class on Github

new Input(element)

Class constructor.

parameter	type	default	description
element (optional)	HTMLElement		An input element in the DOM

Methods

handleEvent(event) - (instance) Event Handler
validate(event) - (instance) Input validation Conditions for input validation

Links

"Input" class on Github

new Layout(layoutEl, options)

Class constructor.

parameter	type	default	description
layoutEl (optional)	HTMLElement		The layout element in the DOM
options (optional)	object	{}	An options object for configuring aspects of the layout

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.

parameter	type	default	description
headingElement	HTMLElement		The heading element in the DOM
options (optional)	object	{}	An options object for configuring the linked heading
options.content (optional)	string	"¶"	The content to add to the created link
options.title (optional)	string	"Link directly to this section of the page"	The title attribute to add to the created link

Links

"LinkedHeading" class on Github

new Overlay(...)

Represents an Overlay.

Construct an overlay.

parameter	type	description
id	HTMLElement	String. A unique identifier for the overlay within the page. (Required)
opts	object	An options object for configuring the Overlay. This object MUST have either `src` or `html` set. (Required)
opts.heading.title	string	Your overlay's title
opts.heading.visuallyhidetitle	boolean	If you want to provide a different title style, this option will prevent the title span from being added to the overlay. (In this case the title is only used for aria labelling) Default: false.
opts.heading.shaded	boolean	Whether to shade the background of the header. Default: to false
opts.modal	boolean	Whether the overlay should have modal behaviour or not. Setting this as true will add a translucent shadow between the page and the overlay
opts.compact	boolean	If true, the .o-overlay--compact class will be added to the overlay that reduces heading font-size and paddings in the content.
opts.src	string	Either a url from which HTML to populate the overlay can be loaded, or a querySelector string identifying an element from which the textContent should be extracted.
opts.html	string	String or HTMLElement. Raw HTML (cannot be set declaratively)
opts.trigger	string	querySelector expression or HTMLElement. When there's a trigger set, a click event handler will be added to it that will open or close the overlay accordingly. (cannot be set declaratively)
opts.zindex	string	Value of the CSS z-index property of the overlay. Default set via CSS: '10'
opts.preventclosing	boolean	Prevents closure of overlay via standard x button or escape key. For use when you are directing the user to somewhere else. Only valid with modal set to true.
opts.customclose	boolean	If you do not use the heading, but want to provide a close button in your html / src (with a class of o-overlay__close), setting customclose to true will attach o-overlay's close handler function to that button.
opts.parentnode	string	Should be a query selector for a DOM element. If set, the overlay will be appended as a child of this rather than the document body or target. If multiple nodes are matched, it will use the first. If nothing matches this selector, the body will be used.
opts.nested	boolean	If set to true, the resize, escape, and layer listeners will not be set up. This boolean should be used in conjunction with the parentnode setting to allow an overlay to be positioned within a DOM element rather than overlaid on top of everything. Default: false.
opts.nofocus	boolean	If set to true, the tabindex will not be set on the wrapper element. Useful in conjunction with the nested and parentnode options. Default: false.
opts.fullscreen	boolean	If set to true, the overlay will display full screen. This overlay disables scroll on the underlying document and is dismissible with the back button.

Methods

show - (instance) Show the overlay

Links

"Overlay" class on Github

new Scroll(headerEl)

Class constructor

parameter	type	default	description
headerEl (optional)	HTMLElement		The component element in the DOM

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

new State(...)

Class constructor.

parameter	type	description
inputs (optional)	RadioNodeList	A NodeList of radio input elements
opts	boolean \| object	an object of options
opts.iconOnly	string	[null] - when true display an icon only, hiding the status label

Methods

set(state, label) - (instance) State setter

Links

"State" 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

parameter	type	default	description
query	string		Text which was typed into the autocomplete by the user
populateOptions	PopulateOptions		Function to call when ready to update the suggestions dropdown

Returns

void

Links

"source" function on Github

Autocomplete#options.source~callback(options)

Inner Function

parameter	type	default	description
options	Array.<string>		The options which match the rext which was typed into the autocomplete by the user

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.

parameter	type	default	description
option	*		The suggestion to apply the template with.

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.

parameter	type	default	description
option	*		The suggestion which was selected.

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.

parameter	type	default	description
suggestedValue	string		The suggestion to apply the template with.

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.

parameter	type	default	description
autocompleteEl	HTMLElement		The component element in 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.

parameter	type	default	description
rootElement	HTMLElement \| string		The root element to intialise the component in, or a CSS selector for the root element
options (optional)	object	{}	An options object for configuring the component

Returns

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

Links

"init" function on Github

Drawer#handleEvent(event)

Instance Method

Event Handler

parameter	type	default	description
event	object		The event emitted by element/window interactions

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

parameter	type	default	description
event	object		The event emitted by element/window interactions

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

parameter	type	default	description
item	HTMLElement		the nav menu

Returns

boolean - - whether the nav menu is expanded

Links

"isExpanded" function on Github

DropDown.expand(item)

Static Method

Expands closed nav menu

parameter	type	default	description
item	HTMLElement		the nav menu

Returns

void

Links

"expand" function on Github

DropDown.position(item)

Static Method

Changes nav menu position relative to the window

parameter	type	default	description
item	HTMLElement		the nav menu

Returns

void

Links

"position" function on Github

DropDown.collapse(item)

Static Method

Collapses open nav menu

parameter	type	default	description
item	HTMLElement		the nav menu

Returns

void

Links

"collapse" function on Github

DropDown.collapseAll(items)

Static Method

Collapses all open nav menus

parameter	type	default	description
items	Array.<HTMLElement>		the menu items to collapse

Returns

void

Links

"collapseAll" function on Github

DropDown.expandAll(items)

Static Method

Expands all open nav menus

parameter	type	default	description
items	Array.<HTMLElement>		the menu items to expand

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

parameter	type	default	description
items	Array.<HTMLElement>		the menu items to check

Returns

HTMLElement - - The current menu item

Links

"getCurrent" function on Github

ErrorSummary#createSummary

Instance Method

Generate Node to hold list of invalid inputs

Returns

HTMLDivElement - - a div full of error messages

Links

"createSummary" function on Github

ErrorSummary.createList(inputs)

Static Method

Generate list of anchors

parameter	type	default	description
inputs	Array.<ErrorSummaryElement>		element descriptors

Returns

HTMLUListElement - - the list

Links

"createList" function on Github

ErrorSummary.createItem(input)

Static Method

Generate an item for the error summary

parameter	type	default	description
input (optional)	object		The input object to construct an error summary item for

Returns

Element - - li

Links

"createItem" function on Github

ErrorSummary.createAnchor(input)

Static Method

Generate anchor element to point at invalid input

parameter	type	default	description
input (optional)	object		The input object to construct an anchor for

Returns

Element - - a

Links

"createAnchor" function on Github

ExpanderUtility#apply(isSilent)

Instance Method

Recalculate and apply the styles to expand or collapse the expander according to its current state.

parameter	type	default	description
isSilent	boolean		[false] Set to true to avoid firing the `oExpander.expand` or `oExpander.collapse` events.

Returns

void

Links

"apply" function on Github

ExpanderUtility#toggle

Instance Method

Toggle the expander so expands or, if it's already expanded, collapses.

Returns

void

Links

"toggle" function on Github

ExpanderUtility#expand(isSilent)

Instance Method

Expand the expander.

parameter	type	default	description
isSilent	boolean		[false] Set to true to avoid firing the `oExpander.expand` event.

Returns

void

Links

"expand" function on Github

ExpanderUtility#collapse(isSilent)

Instance Method

Collapse the expander.

parameter	type	default	description
isSilent	boolean		[false] Set to true to avoid firing the `oExpander.collapse` event.

Returns

void

Links

"collapse" function on Github

ExpanderUtility#isCollapsed

Instance Method

Return true if the expander is currently collapsed.

Returns

boolean - - is the expander collapsed

Links

"isCollapsed" function on Github

ExpanderUtility#destroy

Instance Method

Remove the expander from the page.

Returns

void

Links

"destroy" function on Github

Expander.createCustom(oExpanderElement, opts)

Static Method

Construct a custom expander. Useful to add customised expander functionality to a component. E.g. to animate away collapsed items rather than hide them immediately.

parameter	type	default	description
oExpanderElement	HTMLElement		The expander element in the DOM.
opts	object		[{}] - An options object for configuring the expander @see ExpanderUtility.

Returns

ExpanderUtility - - A custom expander

Links

"createCustom" function on Github

Expander.init(rootEl, opts)

Static Method

Initialise the component.

parameter	type	default	description
rootEl	HTMLElement \| string		The root element to initialise the component in, or a CSS selector for the root element
opts	object		[{}] - An options object for configuring the component

Returns

Expander | Array.<Expander> - - Expander instance(s)

Links

"init" function on Github

Forms.getDataAttributes(formElement)

Static Method

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

parameter	type	default	description
formElement	HTMLElement		The message element in the DOM

Returns

Object.<string, any> - - The options

Links

"getDataAttributes" function on Github

Forms#handleEvent(event)

Instance Method

Event Handler

parameter	type	default	description
event	object		The event emitted by element/window interactions

Returns

void

Links

"handleEvent" function on Github

Forms#validateFormInputs

Instance Method

Form validation Validates every element in the form and creates input objects for the error summary

Returns

Links

"validateFormInputs" function on Github

Forms#setState(...)

Instance Method

parameter	type	description
state	string	name of the input fields to add state to
name	string	type of state to apply — one of 'saving', 'saved', 'none'
options	object	an object of options
options.iconLabel	string	[null] - customise the label of the state, e.g. the saved state defaults to "Saving" but could be "Sent"
options.iconOnly	boolean	[false] - when true display an icon only, hiding the status label

Links

"setState" function on Github

Forms#destroy

Instance Method

Destroy form instance

Links

"destroy" function on Github

Forms.init(rootEl, opts)

Static Method

Initialise form component.

parameter	type	default	description
rootEl	HTMLElement \| string		The root element to intialise a form in, or a CSS selector for the root element
opts (optional)	object	{}	An options object for configuring the banners

Returns

Forms | Array.<Forms> - - The newly instantiated Form or Forms

Links

"init" function on Github

HeaderServices.init(rootElement, options)

Static Method

Initialise header component

parameter	type	default	description
rootElement	HTMLElement \| string		The root element to intialise the component in, or a CSS selector for the root element
options (optional)	object	{}	An options object for configuring the component

Returns

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

Links

"init" function on Github

Input#handleEvent(event)

Instance Method

Event Handler

parameter	type	default	description
event	object		The event emitted by element/window interactions

Links

"handleEvent" function on Github

Input#validate(event)

Instance Method

Input validation Conditions for input validation

parameter	type	default	description
event	FocusEvent		[] - The event which has caused re-validation.

Returns

boolean - - is the input valid?

Links

"validate" 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.

parameter	type	default	description
layoutElement	HTMLElement		The layout element in 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.

parameter	type	default	description
rootEl	HTMLElement \| string		The root element to intialise the layout in, or a CSS selector for the root element
opts (optional)	object	{}	An options object for configuring layout behaviour.

Returns

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

Links

"init" function on Github

Overlay#show

Instance Method

Show the overlay

Fires Event

oOverlay#event:ready

Links

"show" function on Github

oOverlay#event:ready

Type: object

Ready event

property	type	description
instance		the firing instance

Links

"ready" event 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

parameter	type	default	description
event	object		A scroll event

Returns

void

Links

"scroll" function on Github

Scroll#showCurrentSelection

Instance Method

Scroll secondary nav to 'current selection'

Returns

void

Links

"showCurrentSelection" function on Github

State#set(state, label)

Instance Method

State setter

parameter	type	default	description
state	string		type of state to display
label	string		customise the label of the state, e.g. the saved state defaults to "Saving" but could be "Sent"

Links

"set" function on Github

new Overlay(...)

Represents an Overlay.

Construct an overlay.

parameter	type	description
id	HTMLElement	String. A unique identifier for the overlay within the page. (Required)
opts	object	An options object for configuring the Overlay. This object MUST have either `src` or `html` set. (Required)
opts.heading.title	string	Your overlay's title
opts.heading.visuallyhidetitle	boolean	If you want to provide a different title style, this option will prevent the title span from being added to the overlay. (In this case the title is only used for aria labelling) Default: false.
opts.heading.shaded	boolean	Whether to shade the background of the header. Default: to false
opts.modal	boolean	Whether the overlay should have modal behaviour or not. Setting this as true will add a translucent shadow between the page and the overlay
opts.compact	boolean	If true, the .o-overlay--compact class will be added to the overlay that reduces heading font-size and paddings in the content.
opts.src	string	Either a url from which HTML to populate the overlay can be loaded, or a querySelector string identifying an element from which the textContent should be extracted.
opts.html	string	String or HTMLElement. Raw HTML (cannot be set declaratively)
opts.trigger	string	querySelector expression or HTMLElement. When there's a trigger set, a click event handler will be added to it that will open or close the overlay accordingly. (cannot be set declaratively)
opts.zindex	string	Value of the CSS z-index property of the overlay. Default set via CSS: '10'
opts.preventclosing	boolean	Prevents closure of overlay via standard x button or escape key. For use when you are directing the user to somewhere else. Only valid with modal set to true.
opts.customclose	boolean	If you do not use the heading, but want to provide a close button in your html / src (with a class of o-overlay__close), setting customclose to true will attach o-overlay's close handler function to that button.
opts.parentnode	string	Should be a query selector for a DOM element. If set, the overlay will be appended as a child of this rather than the document body or target. If multiple nodes are matched, it will use the first. If nothing matches this selector, the body will be used.
opts.nested	boolean	If set to true, the resize, escape, and layer listeners will not be set up. This boolean should be used in conjunction with the parentnode setting to allow an overlay to be positioned within a DOM element rather than overlaid on top of everything. Default: false.
opts.nofocus	boolean	If set to true, the tabindex will not be set on the wrapper element. Useful in conjunction with the nested and parentnode options. Default: false.
opts.fullscreen	boolean	If set to true, the overlay will display full screen. This overlay disables scroll on the underlying document and is dismissible with the back button.

Methods

show - (instance) Show the overlay

Links

"Overlay" class on Github

JSDoc: o-overlay

CharacterHighlight

Properties

Type

Links

PopulateOptions(options)

Returns

Type

Links

Source(query, populateOptions)

Returns

Type

Links

MapOptionToSuggestedValue(option)

Returns

Type

Links

onConfirm(option)

Returns

Type

Links

AutocompleteOptions

Properties

Type

Links

ErrorSummaryElement

Properties

Type

Links

highlightSuggestion(suggestion, query)

Global Function

Returns

Links

createLoadingContainer

Global Function

Returns

Links

showLoadingPane(instance)

Global Function

Returns

Links

hideLoadingPane(instance)

Global Function

Returns

Links

createClearButton(id)

Global Function

Returns

Links

initClearButton(instance)

Global Function

Returns

Links

new Autocomplete(autocompleteEl, options)

Methods

Properties

Links

new Drawer(headerEl)

Methods

Properties

Links

new DropDown(headerEl, drawer)

Methods

Properties

Links

new ErrorSummary(elements, headingMessage)

Methods

Example

Links

new ExpanderUtility(...)

Methods

Links

new Expander(...)

Methods

Links

new Forms(formElement, options)

Methods

Links

new HeaderServices(headerEl)

Methods