Modal: Difference between revisions
No edit summary |
|
(No difference)
|
Revision as of 17:38, 18 August 2023
Introduction
Modals are popup windows that let users input information into a form.
API
Constructor
let modal = new Modal();
Functions
modal.createForm(): void
modal.submitForm(): void
modal.cancelForm(): void
modal.alignForm(): void
modal.unalignForm(): void
modal.addEntry(label: String
, type: "text" | "color"
, validation): EntryObj
modal.setSize(width: Number
, height: Number
): void
modal.setMinimumSize(width: Number
, height: Number
): void
modal.setMaximumSize(width: Number
, height: Number
): void
modal.setFormTitle(title: String
, opts: FormTitleOpts
): void
modal.setFooter(): void
modal.removeFooter(): void
modal.setFooterCheckbox(labelName: String
, callback: Function
, defaultState: Boolean
): void
modal.setFooterContentLeft(data: HTMLElement
): void
modal.setFooterContentCenter(data: HTMLElement
): void
modal.setFooterContentRight(data: HTMLElement
): void
modal.removeFooterContentLeft(): void
modal.removeFooterContentCenter(): void
modal.removeFooterContentRight(): void
modal.onSubmit(callback: Function
): void
modal.onOpen(callback: Function
): void
modal.onClose(callback: Function
): void
modal.checkboxFieldOnInput(callback: Function
): void
modal.onTabChange(callback: Function
): void
modal.open(...params?: any
): void
modal.close(canceled?: Boolean
): void
modal.createCheckboxField(): void
modal.addCheckbox(label: String
, parent?: CheckboxObj
): CheckboxObj
modal.addTab(id: Number
, title: String
): void
modal.focusTab(id: Number
): void
modal.getCurrentTabId(): Number
modal.hideTab(id: Number
): void
modal.showTab(id: Number
): void
modal.getTabData(id: Number
): Number | null
modal.append(elm): void
modal.createClose(): void
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
Static variables
Modal.isOpen: Boolean
Modal.current: Modal | null
Modal.list: Array<Modal>
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();