Class TJSDialog

Provides a reactive dialog implementation configured from a unique dialog options object. The dialog features a bottom button bar for user selection.

A glasspane / modal option with various styling and transition capabilities is available when setting modal: true.

Most importantly the content attribute of dialog data can be a Svelte component configuration object to render your custom component as the dialog content. When using a Svelte component as the content you can assign a string to the various on<XXX> dialog callbacks and an exported function from your component will be invoked to handle the button callback. All dialog button callbacks and onClose callback receive a single argument which is the dialog / application instance.

When making a form with form validation or other dialog that you don't want to close immediately on button press you can set autoClose: false, however you are 100% in control of resolving any Promise callbacks from button presses and also closing the application. Each button can also be configured with autoClose: false in the button data.

There is a handy Promise management capability to track a single Promise for the lifetime of a dialog available at TJSDialog.managedPromise. By default when the user closes the dialog / application any managed Promise is resolved with null. The managed Promise is available in any Svelte content component by using const managedPromise = getContext('#managedPromise'). When handling any custom resolution particularly when setting autoClose: false for a given button you are 100% in control of resolving or rejecting asynchronous data to return from the dialog.

To create and wait upon a managed promise for asynchronous return results use the static or member variation of TJSDialog.wait.

Please refer to TJSDialogOptions for the various options used to construct the dialog.

There are a couple of static helper methods to quickly create standard dialogs such as a 'yes' / 'no' confirmation dialog with TJSDialog.confirm and an 'ok' single button dialog with TJSDialog.prompt.

TODO: document all extended dialog data parameters such as transition options / modal transitions.

Hierarchy (view full)

Constructors

constructor

Accessors

data elementContent elementTarget managedPromise position reactive state svelte

Methods

maximize minimize onSvelteMount onSvelteRemount wait confirm prompt wait

Constructors

constructor

Accessors

data

elementContent

  • get elementContent(): HTMLElement

  • Returns the content element if an application shell is mounted.

    Returns HTMLElement

    Content element.

elementTarget

  • get elementTarget(): HTMLElement

  • Returns the target element or main element if no target defined.

    Returns HTMLElement

    Target element.

managedPromise

position

  • get position(): TJSPosition

  • Returns the TJSPosition instance.

    Returns TJSPosition

    The TJSPosition instance.

reactive

  • get reactive(): SvelteReactive

  • Returns the reactive accessors & Svelte stores for SvelteApplication.

    Returns SvelteReactive

    The reactive accessors & Svelte stores.

state

svelte

  • get svelte(): GetSvelteData

  • Returns the Svelte helper class w/ various methods to access mounted Svelte components.

    Returns GetSvelteData

    GetSvelteData

Methods

maximize

  • maximize(opts?): Promise<void>

  • Provides a mechanism to update the UI options store for maximized.

    Note: the sanity check is duplicated from Application.maximize the store is updated before performing the rest of animations. This allows application shells to remove / show any resize handlers correctly. Extra constraint data is stored in a saved position state in SvelteApplication.minimize to animate the content area.

    Parameters

    • Optional opts: {
          animate?: boolean;
          duration?: number;
      }

      Optional parameters.

      • Optional animate?: boolean

        When true perform default maximizing animation.

      • Optional duration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

minimize

  • minimize(opts?): Promise<void>

  • Provides a mechanism to update the UI options store for minimized.

    Note: the sanity check is duplicated from Application.minimize the store is updated before performing the rest of animations. This allows application shells to remove / show any resize handlers correctly. Extra constraint data is stored in a saved position state in SvelteApplication.minimize to animate the content area.

    Parameters

    • Optional opts: {
          animate?: boolean;
          duration?: number;
      }

      Optional parameters

      • Optional animate?: boolean

        When true perform default minimizing animation.

      • Optional duration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

onSvelteMount

  • onSvelteMount(mountedAppShell?): void

  • Provides a callback after all Svelte components are initialized.

    Parameters

    Returns void

onSvelteRemount

  • onSvelteRemount(mountedAppShell?): void

  • Provides a callback after the main application shell is remounted. This may occur during HMR / hot module replacement or directly invoked from the elementRootUpdate callback passed to the application shell component context.

    Parameters

    Returns void

wait

  • wait<T>(options?): Promise<T>

  • Brings to top or renders this dialog returning a Promise that is resolved any button pressed or when the dialog is closed.

    Creates an anonymous data defined TJSDialog returning a Promise that can be awaited upon for the user to make a choice.

    Note: null is returned if the dialog is closed without a user making a choice.

    Type Parameters

    • T

    Parameters

    • Optional options: {
          reuse?: boolean;
      }

      Options.

      • Optional reuse?: boolean

        When true if there is an existing managed Promise this allows multiple sources to await on the same result.

    Returns Promise<T>

    A promise for dialog resolution.

Static confirm

  • confirm<T_1>(data?, options?): Promise<T_1>

  • A helper factory method to create simple confirmation dialog windows which consist of simple yes / no prompts. If you require more flexibility, a custom TJSDialog instance is preferred. The default focused button is 'yes'. You can change the default focused button by setting default to yes or no.

    Type Parameters

    • T_1

    Parameters

    • Optional data: TJSDialogOptions & {
          onNo?: string | ((application) => any);
          onYes?: string | ((application) => any);
      }

      Confirm dialog options.

    • Optional options: SvelteApplicationOptions

      SvelteApplication options passed to the TJSDialog constructor.

    Returns Promise<T_1>

    A promise which resolves with result of yes / no callbacks or true / false.

    Example

    const result = await TJSDialog.confirm({
     title: 'A Yes or No Question',
     content: '<p>Choose wisely.</p>',
     onYes: () => 'YES Result'
     onNo: () => 'NO Result'
    });

    // Logs 'YES result', 'NO Result', or null if the user closed the dialog without making a selection.
    console.log(result);

Static prompt

  • prompt<T_2>(data?, options?): Promise<T_2>

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

    Type Parameters

    • T_2

    Parameters

    • Optional data: TJSDialogOptions & {
          icon?: string;
          label?: string;
          onOk?: string | ((application) => any);
      }

      Prompt dialog options that includes any TJSDialog options along with the following optional fields:

    • Optional options: SvelteApplicationOptions

      SvelteApplication options passed to the TJSDialog constructor.

    Returns Promise<T_2>

    The returned value from the provided callback function or true if the button is pressed.

    Example

    const result = await TJSDialog.prompt({
     title: 'Are you OK?',
     content: '<p>Are you OK?.</p>',
     label: 'Feeling Fine!'
     onOk: () => 'OK'
    });

    // Logs 'OK' or null if the user closed the dialog without making a selection.
    console.log(result);

Static wait

  • wait<T_3>(data, options?): Promise<T_3>

  • Creates an anonymous data defined TJSDialog returning a Promise that can be awaited upon for the user to make a choice.

    Note: By default null is returned if the dialog is closed without a user making a choice.

    Type Parameters

    • T_3

    Parameters

    Returns Promise<T_3>

    A Promise that resolves to the chosen result.

Settings

Member Visibility

Theme

On This Page