Modal
Introduction
Modals are popup windows that let users input information into a form.
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): EntryObj
Add an input entry to the form.
label: The label to be shown next to the input.
type (optional): 'text' or 'color'.
validation (optional): 'number'. 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: FormTitleOpts): void
Set a title or description at the top of the modal.
Add a footer to the bottom of the modal.
The footer is split into three parts (left, center, right).
Removes the footer from the modal.
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)
Adds content to a section of the footer.
Adds content to a section of the footer.
Adds content to a section of the footer.
Clears a section of the footer.
Clears a section of the footer.
Clears a section of the footer.
modal.onSubmit(callback: Function): void
Set event callback.
This will be called whenever the form is submitted.
modal.onOpen(callback: Function): void
Set event callback.
This will be called whenever the form is opened.
modal.onClose(callback: Function): void
Set event callback.
This will be called whenever the form is closed.
modal.onTabChange(callback: Function): void
Set event callback.
This will be called whenever the tab is changed.
modal.checkboxFieldOnInput(callback: Function): 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): Number | 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 }
FormTitleOpts: Object { bold: Boolean, center: Boolean }
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();