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

MessageOptions

An object of options to configure a message instance.

Properties

type - (type: string) The o-message type e.g. 'action', 'alert' and 'notice'.
state - (type: string) The o-message state e.g. `success`, `neutral`, `error`, `inform-inverse`.
autoOpen - (type: boolean) [true] - Whether to show the message automatically.
parentElement - (type: string) [null] - The element to append the message to. If none is declared it will leave any existing message elements in place or append to the body when creating a new message element.
content - (type: object) Configuration for the message copy.
content.detail - (type: string) Copy for of the message e.g "Thing saved to the place you requested.".
content.highlight - (type: string) [null] - Highlighted copy to prepend the main message copy "Success!".
content.additionalInfo - (type: string) [null] - More copy with additional information – only applies to a message with an `inner` layout.
actions - (type: Object) Links to display on the message.
actions.primary - (type: Object) Show a link in the style of a primary button within the message.
actions.primary.text - (type: string) The copy for the link.
actions.primary.url - (type: string) The url for the link.
actions.primary.openInNewWindow - (type: boolean) [false] - Opens in a new tab/window when set to `true`.
actions.secondary - (type: Object) Show a link with less emphasis that the primary action.
actions.secondary.text - (type: string) The copy for the link.
actions.secondary.url - (type: string) The url for the link.
actions.secondary.openInNewWindow - (type: boolean) [false] - Opens in a new tab/window when set to `true`.
close - (type: boolean) [true] - Whether or not to display a close button.

Type

object

Links

"MessageOptions" 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 Message(messageElement, options)

Initialises an `o-message` component.

parameter	type	default	description
messageElement	HTMLElement		[undefined] - The `o-message` element (optional).
options	MessageOptions		An options object for configuring the message.

Methods

render - (instance) Render the message.
open - (instance) Open the message.
close - (instance) Close the message.
getDataAttributes(messageElement) - (static) Get the data attributes from the messageElement. If the message is being set up declaratively, this method is used to extract the data attributes from the DOM.
init(rootElement, opts) - (static) Initialise message component.

Examples

Example #1

To construct all elements on the page with the `data-o-component="o-message"` attribute.
     Message.init();

Example #2

To construct a specifc o-message on the page.
			const myMessageElement = document.querySelector('.my-message');
     const myMessage = new Message(myMessageElement, {});

Example #3

To construct a message which does not already exist on the page.
     const errorAlert = new Message(null, {
			type: 'alert',
			state: 'error',
			content: {
				highlight: 'Something has gone wrong.',
				detail: 'The quick brown fox did not jump over the lazy dogs.'
			}
     });

Links

"Message" 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 Tooltip(tooltipEl, opts)

Represents a tooltip.

parameter	type	default	description
tooltipEl	HTMLElement		The tooltip element in the DOM (Required)
opts	object		An options object for configuring the tooltip (Optional)

Methods

getOptions(tooltipEl) - (static) Get the data attributes from the tooltipEl. If the tooltip is being set up declaratively, this method is used to extract the data attributes from the DOM.
checkOptions(opts) - (static) Check the options passed in are valid, and that the required option (target) is present
render - (instance) Render the tooltip. Adds markup and attributes to this.tooltipEl in the DOM
show - (instance) Show the tooltip. Adds event handlers for clicks, touches, keypresses and viewport resizes. Uses FTDomDelegate to implement the event delegate pattern. Calls DrawTooltip.
toggle - (instance) Toggle the tooltip open and close
closeAfter(seconds) - (instance) Close the tooltip after set time
showAfter(seconds) - (instance) Show the tooltip after set time
destroy - (instance) Destroy the tooltip.
close(...) - (instance) Close the tooltip. (Visually hide it and remove event listeners)
closeOnKeyUp(ev)
resizeListener - (instance) Respond to resize events. Redraw the tooltip in case the target has moved.
drawTooltip - (instance) Calculates the best place to position the tooltip based on space around the target and a preference set by the app developer.
width
height

Links

"Tooltip" class on Github

new Typography(typographyEl, opts)

Class constructor.

parameter	type	default	description
typographyEl (optional)	HTMLElement		The root element to apply typography classes.
opts (optional)	object	{loadOnInit: true, rejectOnFontLoadFailure: false, fontLoadedCookieName: 'o-typography-fonts-loaded'}	An options object for configuring o-typography.

Methods

getOptions(typographyEl) - (static) Get the data attributes from the typographyEl. If typography is being set up declaratively, this method is used to extract the data attributes from the DOM.
checkOptions(opts) - (static) Check the options passed in are valid, otherwise set defaults
init(rootElement, options) - (static) Initialise o-typography.

Links

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

module.exports.message()

Static Method

Build a full message element. Used when there is no message element in the DOM.

parameter	type	default	description

Returns

HTMLElement - Returns the new message element

Links

"message" function on Github

module.exports.closeButton

Static Method

Build a close button

Returns

HTMLElement - Returns a new element to close the message

Links

"closeButton" function on Github

Message#render

Instance Method

Render the message.

Returns

void

Links

"render" function on Github

Message#open

Instance Method

Open the message.

Returns

void

Links

"open" function on Github

Message#close

Instance Method

Close the message.

Returns

void

Links

"close" function on Github

Message.getDataAttributes(messageElement)

Static Method

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

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

Returns

object - - An object of options defined via data attributes on the message element

Links

"getDataAttributes" function on Github

Message.init(rootElement, opts)

Static Method

Initialise message component.

parameter	type	default	description
rootElement	HTMLElement \| string		The root element to intialise a message in, or a CSS selector for the root element
opts	MessageOptions		Options for customizing the message

Returns

Message | Array.<Message> - The newly constructed message component or components

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

Tooltip.getOptions(tooltipEl)

Static Method

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

parameter	type	default	description
tooltipEl	HTMLElement		The tooltip element in the DOM (Required)

Returns

Object.<string, any> - a dictionary of options

Links

"getOptions" function on Github

Tooltip.checkOptions(opts)

Static Method

Check the options passed in are valid, and that the required option (target) is present

parameter	type	default	description
opts	object		An Object with configuration options for the tooltip

Returns

object - opts

Links

"checkOptions" function on Github

Tooltip#render

Instance Method

Render the tooltip. Adds markup and attributes to this.tooltipEl in the DOM

Links

"render" function on Github

Tooltip#show

Instance Method

Show the tooltip. Adds event handlers for clicks, touches, keypresses and viewport resizes. Uses FTDomDelegate to implement the event delegate pattern. Calls DrawTooltip.

Links

"show" function on Github

Tooltip#toggle

Instance Method

Toggle the tooltip open and close

Links

"toggle" function on Github

Tooltip#closeAfter(seconds)

Instance Method

Close the tooltip after set time

parameter	type	default	description
seconds	number		how long to wait until closing

Links

"closeAfter" function on Github

Tooltip#showAfter(seconds)

Instance Method

Show the tooltip after set time

parameter	type	default	description
seconds	number		how long to wait until showing

Links

"showAfter" function on Github

Tooltip#destroy

Instance Method

Destroy the tooltip.

Links

"destroy" function on Github

Tooltip#close(...)

Instance Method

Close the tooltip. (Visually hide it and remove event listeners)

parameter	type	default	description
_event	any		ignored
_target	any		ignored
fireCloseEvent	boolean	true	should we fire the oTooltip.close event?

Returns

boolean - false

Links

"close" function on Github

Tooltip#closeOnKeyUp(ev)

Instance Method

parameter	type	default	description
ev	Event		calls close on the tooltip if the key is Esc

Links

"closeOnKeyUp" function on Github

Tooltip#resizeListener

Instance Method

Respond to resize events. Redraw the tooltip in case the target has moved.

Links

"resizeListener" function on Github

Tooltip#drawTooltip

Instance Method

Calculates the best place to position the tooltip based on space around the target and a preference set by the app developer.

Returns

void - this function is recursive!

Links

"drawTooltip" function on Github

Tooltip#width

Instance Method

Returns

number - the offset width of the tooltip element

Links

"width" function on Github

Tooltip#height

Instance Method

Returns

number - the offset height of the tooltip element

Links

"height" function on Github

Typography.getOptions(typographyEl)

Static Method

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

parameter	type	default	description
typographyEl	HTMLElement		The typography element in the DOM (Required)

Returns

Object.<string, any> - An option dictionary

Links

"getOptions" function on Github

Typography.checkOptions(opts)

Static Method

Check the options passed in are valid, otherwise set defaults

parameter	type	default	description
opts	object		An Object with configuration options for typography

Returns

object - opts

Links

"checkOptions" function on Github

Typography.init(rootElement, options)

Static Method

Initialise o-typography.

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

Returns

Typography - The Typography instance

Links

"init" function on Github

module.exports.message()

Static Method

Build a full message element. Used when there is no message element in the DOM.

parameter	type	default	description

Returns

HTMLElement - Returns the new message element

Links

"message" function on Github

JSDoc: o-message

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

MessageOptions

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 Message(messageElement, options)

Methods

Examples

Example #1

Example #2

Example #3

Links

new Overlay(...)

Methods

Links

new Tooltip(tooltipEl, opts)

Methods

Links

new Typography(typographyEl, opts)

Methods

Links

<anonymous>~customSource

Inner Property

Type

Links