Options
All
  • Public
  • Public/Protected
  • All
Menu

The sidebar directory which organizes and displays world-level Playlist documents.

Hierarchy

Index

Constructors

Properties

_expanded: Set<string>

Track the playlist IDs which are currently expanded in their display

_playingPlaylists: Playlist[]

Cache the set of Playlist documents that are displayed as playing when the directory is rendered

_playingSounds: PlaylistSound[]

Cache the set of PlaylistSound documents that are displayed as playing when the directory is rendered

_playingSoundsData: any[]
documents: Document[]

References to the set of Documents which are displayed in the Sidebar

folders: Folder[]

Reference the set of Folders which exist in this Sidebar

tree: any
tabName: string

The base name of this sidebar tab

_original: SidebarTab

Denote whether this is the original version of the sidebar tab, or a pop-out variant

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

_popout: SidebarTab

A reference to the pop-out variant of this SidebarTab, if one exists

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

documentName: string = "Playlist"
override
documentPartial: string = "templates/sidebar/playlist-partial.html"
override
folderPartial: string = "templates/sidebar/folder-partial.html"

The path to the template partial which renders a single Folder within this directory

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

  • Return an Array of the Playlist documents which are currently playing

    Returns Playlist[]

  • get id(): string
  • override

    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

  • get title(): string
  • An Application window should define its own title definition logic which may be dynamic depending on its data

    Returns string

  • get _playingLocation(): string
  • Whether the 'currently playing' element is pinned to the top or bottom of the display.

    Returns string

  • The WorldCollection instance which this Sidebar Directory displays.

    Returns WorldCollection

Methods

  • getData(options: any): Promise<any>
  • activateListeners(html: any): void
  • collapseAll(): void
  • _onPlayingPin(): Promise<any>
  • Returns Promise<any>

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

    Parameters

    • event: any

      The key-up event from keyboard input

    • query: any

      The raw string input to the search field

    • rgx: any

      The regular expression to test against

    • html: any

      The HTML element which should be filtered

    Returns void

  • _contextMenu(html: any): void
  • _getFolderContextOptions(): any[]
  • Get the set of ContextMenu options which should be used for Folders in a SidebarDirectory

    Returns any[]

    The Array of context options passed to the ContextMenu instance

  • _getEntryContextOptions(): any[]
  • Get the set of ContextMenu options which should be used for Documents in a SidebarDirectory

    Returns any[]

    The Array of context options passed to the ContextMenu instance

  • _onDragStart(event: any): void
  • _onDrop(event: any): Promise<any>
  • initialize(): void
  • Initialize the content of the directory by categorizing folders and documents into a hierarchical tree structure.

    Returns void

  • _renderInner(data: any): Promise<jQuery>
  • _canDragStart(selector: any): boolean
  • _onDragHighlight(event: DragEvent): void
  • Highlight folders as drop targets when a drag event enters or exits their area

    Parameters

    • event: DragEvent

      The DragEvent which is in progress

    Returns void

  • activate(): void
  • close(options: any): Promise<void>
  • Create a second instance of this SidebarTab class which represents a singleton popped-out container

    Returns SidebarTab

    The popped out sidebar tab instance

  • renderPopout(): void
  • _onLazyLoadImage(entries: HTMLElement[], observer: IntersectionObserver): void
  • Handle lazy loading for sidebar images to only load them once they become observed

    Parameters

    • entries: HTMLElement[]

      The entries which are now observed

    • observer: IntersectionObserver

      The intersection observer instance

    Returns void

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

  • _onClickDocumentName(event: Event): any
  • _onCreateDocument(event: MouseEvent): Promise<any>
  • Handle new Document creation request

    Parameters

    • event: MouseEvent

      The originating button click event

    Returns Promise<any>

  • _onCreateFolder(event: MouseEvent): void
  • Create a new Folder in this SidebarDirectory

    Parameters

    • event: MouseEvent

      The originating button click event

    Returns void

  • _toggleFolder(event: MouseEvent): void
  • Handle toggling the collapsed or expanded state of a folder within the directory tab

    Parameters

    • event: MouseEvent

      The originating click event

    Returns void

  • _handleDroppedDocument(target: HTMLElement, data: any): Promise<any>
  • Handle Document data being dropped into the directory.

    Parameters

    • target: HTMLElement

      The target element

    • data: any

      The data being dropped

    Returns Promise<any>

  • _handleDroppedFolder(target: HTMLElement, data: any): Promise<any>
  • Handle Folder data being dropped into the directory.

    Parameters

    • target: HTMLElement

      The target element

    • data: any

      The data being dropped

    Returns Promise<any>

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

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

    Returns Promise<jQuery>

    A promise resolving to the constructed jQuery object

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

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

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

  • _createExpandedSet(): Set<string>
  • Initialize the set of Playlists which should be displayed in an expanded form

    Returns Set<string>

  • _prepareTreeData(node: any): void
  • Augment the tree directory structure with playlist-level data objects for rendering

    Parameters

    • node: any

      The tree leaf node being prepared

    Returns void

  • _preparePlaylistData(playlist: Playlist): any
  • Create an object of rendering data for each Playlist document being displayed

    Parameters

    • playlist: Playlist

      The playlist to display

    Returns any

    The data for rendering

  • Get the icon used to represent the "play/stop" icon for the PlaylistSound

    Parameters

    Returns string

    The icon that should be used

  • Get the icon used to represent the pause/loading icon for the PlaylistSound

    Parameters

    Returns string

    The icon that should be used

  • _getModeIcon(mode: number): string
  • Given a constant playback mode, provide the FontAwesome icon used to display it

    Parameters

    • mode: number

    Returns string

  • _getModeTooltip(mode: number): string
  • Given a constant playback mode, provide the string tooltip used to describe it

    Parameters

    • mode: number

    Returns string

  • _onGlobalVolume(event: MouseEvent): Promise<any>
  • Handle global volume change for the playlist sidebar

    Parameters

    • event: MouseEvent

      The initial click event

    Returns Promise<any>

  • _onPlaylistCollapse(event: MouseEvent): void
  • Handle Playlist collapse toggle

    Parameters

    • event: MouseEvent

      The initial click event

    Returns void

  • _onVolumeCollapse(event: MouseEvent): void
  • Handle global volume control collapse toggle

    Parameters

    • event: MouseEvent

      The initial click event

    Returns void

  • _collapse(el: any, collapse: any, speed?: number): void
  • Helper method to render the expansion or collapse of playlists

    Parameters

    • el: any
    • collapse: any
    • speed: number = 250

    Returns void

  • _onPlaylistPlay(event: MouseEvent, playing: boolean): any
  • Handle Playlist playback state changes

    Parameters

    • event: MouseEvent

      The initial click event

    • playing: boolean

      Is the playlist now playing?

    Returns any

  • _onPlaylistSkip(event: MouseEvent, action: string): any
  • Handle advancing the playlist to the next (or previous) sound

    Parameters

    • event: MouseEvent

      The initial click event

    • action: string

      The control action requested

    Returns any

  • _onPlaylistToggleMode(event: MouseEvent): any
  • Handle cycling the playback mode for a Playlist

    Parameters

    • event: MouseEvent

      The initial click event

    Returns any

  • _onSoundCreate(event: MouseEvent): void
  • Handle Playlist track addition request

    Parameters

    • event: MouseEvent

      The initial click event

    Returns void

  • _onSoundPlay(event: MouseEvent, action: string): any
  • Modify the playback state of a Sound within a Playlist

    Parameters

    • event: MouseEvent

      The initial click event

    • action: string

      The sound control action performed

    Returns any

  • _onSoundVolume(event: Event): void
  • Handle volume adjustments to sounds within a Playlist

    Parameters

    • event: Event

      The initial change event

    Returns void

  • _onSoundToggleMode(event: Event): any
  • Handle changes to the sound playback mode

    Parameters

    • event: Event

      The initial click event

    Returns any

  • _updateTimestamps(): void
  • Update the displayed timestamps for all currently playing audio sources. Runs on an interval every 1000ms.

    Returns void

  • _formatTimestamp(seconds: number): string
  • Format the displayed timestamp given a number of seconds as input

    Parameters

    • seconds: number

      The current playback time in seconds

    Returns string

    The formatted timestamp

  • _getSoundContextOptions(): any
  • Get context menu options for individual sound effects

    Returns any

    The context options for each sound

  • setupFolders(folders: Folder[], documents: Document[]): any
  • Given a Document type and a list of Document instances, set up the Folder tree

    Parameters

    • folders: Folder[]

      The Array of Folder objects to organize

    • documents: Document[]

      The Array of Document objects to organize

    Returns any

    A tree structure containing the folders and documents