o-banner 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 Banner(bannerElement, options)

Represents a banner.

Class constructor.

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

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

<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

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.

parameter	type	default	description
bannerElement (optional)	HTMLElement		The banner element to build around

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.

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

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

Returns

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

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

new Banner(bannerElement, options)

Represents a banner.

Class constructor.

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

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

JSDoc: o-banner

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 Banner(bannerElement, options)

Methods

Links

new Overlay(...)

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)