Dialog

Dialog

Create a dialog window displaying a title, a message, and a set of buttons which trigger callback functions.

Constructor

new Dialog(data, options)

Implements:
Example

Constructing a custom dialog instance

let d = new Dialog({
 title: "Test Dialog",
 content: "<p>You must choose either Option 1, or Option 2</p>",
 buttons: {
  one: {
   icon: '<i class="fas fa-check"></i>',
   label: "Option One",
   callback: () => console.log("Chose One")
  },
  two: {
   icon: '<i class="fas fa-times"></i>',
   label: "Option Two",
   callback: () => console.log("Chose Two")
  }
 },
 default: "two",
 render: html => console.log("Register interactivity in the rendered dialog"),
 close: html => console.log("This always is logged no matter which option is chosen")
});
d.render(true);
Parameters:
Name Type Description
data Object

An object of dialog data which configures how the modal window is rendered

Properties
Name Type Attributes Description
title string

The window title displayed in the dialog header
content string

HTML content for the dialog form
buttons Object.<string, DialogButton>

The buttons which are displayed as action choices for the dialog
default string <optional>

The name of the default button which should be triggered on Enter keypress
render function <optional>

A callback function invoked when the dialog is rendered
close function <optional>

Common callback operations to perform when the dialog is closed
options Object

Dialog rendering options, see :class:Application

Properties
Name Type Attributes Description
jQuery boolean <optional>

Whether to provide jQuery objects to callback functions (if true) or plain HTMLElement instances (if false). This is currently true by default but in the future will become false by default.

Members

(static) defaultOptions

title :string

Implements:

An Application window should define its own title definition logic which may be dynamic depending on its data

Type:
  • string

Methods

(async, static) confirm(config) → {Promise.<*>}

A helper factory method to create simple confirmation dialog windows which consist of simple yes/no prompts. If you require more flexibility, a custom Dialog instance is preferred.

Example
let d = Dialog.confirm({
 title: "A Yes or No Question",
 content: "<p>Choose wisely.</p>",
 yes: () => console.log("You chose ... wisely"),
 no: () => console.log("You chose ... poorly"),
 defaultYes: false
});
Parameters:
Name Type Description
config object

Confirmation dialog configuration

Properties
Name Type Attributes Default Description
title string

The confirmation window title
content string

The confirmation message
yes function <optional>

Callback function upon yes
no function <optional>

Callback function upon no
render function <optional>

A function to call when the dialog is rendered
defaultYes boolean <optional>
 true

Make "yes" the default choice?
rejectClose boolean <optional>
 false

Reject the Promise if the Dialog is closed without making a choice.
options Object <optional>
 {}

Additional rendering options passed to the Dialog
Returns:

A promise which resolves once the user makes a choice or closes the window

Type
Promise.<*>

(async, static) prompt(config) → {Promise.<*>}

A helper factory method to display a basic "prompt" style Dialog with a single button

Parameters:
Name Type Description
config object

Dialog configuration options

Properties
Name Type Attributes Default Description
title string <optional>

The confirmation window title
content string <optional>

The confirmation message
label string <optional>

The confirmation button text
callback function <optional>

A callback function to fire when the button is clicked
render function <optional>

A function that fires after the dialog is rendered
rejectClose boolean <optional>
 true

Reject the promise if the dialog is closed without confirming the choice, otherwise resolve as null
options object <optional>

Additional rendering options
Returns:

The returned value from the provided callback function, if any

Type
Promise.<*>

activateListeners(html)

Implements:

After rendering, activate event listeners which provide interactivity for the Application. This is where user-defined Application subclasses should attach their event-handling logic.

Parameters:
Name Type Description
html jQuery

(async) close() → {Promise.<void>}

Implements:

Close the application and un-register references to it within UI mappings This function returns a Promise which resolves once the window closing animation concludes

Returns:

A Promise which resolves once the application is closed

Type
Promise.<void>

getData() → {Object|Promise}

Implements:

An application should define the data object used to render its template. This function may either return an Object directly, or a Promise which resolves to an Object If undefined, the default implementation will return an empty object allowing only for rendering of static HTML

Returns:
Type
Object | Promise