Options
All
  • Public
  • Public/Protected
  • All
Menu

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

param data

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

param [options]

Dialog rendering options, see Application.

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);

Hierarchy

Index

Constructors

  • new Dialog(data: any, options: any): Dialog

Properties

data: any
options: any

The options provided to this application upon initialization

appId: number

The application ID is a unique incrementing integer which is used to identify every application window drawn by the VTT

_element: jQuery

An internal reference to the HTML element this application renders

position: any

Track the current position and dimensions of the Application UI

_dragDrop: DragDrop[]

DragDrop workflow handlers which are active for this Application

_tabs: Tabs[]

Tab navigation handlers which are active for this Application

_searchFilters: SearchFilter[]

SearchFilter handlers which are active for this Application

_minimized: boolean

Track whether the Application is currently minimized

_scrollPositions: any

Track the most recent scroll positions for any vertically scrolling containers

_state: number

The current render state of the Application

see

{Application.RENDER_STATES}

_priorState: number

The prior render state of this Application. This allows for rendering logic to understand if the application is being rendered for the first time.

see

{Application.RENDER_STATES}

#onKeyDown: ((arg0: KeyboardEvent) => any)

Type declaration

    • (arg0: KeyboardEvent): any
    • A bound instance of the _onKeyDown method which is used to listen to keypress events while the Dialog is active.

      Parameters

      • arg0: KeyboardEvent

      Returns any

RENDER_STATES: Readonly<{ CLOSING: -2; CLOSED: -1; NONE: 0; RENDERING: 1; RENDERED: 2; ERROR: 3 }> = ...

The sequence of rendering states that track the Application life-cycle.

Accessors

  • get title(): any
  • inheritdoc

    Returns any

  • get id(): string
  • Return the CSS application ID which uniquely references this UI element

    Returns string

  • get element(): jQuery
  • Return the active application element, if it currently exists in the DOM

    Returns jQuery

  • get template(): string
  • The path to the HTML template file which should be used to render the inner content of the app

    Returns string

  • get popOut(): boolean
  • Control the rendering style of the application. If popOut is true, the application is rendered in its own wrapper window, otherwise only the inner app content is rendered

    Returns boolean

  • get rendered(): boolean
  • Return a flag for whether the Application instance is currently rendered

    Returns boolean

Methods

  • getData(options: any): { content: any; buttons: {} }
  • 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

    Parameters

    • options: any

    Returns { content: any; buttons: {} }

    • content: any
    • buttons: {}
    • activateListeners(html: any): void
    • 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

      • html: any

      Returns void

    • _renderOuter(): Promise<jQuery>
    • Render the outer application wrapper

      Returns Promise<jQuery>

      A promise resolving to the constructed jQuery object

    • close(options?: {}): Promise<void>
    • 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

      Parameters

      • options: {} = {}

        Returns Promise<void>

        A Promise which resolves once the application is closed

      • render(force?: boolean, options?: { left: number; top: number; width: number; height: number; scale: number; focus: boolean; renderContext: string; renderData: any }): Application
      • Render the Application by evaluating it's HTML template against the object of data provided by the getData method If the Application is rendered as a pop-out window, wrap the contained HTML in an outer frame with window controls

        Parameters

        • force: boolean = false

          Add the rendered application to the DOM if it is not already present. If false, the Application will only be re-rendered if it is already present.

        • options: { left: number; top: number; width: number; height: number; scale: number; focus: boolean; renderContext: string; renderData: any } = {}

          Additional rendering options which are applied to customize the way that the Application is rendered in the DOM.

          • left: number
          • top: number
          • width: number
          • height: number
          • scale: number
          • focus: boolean
          • renderContext: string
          • renderData: any

        Returns Application

        The rendered Application instance

      • activateTab(tabName: string, options?: { group: string; triggerCallback: boolean }): void
      • Change the currently active tab

        Parameters

        • tabName: string

          The target tab name to switch to

        • options: { group: string; triggerCallback: boolean } = {}

          Options which configure changing the tab

          • group: string

            A specific named tab group, useful if multiple sets of tabs are present

          • triggerCallback: boolean

            Whether to trigger tab-change callback functions

        Returns void

      • bringToTop(): void
      • Bring the application to the top of the rendering stack

        Returns void

      • minimize(): Promise<void>
      • Minimize the pop-out window, collapsing it to a small tab Take no action for applications which are not of the pop-out variety or apps which are already minimized

        Returns Promise<void>

        A Promise which resolves once the minimization action has completed

      • maximize(): Promise<void>
      • Maximize the pop-out window, expanding it to its original size Take no action for applications which are not of the pop-out variety or are already maximized

        Returns Promise<void>

        A Promise which resolves once the maximization action has completed

      • setPosition(position?: { left: number; top: number; width: number; height: string | number; scale: number }): void | { left: number; top: number; width: number; height: number; scale: number }
      • Set the application position and store its new location. Returns the updated position object for the application containing the new values.

        Parameters

        • position: { left: number; top: number; width: number; height: string | number; scale: number } = {}

          Positional data

          • left: number

            The left offset position in pixels

          • top: number

            The top offset position in pixels

          • width: number

            The application width in pixels

          • height: string | number

            The application height in pixels

          • scale: number

            The application scale as a numeric factor where 1.0 is default

        Returns void | { left: number; top: number; width: number; height: number; scale: number }

        |void}

      • _render(force?: boolean, options?: any): Promise<void>
      • An asynchronous inner function which handles the rendering of the Application

        Parameters

        • force: boolean = false

          Render and display the application even if it is not currently displayed.

        • options: any = {}

          Additional options which update the current values of the Application#options object

        Returns Promise<void>

        A Promise that resolves to the Application once rendering is complete

      • _saveScrollPositions(html: jQuery): void
      • Persist the scroll positions of containers within the app before re-rendering the content

        Parameters

        • html: jQuery

          The HTML object being traversed

        Returns void

      • _restoreScrollPositions(html: jQuery): void
      • Restore the scroll positions of containers within the app after re-rendering the content

        Parameters

        • html: jQuery

          The HTML object being traversed

        Returns void

      • _activateCoreListeners(html: jQuery): void
      • Activate required listeners which must be enabled on every Application. These are internal interactions which should not be overridden by downstream subclasses.

        Parameters

        • html: jQuery

        Returns void

      • _onChangeTab(event: MouseEvent, tabs: Tabs, active: string): void
      • Handle changes to the active tab in a configured Tabs controller

        Parameters

        • event: MouseEvent

          A left click event

        • tabs: Tabs

          The Tabs controller

        • active: string

          The new active tab name

        Returns void

      • _onSearchFilter(event: KeyboardEvent, query: string, rgx: RegExp, html: HTMLElement): void
      • Handle changes to search filtering controllers which are bound to the Application

        Parameters

        • event: KeyboardEvent

          The key-up event from keyboard input

        • query: string

          The raw string input to the search field

        • rgx: RegExp

          The regular expression to test against

        • html: HTMLElement

          The HTML element which should be filtered

        Returns void

      • _canDragStart(selector: string): boolean
      • Define whether a user is able to begin a dragstart workflow for a given drag selector

        Parameters

        • selector: string

          The candidate HTML selector for dragging

        Returns boolean

        Can the current user drag this selector?

      • _canDragDrop(selector: string): boolean
      • Define whether a user is able to conclude a drag-and-drop workflow for a given drop selector

        Parameters

        • selector: string

          The candidate HTML selector for the drop target

        Returns boolean

        Can the current user drop on this selector?

      • _onDragStart(event: DragEvent): void
      • Callback actions which occur at the beginning of a drag start workflow.

        Parameters

        • event: DragEvent

          The originating DragEvent

        Returns void

      • _onDragOver(event: DragEvent): void
      • Callback actions which occur when a dragged element is over a drop target.

        Parameters

        • event: DragEvent

          The originating DragEvent

        Returns void

      • _onDrop(event: DragEvent): void
      • Callback actions which occur when a dragged element is dropped on a target.

        Parameters

        • event: DragEvent

          The originating DragEvent

        Returns void

      • _onClickButton(event: MouseEvent): void
      • Handle a left-mouse click on one of the dialog choice buttons

        Parameters

        • event: MouseEvent

          The left-mouse click event

        Returns void

      • _onKeyDown(event: KeyboardEvent): void | Promise<void>
      • Handle a keydown event while the dialog is active

        Parameters

        • event: KeyboardEvent

          The keydown event

        Returns void | Promise<void>

      • submit(button: any, event: PointerEvent): void
      • Submit the Dialog by selecting one of its buttons

        Parameters

        • button: any

          The configuration of the chosen button

        • event: PointerEvent

          The originating click event

        Returns void

      • 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

        Prompt the user with a yes or no question

        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

        • config: DialogData = {}

          Confirmation dialog configuration

        Returns Promise<any>

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

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

        Parameters

        • config: DialogData = {}

          Dialog configuration options

        Returns Promise<any>

        The returned value from the provided callback function, if any

      • Wrap the Dialog with an enclosing Promise which resolves or rejects when the client makes a choice.

        Parameters

        Returns Promise<any>

        A Promise that resolves to the chosen result.