Modal: Difference between revisions

From Our World of Text Wiki
Jump to navigation Jump to search
No edit summary
m (Owot moved page Modals to Modal without leaving a redirect)

Revision as of 17:38, 18 August 2023

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

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();