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)

Source:
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
content string

HTML content
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
buttons Object.<string, DialogButton>

The buttons which are displayed as action choices for the dialog
options Object

Dialog rendering options, see :class:Application

Properties
Name Type Description
default string

The name of the default button which should be triggered on Enter
jQuery boolean

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

Source:

title :string

Source:
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(title, content, yes, no, render, defaultYes, rejectClose, options) → {Promise.<*>}

Source:

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
title string

The confirmation window title
content string

The confirmation message
yes function

Callback function upon yes
no function

Callback function upon no
render function

A function to call when the dialog is rendered
defaultYes boolean

Make "yes" the default choice?
rejectClose boolean

Reject the Promise if the Dialog is closed without making a choice.
options Object

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(title, content, label, callback, render, options) → {Promise.<*>}

Source:

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

Parameters:
Name Type Description
title string

The confirmation window title
content string

The confirmation message
label string

The confirmation button text
callback function

A callback function to fire when the button is clicked
render function

A function that fires after the dialog is rendered
options object

Additional rendering options
Returns:

A promise which resolves when clicked, or rejects if closed

Type
Promise.<*>

activateListeners(html)

Source:
Implements:

Once the HTML for an Application has been rendered, activate event listeners which provide interactivity for the application

Parameters:
Name Type Description
html jQuery

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

Source:
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}

Source:
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