Origami Frontend Components & Services

JSDoc: o-stepped-progress

event:"oShare.open"

Type: object

The `oShare.open` open event fires when a social network share action is triggered, to open a new window.

property type description
share The o-share instance.
action The kind of share i.e. "social".
url The social share url opened.

Links

event:"oShare.ready"

Type: object

The `oShare.ready` fires when a o-share instance has been initialised.

property type description
share The initialised o-share instance.

Links

new Share(rootEl)

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for an o-share component. You can pass an HTMLElement or a selector string

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 SteppedProgressStep(stepElement, parent)

Represents a step in a stepped progress component.

Class constructor.

parameter type default description
stepElement HTMLElement The step element in the DOM
parent

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.

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

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

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

  • undefined

Fires Event

Links

Share#destroy

Instance Method

Destroys the Share instance, disables dom-delegates

Returns

  • undefined

Links

Share.init(rootEl)

Static Method

Initialises all o-share components inside the element passed as the first parameter

parameter type default description
rootEl HTMLElement | string [el=document.body] - Element where to search for o-share components. You can pass an HTMLElement or a selector string

Returns

  • Share | Array.<Share> - - A Share or an array of Shares

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

  • void

Links

SteppedProgressStep#markAsCurrent

Instance Method

Set the step's state to "current".

Returns

  • void

Links

SteppedProgressStep#markAsError

Instance Method

Set the step's state to "error".

Returns

  • void

Links

SteppedProgressStep#markAsFuture

Instance Method

Remove all states from the step (marking it as a future step).

Returns

  • void

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

parameter type default description
index number The index to check.

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

parameter type default description
index number The index of the step to get.

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

  • void

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.

parameter type default description
steppedProgressElement HTMLElement The component element in the DOM

Returns

  • object - Returns an options object constructed from the DOM.

Links

SteppedProgress.init(rootElement, options)

Static Method

Initialise stepped progress component.

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

  • SteppedProgress | Array.<SteppedProgress> - Returns a stepped progress instance, or an array of instances.

Links

Status
active
Switch component view

GitHub: o-stepped-progress@4.0.7

Install o-stepped-progress

If using the Build Service, add o-stepped-progress@^4.0.7 to your script and link tags.

If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-stepped-progress@^4.0.7".

Help & Support

o-stepped-progress is maintained directly by the Origami team. If you have any questions about o-stepped-progress or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com