User Interface Elements

Mod developers may wish to re-use standard user interface elements, referred to as Applications. This page details the existing application classes which can easily be extended to create an interactive interface element within the DOM.

Dialog Window

The Dialog() class provides an extension of WindowApplication() which makes it easy to create modal dialog prompts.

class Dialog(dialogData)

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

Arguments:
  • dialogData (Object) – An object of dialog data which configures how the modal window is rendered
  • dialogData.title (String) – The window title
  • dialogData.content (String) – HTML content
  • dialogData.close (function) – Common callback operations to perform when the dialog is closed
  • dialogData.buttons (Object) – Action buttons which trigger callback functions. Buttons are defined as an Object with the format {name: buttonData}. Valid keys for buttonData include:
  • dialogData.buttons.button.icon (String) – A button icon
  • dialogData.buttons.button.label (String) – A button label
  • dialogData.buttons.button.callback (function) – A callback function taking no arguments

Examples:

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")
  }
 }
}
d.render(true);
Dialog.Application.render(force=true)

Render the Application. If the application is already present in the DOM it will be refreshed. If it is not yet added to the DOM it will only be rendered if rendering is forced.

Arguments:
  • force (Boolean) – Add the application to the DOM before rendering, if it does not already exist

Tabbed Navigation

To make effective use of screen space, it often makes sense to sibling concepts into a tabbed navigation area. The Tabs() class helps to implement this easily. Simply create instances of the Tabs() class when you register event listeners for your UI element and the instance will do the rest of the work for you.

class Tabs(tabs)

A helper class for creating tabbed containers. Create one Tabs instance per tabbed navigation container in your application.

Arguments:
  • tabs (HTMLElement|JQuery) – An HTML element or JQuery object representing the tab navigation container.

Examples:

<!-- Example HTML -->
<ol class="tabs">
 <li class="tab" data-tab="tab1">Tab 1</li>
 <li class="tab" data-tab="tab2">Tab 2</li>
</ol>

<div class="content" data-tab="tab1">Content 1</div>
<div class="content" data-tab="tab2">Content 2</div>
// JavaScript Listener
let nav = $('.tabs');
let tabs = new Tabs(nav, "tab1", t => console.log("Tab ${t} was clicked");
Tabs.activateTab(tab)

Activate a tab by it’s name. This gets called automatically when a tab in the navigation is clicked, however you may also call this function directly.

Arguments:
  • tab (String) – The name of the tab to activate