Modal: Difference between revisions
Created page with "== Introduction == Modals are popup windows that let users input information into a form. thumb|A URL modal == API == === Constructor === <syntaxhighlight lang="javascript"> let modal = new Modal(); </syntaxhighlight> === Functions === modal.createForm() modal.submitForm() modal.cancelForm() modal.alignForm() modal.unalignForm() modal.addEntry(label, type, validation) modal.setSize(width, height) modal.setMinimumSize(width, height) modal..." |
No edit summary |
||
| Line 11: | Line 11: | ||
=== Functions === | === 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 === | === Static functions === | ||
Modal.closeAll() | Modal.closeAll(): <code>void</code> | ||
=== Static variables === | === Static variables === | ||
Modal.isOpen | Modal.isOpen: <code>Boolean</code> | ||
Modal.current: <code>Modal | null</code> | |||
Modal. | Modal.list: <code>Array<Modal></code> | ||
Modal. | === 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> | |||
