JSDoc: o-header

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

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

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

Class constructor.

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.

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.

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.

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 Input(element)

Class constructor.

Methods

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

Links

• "Input" class on Github

new State(...)

Class constructor.

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

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

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

Returns

• HTMLUListElement - - the list

Links

• "createList" function on Github

ErrorSummary.createItem(input)

Static Method

Generate an item for the error summary

Returns

• Element - - li

Links

• "createItem" function on Github

ErrorSummary.createAnchor(input)

Static Method

Generate anchor element to point at invalid input

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.

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.

Returns

• void

Links

• "expand" function on Github

ExpanderUtility#collapse(isSilent)

Instance Method

Collapse the expander.

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.

Returns

• ExpanderUtility - - A custom expander

Links

• "createCustom" function on Github

Expander.init(rootEl, opts)

Static Method

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

Returns

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

Links

• "getDataAttributes" function on Github

Forms#handleEvent(event)

Instance Method

Event Handler

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

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.

Returns

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

Links

• "init" function on Github

Input#handleEvent(event)

Instance Method

Event Handler

Links

• "handleEvent" function on Github

Input#validate(event)

Instance Method

Input validation Conditions for input validation

Returns

• boolean - - is the input valid?

Links

• "validate" function on Github

State#set(state, label)

Instance Method

State setter

Links

• "set" function on Github