o-expander 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

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

<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

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

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

JSDoc: o-expander

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

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

Methods

Links

new Expander(...)

Methods

Links

<anonymous>~customSource

Inner Property

Type

Links

Autocomplete#mapOptionToSuggestedValue

Instance Property

Type

Links

Autocomplete#options.source(query, populateOptions)

Static Method

Returns

Links

Autocomplete#options.source~callback(options)

Inner Function

Returns

Links

templates.suggestion(option)

Static Method

Returns

Links

templates.inputValue(option)