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" typedef on Github

new Message(messageElement, options)

Initialises an `o-message` component.

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

module.exports.message()

Static Method

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

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.

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.

Returns

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

Links

• "init" function on Github