CharacterHighlight
Properties
-
0
- (type: string)
the character in the suggestion
-
1
- (type: boolean)
should it be highlighted?
Type
Array
Links
PopulateOptions(options)
Returns
Type
function
Links
Source(query, populateOptions)
Returns
Type
function
Links
MapOptionToSuggestedValue(option)
Returns
-
string
- The string to display as the suggestions for this option
Type
function
Links
onConfirm(option)
Returns
Type
function
Links
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
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
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
createLoadingContainer
Global Function
Create DOM for the loading container.
Returns
-
HTMLDivElement
- The loading container.
Links
showLoadingPane(instance)
Global Function
Show the loading panel
Returns
Links
hideLoadingPane(instance)
Global Function
Hide the loading panel
Returns
Links
new Autocomplete(autocompleteEl, options)
Class constructor.
Methods
Properties
Links
new Drawer(headerEl)
Class constructor.
Methods
Properties
-
enabled
-
Check if the drawer is currently enabled.
If the burger element is visible, the drawer is enabled.
Links
new DropDown(headerEl, drawer)
Class constructor
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
new ErrorSummary(elements, headingMessage)
Class constructor.
Methods
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
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
new Expander(...)
o-expander constructor.
Methods
Links
new Layout(layoutEl, options)
Class constructor.
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
Links
new LinkedHeading(...)
Represents a linked heading.
Class constructor.
Links
new Overlay(...)
Represents an Overlay.
Construct an overlay.
Methods
-
show
- (instance) Show the overlay
Links
new Share(rootEl)
Methods
-
init
- (inner) Initialises the Share class, rendering the o-share element if it's empty with [config](#config) options,
or from corresponding data attributes and sets up dom-delegates.
Dispatches 'oShare.ready' at the end
-
destroy
- (instance) Destroys the Share instance, disables dom-delegates
-
init(rootEl)
- (static) Initialises all o-share components inside the element passed as the first parameter
Links
new State(...)
Class constructor.
Methods
Links
new SteppedProgressStep(stepElement, parent)
Represents a step in a stepped progress component.
Class constructor.
Methods
-
isComplete
- (instance) Get whether the step has the "complete" state.
-
isCurrent
- (instance) Get whether the step has the "current" state.
-
isError
- (instance) Get whether the step has the "error" state.
-
isFuture
- (instance) Get whether the step has no explicit state (and so is a future step).
-
markAsComplete
- (instance) Set the step's state to "complete".
-
markAsCurrent
- (instance) Set the step's state to "current".
-
markAsError
- (instance) Set the step's state to "error".
-
markAsFuture
- (instance) Remove all states from the step (marking it as a future step).
Links
new SteppedProgress(steppedProgressElement, options)
Represents a stepped progress component.
Class constructor.
Methods
-
getSteps
- (instance) Get an array of steps.
-
getCompletedSteps
- (instance) Get an array of steps with a "completed" status.
-
hasStepAtIndex(index)
- (instance) Get whether a step exists at a given index (0-based).
-
getStepAtIndex(index)
- (instance) Get the step at a given index (0-based).
-
getCurrentStep
- (instance) Get the step which has the "current" state. If there are multiple steps with this state then
the last one will be returned.
-
getLastStep
- (instance) Get the last step in the stepped progress.
-
isComplete
- (instance) Get whether all steps have the "completed" state.
-
getNextStep
- (instance) Get the next future step (a step which does not have the "current", "complete", or "error"
states). If no such step exists, the last step will be returned.
-
progress
- (instance) Mark the current step as "complete" and then mark the next step as "current". If all steps
have the "complete" state then this method does nothing.
-
getDataAttributes(steppedProgressElement)
- (static) Get the data attributes from the stepped progress element. If the component is being set up
declaratively, this method is used to extract the data attributes from the DOM.
-
init(rootElement, options)
- (static) Initialise stepped progress component.
Links
event:"oShare.open"
Type: object
The `oShare.open` open event fires when a social network share action is
triggered, to open a new window.
Links
event:"oShare.ready"
Type: object
The `oShare.ready` fires when a o-share instance has been initialised.
Links
<anonymous>~customSource
Inner Property
Type
Links
Autocomplete#mapOptionToSuggestedValue
Instance Property
Type
- MapOptionToSuggestedValue
Links
Autocomplete#options.source(query, populateOptions)
Static Method
Returns
Links
Autocomplete#options.source~callback(options)
Inner Function
Returns
Links
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
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
<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
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
Autocomplete.init(rootElement, options)
Static Method
Initialise o-autocomplete component/s.
Returns
-
Autocomplete | Array.<Autocomplete>
- The newly constructed Autocomplete components
Links
Drawer#handleEvent(event)
Instance Method
Event Handler
Returns
Links
Drawer#enabled
Instance Property
Check if the drawer is currently enabled.
If the burger element is visible, the drawer is enabled.
Links
Drawer#render
Instance Method
Drawer rendering
Returns
Links
Drawer#toggleDrawer
Instance Method
Drawer hide/show functionality
Returns
Links
DropDown#navItems
Instance Property
Type
- Nav items with a dropdown.
Links
DropDown#handleEvent(event)
Instance Method
Event Handler
Returns
Links
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
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
Links
DropDown.isExpanded(item)
Static Method
Checks whether nav menu is expanded
Returns
-
boolean
- - whether the nav menu is expanded
Links
DropDown.expand(item)
Static Method
Expands closed nav menu
Returns
Links
DropDown.position(item)
Static Method
Changes nav menu position relative to the window
Returns
Links
DropDown.collapse(item)
Static Method
Collapses open nav menu
Returns
Links
DropDown.collapseAll(items)
Static Method
Collapses all open nav menus
Returns
Links
DropDown.expandAll(items)
Static Method
Expands all open nav menus
Returns
Links
DropDown.getCurrent(items)
Static Method
Returns items which contain an anchor
with the attribute aria-current
set to true or "page".
Returns
-
HTMLElement
- - The current menu item
Links
ErrorSummary#createSummary
Instance Method
Generate Node to hold list of invalid inputs
Returns
-
HTMLDivElement
- - a div full of error messages
Links
ErrorSummary.createList(inputs)
Static Method
Generate list of anchors
Returns
-
HTMLUListElement
- - the list
Links
ErrorSummary.createItem(input)
Static Method
Generate an item for the error summary
Returns
Links
ErrorSummary.createAnchor(input)
Static Method
Generate anchor element to point at invalid input
Returns
Links
ExpanderUtility#apply(isSilent)
Instance Method
Recalculate and apply the styles to expand or collapse the expander
according to its current state.
Returns
Links
ExpanderUtility#toggle
Instance Method
Toggle the expander so expands or, if it's already expanded, collapses.
Returns
Links
ExpanderUtility#expand(isSilent)
Instance Method
Expand the expander.
Returns
Links
ExpanderUtility#collapse(isSilent)
Instance Method
Collapse the expander.
Returns
Links
ExpanderUtility#isCollapsed
Instance Method
Return true if the expander is currently collapsed.
Returns
-
boolean
- - is the expander collapsed
Links
ExpanderUtility#destroy
Instance Method
Remove the expander from the page.
Returns
Links
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
Expander.init(rootEl, opts)
Static Method
Initialise the component.
Returns
-
Expander | Array.<Expander>
- - Expander instance(s)
Links
Layout#navAnchors
Instance Property
Type
- Array.<HTMLAnchorElement>
Links
Layout#constructNavFromDOM
Instance Method
Construct the sidebar navigation from headings within the DOM.
Links
Layout#navAnchors
Instance Property
Type
- Array.<HTMLAnchorElement>
Links
Layout#destroy
Instance Method
Unmount the sideBarNavigation.
Links
Layout#highlightNavItems
Instance Method
Enables navigation item highlighting based on scroll position.
Relies on heading ids and anchor href being the same.
Returns
Links
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.
Returns
-
Object.<string, any>
- - Options for configuring the layout
Links
Layout.init(rootEl, opts)
Static Method
Initialise layout component.
Returns
-
Layout | Array.<Layout>
- Returns either a single Layout instance or an array of Layout instances
Links
Overlay#show
Instance Method
Show the overlay
Fires Event
Links
oOverlay#event:ready
Type: object
Ready event
Links
Share~init
Inner Function
Initialises the Share class, rendering the o-share element if it's empty with config options,
or from corresponding data attributes and sets up dom-delegates.
Dispatches 'oShare.ready' at the end
Returns
Fires Event
Links
Share#destroy
Instance Method
Destroys the Share instance, disables dom-delegates
Returns
Links
Share.init(rootEl)
Static Method
Initialises all o-share components inside the element passed as the first parameter
Returns
-
Share | Array.<Share>
- - A Share or an array of Shares
Links
State#set(state, label)
Instance Method
State setter
Links
SteppedProgressStep#isComplete
Instance Method
Get whether the step has the "complete" state.
Returns
-
boolean
- Returns whether the step is complete.
Links
SteppedProgressStep#isCurrent
Instance Method
Get whether the step has the "current" state.
Returns
-
boolean
- Returns whether the step is current.
Links
SteppedProgressStep#isError
Instance Method
Get whether the step has the "error" state.
Returns
-
boolean
- Returns whether the step has an error.
Links
SteppedProgressStep#isFuture
Instance Method
Get whether the step has no explicit state (and so is a future step).
Returns
-
boolean
- Returns whether the step has no explicit state.
Links
SteppedProgressStep#markAsComplete
Instance Method
Set the step's state to "complete".
Returns
Links
SteppedProgressStep#markAsCurrent
Instance Method
Set the step's state to "current".
Returns
Links
SteppedProgressStep#markAsError
Instance Method
Set the step's state to "error".
Returns
Links
SteppedProgressStep#markAsFuture
Instance Method
Remove all states from the step (marking it as a future step).
Returns
Links
SteppedProgress#getSteps
Instance Method
Get an array of steps.
Returns
-
Array.<SteppedProgressStep>
- Returns an array of steps.
Links
SteppedProgress#getCompletedSteps
Instance Method
Get an array of steps with a "completed" status.
Returns
-
Array.<SteppedProgressStep>
- Returns an array of steps.
Links
SteppedProgress#hasStepAtIndex(index)
Instance Method
Get whether a step exists at a given index (0-based).
Returns
-
boolean
- Returns whether a step exists at a given index.
Links
SteppedProgress#getStepAtIndex(index)
Instance Method
Get the step at a given index (0-based).
Returns
-
SteppedProgressStep
- Returns the step at the given index.
Links
SteppedProgress#getCurrentStep
Instance Method
Get the step which has the "current" state. If there are multiple steps with this state then
the last one will be returned.
Returns
-
SteppedProgressStep
- Returns the current step.
Links
SteppedProgress#getLastStep
Instance Method
Get the last step in the stepped progress.
Returns
-
SteppedProgressStep
- Returns the last step.
Links
SteppedProgress#isComplete
Instance Method
Get whether all steps have the "completed" state.
Returns
-
boolean
- Returns whether all steps are completed.
Links
SteppedProgress#getNextStep
Instance Method
Get the next future step (a step which does not have the "current", "complete", or "error"
states). If no such step exists, the last step will be returned.
Returns
-
SteppedProgressStep
- Returns the next step.
Links
SteppedProgress#progress
Instance Method
Mark the current step as "complete" and then mark the next step as "current". If all steps
have the "complete" state then this method does nothing.
Returns
Links
SteppedProgress.getDataAttributes(steppedProgressElement)
Static Method
Get the data attributes from the stepped progress element. If the component is being set up
declaratively, this method is used to extract the data attributes from the DOM.
Returns
-
object
- Returns an options object constructed from the DOM.
Links
SteppedProgress.init(rootElement, options)
Static Method
Initialise stepped progress component.
Returns
-
SteppedProgress | Array.<SteppedProgress>
- Returns a stepped progress instance, or an array of instances.
Links