Class: Dialog

new Dialog(options) → {Class}

A dialog component to house modals, dialogs or prompts.

Parameters:

Name Type Description

options

object

The options for the dialog.

Properties

Name	Type	Description
`alertButtonText`	string	The text for the alert button.
`cancelButtonText`	string	The text for the cancel button.
`closeButtonClasses`	string	The classes for the close button. Space seperated string.
`closeButtonTitle`	string	The title for the close button.
`confirmButtonAttributes`	string	The attributes for the confirm button. Space seperated string.
`confirmButtonIcon`	string	The icon for the confirm button.
`confirmButtonText`	string	The text for the confirm button.
`content`	string	The content for the dialog. HTML allowed.
`id`	string	The id for the dialog.
`lockBody`	boolean	Whether to lock the body behind the dialog
`maskBlur`	boolean	Whether to blur the background when the dialog is open.
`maskClasses`	string	The classes for the mask. Space seperated string.
`maskTheme`	boolean	Background mask theme, `none`, `light` or `dark`.
`mode`	string	The mode for the dialog. `alert`, `confirm` or `dialog`.
`onClose`	function	Function to fire when closed
`onConfirm`	function	Function to fire when confirm button is clicked in dialog mode
`onOpen`	function	Function to fire when opened
`position`	string	The position for the dialog. `center`, `top` or `bottom`.
`renderOnInit`	boolean	Render on initialization?
`target`	string	Append target for the dialog and its mask. Uses querySelectorAll
`title`	string	The title for the dialog.
`titleIcon`	string	The icon for the title.
`titleIconColor`	string	The color for the title icon.
`triggers`	string	The optional selector[s] of the trigger that shows it
`wrapperClasses`	string	The classes for the wrapper. Space seperated string.
`zIndex`	number	The z-index for the dialog.

Since: 1.0.6
Source: modules/Dialog/index.js, line 126

Returns:

The class instance.

Type:: Class

Example

import Dialog from '@gravityforms/components/html/admin/modules/Dialog';

function Example() {
     const dialogInstance = new Dialog( {
         id: 'example-dialog',
         renderOnInit: false,
         target: '#example-target',
         targetPosition: 'beforeend',
     } );

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

Members

(static) closeDialog

Closes the dialog and fires the onClose function that can be passed in. Can be used by external developers by firing the method on the instance. Also closes all instances if the event 'gform/dialog/close-all' is fired on the document.

Since: 1.0.6
Source: modules/Dialog/index.js, line 271

(static) handleConfirm

Handles a confirm button click and closes if the option is true.

Since: 1.0.6
Source: modules/Dialog/index.js, line 376

(static) handleKeyEvents

Handles accessibility focus looping on the dialog using the focusLoop util.

Since: 1.0.6
Source: modules/Dialog/index.js, line 322

(static) handleMaskClick

Handles closing the dialog on mask click.

Since: 1.0.6
Source: modules/Dialog/index.js, line 359

(static) handleTriggerClick

Handles opening/closing the dialog on a trigger click.

Since: 1.0.6
Source: modules/Dialog/index.js, line 340

(static) maybeCloseDialog

Closes all instances except the one that gets passed the activeId when the event 'gform/dialog/close' is fired on the document.

Since: 1.0.6
Source: modules/Dialog/index.js, line 304

Methods

(static) bindEvents() → {void}

Binds the events for this component.

Since: 1.0.6
Source: modules/Dialog/index.js, line 438

Returns:

Type:: void

(static) dialogTemplate(options)

The template function that returns html for the dialog. Options below are passed from constructor and described there.

Parameters:

Name Type Description

options

object

The options for the dialog.

Properties

Name	Type	Description
`alertButtonText`	string	The text for the alert button.
`cancelButtonText`	string	The text for the cancel button.
`closeButtonClasses`	string	The classes for the close button. Space seperated string.
`closeButtonAriaLabel`	string	The aria label for the close button.
`closeButtonSize`	string	The size for the close button.
`closeButtonTitle`	string	The title for the close button.
`closeButtonType`	string	The type for the close button.
`confirmButtonAttributes`	string	The attributes for the confirm button. Space seperated string.
`confirmButtonIcon`	string	The icon for the confirm button.
`confirmButtonText`	string	The text for the confirm button.
`content`	string	The content for the dialog. HTML allowed.
`id`	string	The id for the dialog.
`maskBlur`	boolean	Whether to blur the background when the dialog is open.
`maskClasses`	string	The classes for the mask. Space seperated string.
`maskTheme`	boolean	Background mask theme, `none`, `light` or `dark`.
`mode`	string	The mode for the dialog. `alert`, `confirm` or `dialog`.
`position`	string	The position for the dialog. `center`, `top` or `bottom`.
`title`	string	The title for the dialog.
`titleIcon`	string	The icon for the title.
`titleIconColor`	string	The color for the title icon.
`wrapperClasses`	string	The classes for the wrapper. Space seperated string.
`zIndex`	number	The z-index for the dialog.

Since: 1.0.6
Source: modules/Dialog/index.js, line 11

Returns:

string

Example

import { dialogTemplate } from '@gravityforms/components/html/admin/modules/Dialog';

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