Class TJSDocumentImport

Provides a reactive dialog for importing documents that by default is modal and not draggable. An additional set of accessors for the document assigned are available via the this.reactive.document. You may swap out the document at any time by setting it to a different document.

Hierarchy

Accessors

closing data element elementContent elementTarget id managedPromise popOut position reactive rendered state svelte template title defaultOptions

Methods

_activateCoreListeners _canDragDrop _canDragStart _createDragDropHandlers _createTabHandlers _getHeaderButtons _injectHTML _onChangeTab _onDragOver _onDragStart _onDrop _onResize _onSearchFilter _onToggleMinimize _render _renderInner _renderOuter _replaceHTML _restoreScrollPositions _saveScrollPositions activateListeners activateTab bringToTop close getData maximize minimize onSvelteMount onSvelteRemount render wait confirm prompt show wait

Properties

_dragDrop _element _minimized _priorState _scrollPositions _searchFilters _state _tabs appId options RENDER_STATES

Accessors

closing

  • get closing(): boolean

  • Whether the Application is currently closing.

    Returns boolean

data

element

  • get element(): JQuery

  • Return the active application element, if it currently exists in the DOM

    Returns JQuery

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.

id

  • get id(): string

  • Return the CSS application ID which uniquely references this UI element

    Returns string

managedPromise

popOut

  • 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

position

  • get position(): TJSPosition

  • Returns the TJSPosition instance.

    Returns TJSPosition

    The TJSPosition instance.

reactive

  • get reactive(): SvelteApp.API.Reactive

  • Returns the reactive accessors & Svelte stores for SvelteApp.

    Returns SvelteApp.API.Reactive

    The reactive accessors & Svelte stores.

rendered

  • get rendered(): boolean

  • Return a flag for whether the Application instance is currently rendered

    Returns boolean

state

svelte

  • get svelte(): Svelte<Options>

  • Returns the Svelte helper class w/ various methods to access the mounted application shell component.

    Returns Svelte<Options>

    Svelte / mounted application shell API.

template

  • get template(): string

  • The path to the HTML template file which should be used to render the inner content of the app

    Returns string

title

  • get title(): string

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

    Returns string

StaticdefaultOptions

Methods

Protected_activateCoreListeners

  • _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

Protected_canDragDrop

  • _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?

Protected_canDragStart

  • _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?

Protected_createDragDropHandlers

  • _createDragDropHandlers(): DragDrop[]

  • Create drag-and-drop workflow handlers for this Application

    Returns DragDrop[]

    An array of DragDrop handlers

Protected_createTabHandlers

  • _createTabHandlers(): Tabs[]

  • Create tabbed navigation handlers for this Application

    Returns Tabs[]

    An array of Tabs handlers

Protected_getHeaderButtons

  • _getHeaderButtons(): HeaderButton[]
  • Protected

    Specify the set of config buttons which should appear in the SvelteApp header. Buttons should be returned as an Array of objects. The header buttons which are added to the application can be modified by the getApplicationHeaderButtons hook.

    SvelteApp extends the button functionality with full reactivity for state changes during callbacks. Callbacks receive the button data and can modify it to update the button state.

    Returns HeaderButton[]

    All header buttons.

Protected_injectHTML

  • _injectHTML(html: JQuery): void

  • Customize how a new HTML Application is added and first appears in the DOC

    Parameters

    • html: JQuery

    Returns void

Protected_onChangeTab

  • _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 TabsV2 controller

    • active: string

      The new active tab name

    Returns void

Protected_onDragOver

  • _onDragOver(event: DragEvent): void

  • Callback actions which occur when a dragged element is over a drop target.

    Parameters

    Returns void

Protected_onDragStart

  • _onDragStart(event: DragEvent): void

  • Callback actions which occur at the beginning of a drag start workflow.

    Parameters

    Returns void

Protected_onDrop

  • _onDrop(event: DragEvent): void

  • Callback actions which occur when a dragged element is dropped on a target.

    Parameters

    Returns void

Protected_onResize

  • _onResize(event: any): void

  • Additional actions to take when the application window is resized

    Parameters

    • event: any

    Returns void

Protected_onSearchFilter

  • _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

Protected_onToggleMinimize

  • _onToggleMinimize(ev: any): void

  • Handle application minimization behavior - collapsing content and reducing the size of the header

    Parameters

    • ev: any

    Returns void

Protected_render

  • _render(force?: boolean, options?: RenderOptions): Promise<void>

  • An asynchronous inner function which handles the rendering of the Application

    Parameters

    • Optionalforce: boolean

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

    • Optionaloptions: RenderOptions

      Provided rendering options, see the render function for details

    Returns Promise<void>

    A Promise that resolves to the Application once rendering is complete

Protected_renderInner

  • _renderInner(data: object, options: RenderOptions): Promise<JQuery>

  • Render the inner application content

    Parameters

    • data: object

      The data used to render the inner template

    • options: RenderOptions

    Returns Promise<JQuery>

    A promise resolving to the constructed jQuery object

Protected_renderOuter

  • _renderOuter(options: RenderOptions): Promise<JQuery>

  • Render the outer application wrapper

    Parameters

    • options: RenderOptions

    Returns Promise<JQuery>

    A promise resolving to the constructed jQuery object

Protected_replaceHTML

  • _replaceHTML(element: JQuery, html: any, options: Record<string, unknown>): void

  • Customize how inner HTML is replaced when the application is refreshed

    Parameters

    • element: JQuery

      The original HTML element

    • html: any

      New updated HTML

    • options: Record<string, unknown>

    Returns void

Protected_restoreScrollPositions

  • _restoreScrollPositions(html: any): void

  • Restore the scroll positions of containers within the app after re-rendering the content

    Parameters

    • html: any

    Returns void

Protected_saveScrollPositions

  • _saveScrollPositions(html: any): void

  • Persist the scroll positions of containers within the app before re-rendering the content

    Parameters

    • html: any

    Returns void

activateListeners

  • activateListeners(html: JQuery): 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: JQuery

    Returns void

activateTab

  • activateTab(
        tabName: string,
        options?: { group?: string; triggerCallback?: boolean },
    ): void

  • Change the currently active tab

    Parameters

    • tabName: string
    • Optionaloptions: { group?: string; triggerCallback?: boolean }

    Returns void

bringToTop

  • bringToTop(): void

  • Bring the application to the top of the rendering stack

    Returns void

close

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

    • Optionaloptions: { force?: boolean }

      Options which affect how the Application is closed

    Returns Promise<void>

    A Promise which resolves once the application is closed

    Fires

    closeApplication

getData

  • getData(options?: Partial<ApplicationOptions>): object | Promise<object>

  • 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

    Returns object | Promise<object>

maximize

  • maximize(opts?: { animate?: boolean; duration?: number }): 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 SvelteApp.minimize to animate the content area.

    Parameters

    • Optionalopts: { animate?: boolean; duration?: number }

      Optional parameters.

      • Optionalanimate?: boolean

        When true perform default maximizing animation.

      • Optionalduration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

minimize

  • minimize(opts?: { animate?: boolean; duration?: number }): 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 SvelteApp.minimize to animate the content area.

    Parameters

    • Optionalopts: { animate?: boolean; duration?: number }

      Optional parameters.

      • Optionalanimate?: boolean

        When true perform default minimizing animation.

      • Optionalduration?: number

        Controls content area animation duration in seconds.

    Returns Promise<void>

onSvelteMount

  • onSvelteMount(): void

  • Provides a callback after all Svelte components are initialized.

    Returns void

onSvelteRemount

  • onSvelteRemount(): 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.

    Returns void

render

  • render(force?: boolean, options?: RenderOptions): this

  • 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

    • Optionalforce: boolean

      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.

    • Optionaloptions: RenderOptions

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

    Returns this

    The rendered Application instance

wait

  • wait<T>(options?: { reuse?: boolean }): 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

    • Optionaloptions: { reuse?: boolean }

      Options.

      • Optionalreuse?: 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.

Staticconfirm

  • confirm<T>(
        data?: OptionsData & {
            onNo?: string | (data?: { application?: TJSDialog }) => any;
            onYes?: string | (data?: { application?: TJSDialog }) => any;
        },
        options?: OptionsCore,
    ): Promise<T>

  • 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

    Parameters

    • Optionaldata: OptionsData & {
          onNo?: string | (data?: { application?: TJSDialog }) => any;
          onYes?: string | (data?: { application?: TJSDialog }) => any;
      }

      Confirm dialog options.

      • OptionalonNo?: string | (data?: { application?: TJSDialog }) => any

        Callback function upon no; may be an async function. When defined as a string any matching function by name exported from content Svelte component is invoked.

      • OptionalonYes?: string | (data?: { application?: TJSDialog }) => any

        Callback function upon yes; may be an async function. When defined as a string any matching function by name exported from content Svelte component is invoked.

    • Optionaloptions: OptionsCore

      SvelteApp options passed to the TJSDialog constructor.

    Returns Promise<T>

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

Staticprompt

  • prompt<T>(
        data?: OptionsData & {
            icon?: string;
            label?: string;
            onOk?: string | (data?: { application?: TJSDialog }) => any;
        },
        options?: OptionsCore,
    ): Promise<T>

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

    Type Parameters

    • T

    Parameters

    • Optionaldata: OptionsData & {
          icon?: string;
          label?: string;
          onOk?: string | (data?: { application?: TJSDialog }) => any;
      }

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

      • Optionalicon?: string

        Set another icon besides fas fa-check for button.

      • Optionallabel?: string

        The OK prompt button text.

      • OptionalonOk?: string | (data?: { application?: TJSDialog }) => any

        Callback function upon ok; may be an async function. When defined as a string any matching function by name exported from content Svelte component is invoked.

    • Optionaloptions: OptionsCore

      SvelteApp options passed to the TJSDialog constructor.

    Returns Promise<T>

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

Staticshow

  • show<D extends Document>(
        document: D,
        options?: OptionsCore,
        dialogData?: OptionsData,
    ): Promise<false | D>

  • Render an import dialog for updating the data related to this Document through an exported JSON file

    Type Parameters

    Parameters

    • document: D

      The document to import JSON to...

    • Optionaloptions: OptionsCore

      Options to pass to TJSDialog / SvelteApp.

    • OptionaldialogData: OptionsData

      Optional data to modify dialog.

    Returns Promise<false | D>

    The document after import completes or a falsy value; either 'false' for cancelling or 'null' if the user closed the dialog via <Esc> or the close header button.

Staticwait

  • wait<T>(data: OptionsData, options?: OptionsCore): Promise<T>

  • 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

    Parameters

    • data: OptionsData

      Dialog data passed to the TJSDialog constructor.

    • Optionaloptions: OptionsCore

      SvelteApp options passed to the TJSDialog constructor.

    Returns Promise<T>

    A Promise that resolves to the chosen result.

Properties

Protected_dragDrop

_dragDrop: DragDrop[]

DragDrop workflow handlers which are active for this Application

Protected_element

_element: JQuery

An internal reference to the HTML element this application renders

_minimized

_minimized: boolean

Track whether the Application is currently minimized

_priorState

_priorState: ApplicationRenderState

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

Protected_scrollPositions

_scrollPositions: Record<string, unknown>

Track the most recent scroll positions for any vertically scrolling containers

Protected_searchFilters

_searchFilters: SearchFilter[]

SearchFilter handlers which are active for this Application

_state

_state: ApplicationRenderState

Track the render state of the Application

See

Protected_tabs

_tabs: Tabs[]

Tab navigation handlers which are active for this Application

appId

appId: number

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

options

options: SvelteApp.Options

The options provided to this application upon initialization

Static ReadonlyRENDER_STATES

RENDER_STATES: {
    CLOSED: -1;
    CLOSING: -2;
    ERROR: 3;
    NONE: 0;
    RENDERED: 2;
    RENDERING: 1;
}

Settings

Member Visibility

On This Page

Accessors
Methods
Properties