Alert

new Alert(options) → {Class}

A alert component with 5 styles, default, notice, success, error and accessibility. It also allows for a cookie to store dismissed state.

Parameters:
NameTypeDescription
optionsobject

The options for the component.

Properties
NameTypeDescription
contentstring

The content of the alert.

ctaLabelstring

The label for the call-to-action button.

ctaLinkstring

The link href for the call-to-action button.

customAttributesobject

Any custom attributes for the component.

customClassesArray

An array of additional classes for the component.

dismissableAriaLabelstring

The aria-label for the dismiss button.

dismissableTitlestring

The title for the dismiss button.

hasCtaboolean

Whether or not the alert has a call-to-action button.

idstring

Id for the component, auto generated if not passed.

isDismissableboolean

Whether or not the alert is dismissable.

isInlineboolean

Whether or not the alert is inline.

renderedstring

Is the component already rendered in the dom, eg by php?

renderOnInitstring

Render the component on init of the class?

spacingstring | number | Array | object

Spacing for the component.

targetstring

The target to render to. Any valid css selector string.

targetPositionstring

The insert position for the component relative to the target.

themestring

Theme for the component, primary or cosmos.

typestring

The type of the alert. Default, notice, success, error and accessibility.

Since
  • 1.1.16
Source
Returns:

The class instance.

Type: 
Class
Example
import Alert from '@gravityforms/components/html/admin/elements/Alert';

function Example() {
     const alertInstance = new Alert( {
         content: 'This is an alert',
         id: 'my-alert',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
         type: 'error',
     } );

     // Some time later we can render it. This is only done if we set renderOnInit to false.
     // If true it will render on initialization.
     alertInstance.init();
}

Methods

(static) alertTemplate(options) → {string}

Generates the markup for an alert in the admin.

Parameters:
NameTypeDescription
optionsobject

The options for the component template.

Properties
NameTypeDescription
contentstring

The content of the alert.

ctaLabelstring

The label for the call-to-action button.

ctaLinkstring

The link href for the call-to-action button.

customAttributesobject

Any custom attributes.

customClassesArray

An array of additional classes for the toggle.

dismissableAriaLabelstring

The aria-label for the dismiss button.

dismissableTitlestring

The title for the dismiss button.

hasCtaboolean

Whether or not the alert has a call-to-action button.

idstring

Id for the alert, auto generated if not passed.

isDismissableboolean

Whether or not the alert is dismissable.

isInlineboolean

Whether or not the alert is inline.

selectorstring

The data-js selector string for the alert.

spacingstring | number | Array | object

The spacing for the component, string, number, object or array.

themestring

Theme for the toggle, primary or cosmos.

typestring

The type of the alert. Default, notice, success, error and accessibility.

Since
  • 1.1.16
Source
Returns:
Type: 
string
Example
import { alertTemplate } from '@gravityforms/components/html/admin/elements/Alert';

function Example() {
     const alertTemplateHTML = alertTemplateTemplate( options );
     document.body.insertAdjacentHTML( 'beforeend', alertTemplateHTML );
}

(static) bindEvents() → {void}

Bind event listeners for the alert.

Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) dismissAlert(e) → {void}

Dismiss the alert and store a cookie if name is set.

Parameters:
NameTypeDescription
e
Since
  • 1.1.16
Source
Returns:
Type: 
void

(static) init() → {void}

Initialize the component.

Since
  • 1.1.16
Source
Fires:
Returns:
Type: 
void

(static) render() → {void}

Renders the component into the dom.

Since
  • 1.1.16
Source
Returns:
Type: 
void