Jump to content

Modal: Difference between revisions

← Older editNewer edit →
Visual
m Owot moved page Modals to Modal without leaving a redirect
No edit summary
Line 11: Line 11:


=== Functions ===
=== Functions ===
modal.createForm(): <code>void</code>


modal.submitForm(): <code>void</code>
==== modal.createForm(): <code>void</code> ====
Creates a form section in the modal.


modal.cancelForm(): <code>void</code>
Modals are currently limited to one form only.


modal.alignForm(): <code>void</code>
==== modal.submitForm(): <code>void</code> ====
Validates, processes, and submits the form.


modal.unalignForm(): <code>void</code>
This triggers the onSubmit callback.


modal.addEntry(label: <code>String</code>, type: <code>"text" | "color"</code>, validation): <code>EntryObj</code>
==== modal.cancelForm(): <code>void</code> ====
Revert the form and close the modal.


modal.setSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
==== modal.alignForm(): <code>void</code> ====
Line up all form labels.


modal.setMinimumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
The form labels are set to the left and the inputs are set to the right.


modal.setMaximumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code>
==== modal.unalignForm(): <code>void</code> ====
Set each form label on its own line.


modal.setFormTitle(title: <code>String</code>, opts: <code>FormTitleOpts</code>): <code>void</code>
==== modal.addEntry(label: <code>String</code>, type: <code>"text" | "color"</code>, validation): <code>EntryObj</code> ====
Add an input entry to the form.


modal.setFooter(): <code>void</code>
label: The label to be shown next to the input.


modal.removeFooter(): <code>void</code>
type (optional): 'text' or 'color'.


modal.setFooterCheckbox(labelName: <code>String</code>, callback: <code>Function</code>, defaultState: <code>Boolean</code>): <code>void</code>
validation (optional): 'number'. Check if the entry contains a valid value.


modal.setFooterContentLeft(data: <code>HTMLElement</code>): <code>void</code>
==== modal.setSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code> ====
Sets the fixed size of the modal.


modal.setFooterContentCenter(data: <code>HTMLElement</code>): <code>void</code>
Any overflown content will be hidden.


modal.setFooterContentRight(data: <code>HTMLElement</code>): <code>void</code>
Setting either dimension to zero will reset that dimension.


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


modal.removeFooterContentCenter(): <code>void</code>
The modal cannot be smaller than this size.


modal.removeFooterContentRight(): <code>void</code>
Setting either dimension to zero will reset that dimension.


modal.onSubmit(callback: <code>Function</code>): <code>void</code>
==== modal.setMaximumSize(width: <code>Number</code>, height: <code>Number</code>): <code>void</code> ====
Sets the maximum size of the modal.


modal.onOpen(callback: <code>Function</code>): <code>void</code>
The modal cannot be bigger than this size. Overflown content will be hidden.


modal.onClose(callback: <code>Function</code>): <code>void</code>
Setting either dimension to zero will reset that dimension.


modal.checkboxFieldOnInput(callback: <code>Function</code>): <code>void</code>
==== modal.setFormTitle(title: <code>String</code>, opts: <code>FormTitleOpts</code>): <code>void</code> ====
Set a title or description at the top of the modal.


modal.onTabChange(callback: <code>Function</code>): <code>void</code>
==== modal.setFooter(): <code>void</code> ====
Add a footer to the bottom of the modal.


modal.open(...params?: <code>any</code>): <code>void</code>
The footer is split into three parts (left, center, right).


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


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


modal.addCheckbox(label: <code>String</code>, parent?: <code>CheckboxObj</code>): <code>CheckboxObj</code>
labelName: name of the checkbox.


modal.addTab(id: <code>Number</code>, title: <code>String</code>): <code>void</code>
callback: to be called when the checkbox is checked (parameter: checked)


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


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


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


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


modal.getTabData(id: <code>Number</code>): <code>Number | null</code>
==== modal.removeFooterContentCenter(): <code>void</code> ====
Clears a section of the footer.


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


modal.createClose(): <code>void</code>
==== modal.onSubmit(callback: <code>Function</code>): <code>void</code> ====
Set event callback.
 
This will be called whenever the form is submitted.
 
==== modal.onOpen(callback: <code>Function</code>): <code>void</code> ====
Set event callback.
 
This will be called whenever the form is opened.
 
==== modal.onClose(callback: <code>Function</code>): <code>void</code> ====
Set event callback.
 
This will be called whenever the form is closed.
 
==== modal.onTabChange(callback: <code>Function</code>): <code>void</code> ====
Set event callback.
 
This will be called whenever the tab is changed.
 
==== modal.checkboxFieldOnInput(callback: <code>Function</code>): <code>void</code> ====
Set event callback.
 
This will be called whenever a checkbox is checked or unchecked.
 
==== modal.open(...params?: <code>any</code>): <code>void</code> ====
Display the modal.
 
All parameters will be passed to the onOpen event.
 
==== modal.close(canceled?: <code>Boolean</code>): <code>void</code> ====
Hide the modal.
 
canceled: This modal has closed as a result of form cancelation. This will revert the values of the form inputs.
 
==== 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>Number | 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 ===
=== Interfaces ===
Line 91: Line 182:


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


=== Static variables ===
=== Static variables ===
Modal.isOpen: <code>Boolean</code>


Modal.current: <code>Modal | null</code>
==== Modal.isOpen: <code>Boolean</code> ====
Stores whether or not a modal is opened.
 
==== Modal.current: <code>Modal | null</code> ====
Stores the instance of the currently open modal.


Modal.list: <code>Array<Modal></code>
==== Modal.list: <code>Array<Modal></code> ====
Stores a list of all instantiated modals.


=== Examples ===
=== Examples ===
Retrieved from "https://wiki.ourworldoftext.com/wiki/Modal"