Modal

Introduction

Modals are popup windows that let users input information into a form.

A URL modal

API

Constructor

let modal = new Modal();

Functions

modal.createForm(): void

Creates a form section in the modal.

Modals are currently limited to one form only.

modal.submitForm(): void

Validates, processes, and submits the form.

This triggers the onSubmit callback.

modal.cancelForm(): void

Revert the form and close the modal.

modal.alignForm(): void

Line up all form labels.

The form labels are set to the left and the inputs are set to the right.

modal.unalignForm(): void

Set each form label on its own line.

modal.addEntry(label: String, type?: "text" | "color", validation?: "number" | "required"): EntryObj

Add an input entry to the form.

label: The label to be shown next to the input.

type (optional): 'text' or 'color'. The type of input.

validation (optional): 'number' or 'required'. Check if the entry contains a valid value.

modal.setSize(width: Number, height: Number): void

Sets the fixed size of the modal.

Any overflown content will be hidden.

Setting either dimension to zero will reset that dimension.

modal.setMinimumSize(width: Number, height: Number): void

Sets the minimum size of the modal.

The modal cannot be smaller than this size.

Setting either dimension to zero will reset that dimension.

modal.setMaximumSize(width: Number, height: Number): void

Sets the maximum size of the modal.

The modal cannot be bigger than this size. Overflown content will be hidden.

Setting either dimension to zero will reset that dimension.

modal.setFormTitle(title: String, opts?: { bold?: Boolean, center?: Boolean }): void

Set a title or description at the top of the modal.

modal.setFooter(): void

Add a footer to the bottom of the modal.

The footer is split into three parts (left, center, right).

modal.removeFooter(): void

Removes the footer from the modal.

modal.setFooterCheckbox(labelName: String, callback: Function<any>, defaultState: Boolean): void

Adds a checkbox to the left section of the footer.

labelName: name of the checkbox.

callback: to be called when the checkbox is checked (parameter: checked)

modal.setFooterContentLeft(data: HTMLElement): void

Adds content to a section of the footer.

modal.setFooterContentCenter(data: HTMLElement): void

Adds content to a section of the footer.

modal.setFooterContentRight(data: HTMLElement): void

Adds content to a section of the footer.

modal.removeFooterContentLeft(): void

Clears a section of the footer.

modal.removeFooterContentCenter(): void

Clears a section of the footer.

modal.removeFooterContentRight(): void

Clears a section of the footer.

modal.onSubmit(callback: Function<any>): void

Set event callback.

This will be called whenever the form is submitted.

modal.onOpen(callback: Function<any>): void

Set event callback.

This will be called whenever the form is opened.

modal.onClose(callback: Function<any>): void

Set event callback.

This will be called whenever the form is closed.

modal.onTabChange(callback: Function<any>): void

Set event callback.

This will be called whenever the tab is changed.

modal.checkboxFieldOnInput(callback: Function<any>): void

Set event callback.

This will be called whenever a checkbox is checked or unchecked.

modal.open(...params?: any): void

Display the modal.

All parameters will be passed to the onOpen event.

modal.close(canceled?: Boolean): void

Hide the modal.

canceled: This modal has closed as a result of form cancelation. This will revert the values of the form inputs.

modal.createCheckboxField(): void

Add a checkbox section to the modal.

The checkbox section contains a nestable list of checkbox inputs.

Only one checkbox field is currently supported.

modal.addCheckbox(label: String, parent?: CheckboxObj): CheckboxObj

Adds a checkbox to the checkbox field.

label: The name of the checkbox.

parent (optional): The parent checkbox. Nested checkboxes will be indented.

modal.addTab(id: Number, title: String): void

Insert a new tab to the modal along with a new client area.

If no tab exists, the current client area becomes part of the first tab.

modal.focusTab(id: Number): void

Make the tab the current visible tab.

modal.getCurrentTabId(): Number | null

If there are any defined tabs, return the ID of the currently active tab.

modal.hideTab(id: Number): void

Hide tab from the tab bar. This will not bring you to the next available tab.

modal.showTab(id: Number): void

Show tab on the tab bar.

modal.getTabData(id: Number): TabContext | null

Return raw tab data.

modal.append(elm: HTMLElement): void

Insert content to the modal.

modal.createClose(): void

Adds a close caption to the bottom right of the modal.

Interfaces

CheckboxObj

Object {
    elm: HTMLLabelElement,
    cbElm: Function,
    children: Array<CheckboxObj>
}

EntryObj

Object {
    input: HTMLInputElement
}

FormInputObj

Object {
    input: HTMLInputElement,
	value: String,
	validation: "number" | "required",
	validationFailed: Boolean,
	type: "text" | "color",
	label: HTMLLabelElement
}

TabContext

Object {
	id: Number,
	tabButton: HTMLElement,
	client: HTMLElement,
	inputField: HTMLElement,
	formTitle: HTMLElement,
	formField: HTMLElement,
	formInputs: Array<FormInputObj>,
	hasSubmitted: Boolean,
	cbField: HTMLElement,
	cbList: Array<CheckboxObj>,
	cbCallback: Function<any>
}

Static functions

Modal.closeAll(): void

Close all opened modals.

Static variables

Modal.isOpen: Boolean

Stores whether or not a modal is opened.

Modal.current: Modal | null

Stores the instance of the currently open modal.

Modal.list: Array<Modal>

Stores a list of all instantiated modals.

Examples

Create an announcement

let modal = new Modal();
modal.createForm();
modal.setFormTitle("Create an announcement\n");
let announcementText = modal.addEntry("Text", "text").input;
modal.setMaximumSize(360, 300);
modal.onSubmit(function() {
    w.doAnnounce(announcementText.value);
});
modal.open();