Jump to content

Modal: Difference between revisions

VisualWikitext
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..."
 
Fix Modal documentation error (getTabData)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Page in progress}}
== Introduction ==
== Introduction ==
Modals are popup windows that let users input information into a form.
Modals are popup windows that let users input information into a form.
Line 11: Line 13:


=== Functions ===
=== Functions ===
modal.createForm()


modal.submitForm()
==== modal.createForm(): <code>void</code> ====
Creates a form section in the modal.
 
Modals are currently limited to one form only.
 
==== modal.submitForm(): <code>void</code> ====
Validates, processes, and submits the form.
 
This triggers the onSubmit callback.
 
==== modal.cancelForm(): <code>void</code> ====
Revert the form and close the modal.
 
==== modal.alignForm(): <code>void</code> ====
Line up all form labels.
 
The form labels are set to the left and the inputs are set to the right.
 
==== modal.unalignForm(): <code>void</code> ====
Set each form label on its own line.
 
==== modal.addEntry(label: <code>String</code>, type?: <code>"text" | "color"</code>, validation?: <code>"number" | "required"</code>): <code>EntryObj</code> ====
Add an input entry to the form.
 
label: The label to be shown next to the input.
 
type (optional): 'text' or 'color'. The type of input.
 
validation (optional): 'number' or 'required'. Check if the entry contains a valid value.
 
==== modal.setSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code> ====
Sets the fixed size of the modal.
 
Any overflown content will be hidden.
 
Setting either dimension to zero will reset that dimension.


modal.cancelForm()
==== modal.setMinimumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code> ====
Sets the minimum size of the modal.


modal.alignForm()
The modal cannot be smaller than this size.


modal.unalignForm()
Setting either dimension to zero will reset that dimension.


modal.addEntry(label, type, validation)
==== modal.setMaximumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code> ====
Sets the maximum size of the modal.


modal.setSize(width, height)
The modal cannot be bigger than this size. Overflown content will be hidden.


modal.setMinimumSize(width, height)
Setting either dimension to zero will reset that dimension.


modal.setMaximumSize(width, height)
==== modal.setFormTitle(title: <code>String</code>, opts?: <code>{ bold?: Boolean, center?: Boolean }</code>): <code>void</code> ====
Set a title or description at the top of the modal.


modal.setFormTitle(title, opts)
==== modal.setFooter(): <code>void</code> ====
Add a footer to the bottom of the modal.


modal.setFooter()
The footer is split into three parts (left, center, right).


modal.removeFooter()
==== modal.removeFooter(): <code>void</code> ====
Removes the footer from the modal.


modal.setFooterCheckbox(labelName, callback, defaultState)
==== modal.setFooterCheckbox(labelName: <code>String</code>, callback: <code>Function<any></code>, defaultState: <code>Boolean</code>): <code>void</code> ====
Adds a checkbox to the left section of the footer.


modal.setFooterContentLeft(data)
labelName: name of the checkbox.


modal.setFooterContentCenter(data)
callback: to be called when the checkbox is checked (parameter: checked)


modal.setFooterContentRight(data)
==== modal.setFooterContentLeft(data: <code>HTMLElement</code>): <code>void</code> ====
Adds content to a section of the footer.


modal.removeFooterContentLeft()
==== modal.setFooterContentCenter(data: <code>HTMLElement</code>): <code>void</code> ====
Adds content to a section of the footer.


modal.removeFooterContentCenter()
==== modal.setFooterContentRight(data: <code>HTMLElement</code>): <code>void</code> ====
Adds content to a section of the footer.


modal.removeFooterContentRight()
==== modal.removeFooterContentLeft(): <code>void</code> ====
Clears a section of the footer.


modal.onSubmit(callback)
==== modal.removeFooterContentCenter(): <code>void</code> ====
Clears a section of the footer.


modal.onOpen(callback)
==== modal.removeFooterContentRight(): <code>void</code> ====
Clears a section of the footer.


modal.onClose(callback)
==== modal.onSubmit(callback: <code>Function<any></code>): <code>void</code> ====
Set event callback.


modal.checkboxFieldOnInput(callback)
This will be called whenever the form is submitted.


modal.onTabChange(callback)
==== modal.onOpen(callback: <code>Function<any></code>): <code>void</code> ====
Set event callback.


modal.open(...params)
This will be called whenever the form is opened.


modal.close(canceled)
==== modal.onClose(callback: <code>Function<any></code>): <code>void</code> ====
Set event callback.


modal.createCheckboxField()
This will be called whenever the form is closed.


modal.addCheckbox(label, parent)
==== modal.onTabChange(callback: <code>Function<any></code>): <code>void</code> ====
Set event callback.


modal.addTab(id, title)
This will be called whenever the tab is changed.


modal.focusTab(id)
==== modal.checkboxFieldOnInput(callback: <code>Function<any></code>): <code>void</code> ====
Set event callback.


modal.getCurrentTabId()
This will be called whenever a checkbox is checked or unchecked.


modal.hideTab(id)
==== modal.open(...params?: <code>any</code>): <code>void</code> ====
Display the modal.


modal.showTab(id)
All parameters will be passed to the onOpen event.


modal.getTabData(id)
==== modal.close(canceled?: <code>Boolean</code>): <code>void</code> ====
Hide the modal.


modal.append(elm)
canceled: This modal has closed as a result of form cancelation. This will revert the values of the form inputs.


modal.createClose()
==== modal.createCheckboxField(): <code>void</code> ====
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: <code>String</code>, parent?: <code>CheckboxObj</code>): <code>CheckboxObj</code> ====
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: <code>Number</code>, title: <code>String</code>): <code>void</code> ====
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: <code>Number</code>): <code>void</code> ====
Make the tab the current visible tab.
 
==== modal.getCurrentTabId(): <code>Number | null</code> ====
If there are any defined tabs, return the ID of the currently active tab.
 
==== modal.hideTab(id: <code>Number</code>): <code>void</code> ====
Hide tab from the tab bar. This will not bring you to the next available tab.
 
==== modal.showTab(id: <code>Number</code>): <code>void</code> ====
Show tab on the tab bar.
 
==== modal.getTabData(id: <code>Number</code>): <code>TabContext | null</code> ====
Return raw tab data.
 
==== modal.append(elm: <code>HTMLElement</code>): <code>void</code> ====
Insert content to the modal.
 
==== modal.createClose(): <code>void</code> ====
Adds a close caption to the bottom right of the modal.
 
=== Interfaces ===
 
==== CheckboxObj ====
<syntaxhighlight lang="typescript">
Object {
    elm: HTMLLabelElement,
    cbElm: Function,
    children: Array<CheckboxObj>
}
</syntaxhighlight>
 
==== EntryObj ====
<syntaxhighlight lang="typescript">
Object {
    input: HTMLInputElement
}
</syntaxhighlight>
 
==== FormInputObj ====
<syntaxhighlight lang="typescript">
Object {
    input: HTMLInputElement,
value: String,
validation: "number" | "required",
validationFailed: Boolean,
type: "text" | "color",
label: HTMLLabelElement
}
</syntaxhighlight>
 
==== TabContext ====
<syntaxhighlight lang="typescript">
Object {
id: Number,
tabButton: HTMLElement,
client: HTMLElement,
inputField: HTMLElement,
formTitle: HTMLElement,
formField: HTMLElement,
formInputs: Array<FormInputObj>,
hasSubmitted: Boolean,
cbField: HTMLElement,
cbList: Array<CheckboxObj>,
cbCallback: Function<any>
}
</syntaxhighlight>


=== Static functions ===
=== Static functions ===
Modal.closeAll()
 
==== Modal.closeAll(): <code>void</code> ====
Close all opened modals.


=== Static variables ===
=== Static variables ===
Modal.isOpen


Modal.current
==== Modal.isOpen: <code>Boolean</code> ====
Stores whether or not a modal is opened.


Modal.list
==== Modal.current: <code>Modal | null</code> ====
Stores the instance of the currently open modal.
 
==== Modal.list: <code>Array<Modal></code> ====
Stores a list of all instantiated modals.
 
=== 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>
[[Category:Documentation]]
Retrieved from "https://wiki.ourworldoftext.com/wiki/Modal"