Modal: Difference between revisions

Revision as of 18:34, 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();

@@ Line 11: / Line 11: @@
 === Functions ===
-modal.createForm()
+modal.createForm(): <code>void</code>
-modal.submitForm()
+modal.submitForm(): <code>void</code>
-modal.cancelForm()
+modal.cancelForm(): <code>void</code>
-modal.alignForm()
+modal.alignForm(): <code>void</code>
-modal.unalignForm()
+modal.unalignForm(): <code>void</code>
-modal.addEntry(label, type, validation)
+modal.addEntry(label: <code>String</code>, type: <code>"text" | "color"</code>, validation): <code>EntryObj</code>
-modal.setSize(width, height)
+modal.setSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
-modal.setMinimumSize(width, height)
+modal.setMinimumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
-modal.setMaximumSize(width, height)
+modal.setMaximumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
-modal.setFormTitle(title, opts)
+modal.setFormTitle(title: <code>String</code>, opts: <code>FormTitleOpts</code>): <code>void</code>
-modal.setFooter()
+modal.setFooter(): <code>void</code>
-modal.removeFooter()
+modal.removeFooter(): <code>void</code>
-modal.setFooterCheckbox(labelName, callback, defaultState)
+modal.setFooterCheckbox(labelName: <code>String</code>, callback: <code>Function</code>, defaultState: <code>Boolean</code>): <code>void</code>
-modal.setFooterContentLeft(data)
+modal.setFooterContentLeft(data: <code>HTMLElement</code>): <code>void</code>
-modal.setFooterContentCenter(data)
+modal.setFooterContentCenter(data: <code>HTMLElement</code>): <code>void</code>
-modal.setFooterContentRight(data)
+modal.setFooterContentRight(data: <code>HTMLElement</code>): <code>void</code>
-modal.removeFooterContentLeft()
+modal.removeFooterContentLeft(): <code>void</code>
-modal.removeFooterContentCenter()
+modal.removeFooterContentCenter(): <code>void</code>
-modal.removeFooterContentRight()
+modal.removeFooterContentRight(): <code>void</code>
-modal.onSubmit(callback)
+modal.onSubmit(callback: <code>Function</code>): <code>void</code>
-modal.onOpen(callback)
+modal.onOpen(callback: <code>Function</code>): <code>void</code>
-modal.onClose(callback)
+modal.onClose(callback: <code>Function</code>): <code>void</code>
-modal.checkboxFieldOnInput(callback)
+modal.checkboxFieldOnInput(callback: <code>Function</code>): <code>void</code>
-modal.onTabChange(callback)
+modal.onTabChange(callback: <code>Function</code>): <code>void</code>
-modal.open(...params)
+modal.open(...params?: <code>any</code>): <code>void</code>
-modal.close(canceled)
+modal.close(canceled?: <code>Boolean</code>): <code>void</code>
-modal.createCheckboxField()
+modal.createCheckboxField(): <code>void</code>
-modal.addCheckbox(label, parent)
+modal.addCheckbox(label: <code>String</code>, parent?: <code>CheckboxObj</code>): <code>CheckboxObj</code>
-modal.addTab(id, title)
+modal.addTab(id: <code>Number</code>, title: <code>String</code>): <code>void</code>
-modal.focusTab(id)
+modal.focusTab(id: <code>Number</code>): <code>void</code>
-modal.getCurrentTabId()
+modal.getCurrentTabId(): <code>Number</code>
-modal.hideTab(id)
+modal.hideTab(id: <code>Number</code>): <code>void</code>
-modal.showTab(id)
+modal.showTab(id: <code>Number</code>): <code>void</code>
-modal.getTabData(id)
+modal.getTabData(id: <code>Number</code>): <code>Number | null</code>
-modal.append(elm)
+modal.append(elm): <code>void</code>
-modal.createClose()
+modal.createClose(): <code>void</code>
+=== Interfaces ===
+CheckboxObj: <code>Object { elm: HTMLLabelElement, cbElm: Function, children: Array<CheckboxObj> }</code>
+EntryObj: <code>Object { input: HTMLInputElement }</code>
+FormTitleOpts: <code>Object { bold: Boolean, center: Boolean }</code>
 === Static functions ===
-Modal.closeAll()
+Modal.closeAll(): <code>void</code>
 === Static variables ===
-Modal.isOpen
+Modal.isOpen: <code>Boolean</code>
+Modal.current: <code>Modal | null</code>
-Modal.current
+Modal.list: <code>Array<Modal></code>
-Modal.list
+=== Examples ===
+Create an announcement<syntaxhighlight lang="javascript" line="1">
+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();
+</syntaxhighlight>