Origami Frontend Components & Services

JSDoc: o-message

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(rootElement)

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

Returns

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

Type

Object

Links

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.

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

module.exports.message(opts)

Static Method

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

parameter type default description
opts MessageOptions An options object for configuring the message.

Returns

  • HTMLElement - Returns the new message element

Links

module.exports.closeButton

Static Method

Build a close button

Returns

  • HTMLElement - Returns a new element to close the message

Links

Message#render

Instance Method

Render the message.

Returns

  • void

Links

Message#open

Instance Method

Open the message.

Returns

  • void

Links

Message#close

Instance Method

Close the message.

Returns

  • void

Links

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

module.exports.message(opts)

Static Method

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

parameter type default description
opts MessageOptions An options object for configuring the message.

Returns

  • HTMLElement - Returns the new message element

Links

Status
active Origami v1 (Bower)
Switch component view

GitHub Repository

Install o-message

If using the Build Service, add o-message@^4.1.8 to your script and link tags.

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

Help & Support

o-message is maintained directly by the Origami team. If you have any questions about o-message 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