module:core/modal

module:core/modal

new (require("core/modal"))(root)

Description:

  • Constructor for the Modal.

Source:
Parameters:
Name Type Description
root HTMLElement

The HTMLElement at the root of the Modal content

Members

root

Description:

  • Getter method for .root element.

Source:

Getter method for .root element.

root

Description:

  • Setter method for .root element.

Source:

Setter method for .root element.

(inner) A :Number

Description:

  • counter that gets incremented for each modal created. This can be used to generate unique values for the modals.

Source:

counter that gets incremented for each modal created. This can be used to generate unique values for the modals.

Type:
  • Number

(inner) Module :Promise

Description:

  • singleton for the backdrop to be reused by all Modal instances

Source:

singleton for the backdrop to be reused by all Modal instances

Type:
  • Promise

(inner) The :string

Description:

  • type of modal

Source:

type of modal

Type:
  • string

(inner) The :string

Description:

  • template to use for this modal

Source:

template to use for this modal

Type:
  • string

Methods

configure(param0)

Description:

  • Configure the modal.

Source:
Parameters:
Name Type Description
param0 ModalConfig

The configuration options

getActionSelector(action) → {DOMString}

Description:

  • Get the Selector for an action.

Source:
Parameters:
Name Type Description
action String
Returns:
Type
DOMString

getAttachmentPoint() → {jQuery}

Description:

  • Gets the jQuery wrapped node that the Modal should be attached to.

Source:
Returns:
Type
jQuery

setBodyContent(promise) → {Promise}

Description:

  • Alternative to setBody() that can be used from non-Jquery modules

Source:
Parameters:
Name Type Description
promise Promise

promise that returns {html, js} object
Returns:
Type
Promise

setButtonDisabled(action, disabled)

Description:

  • Set the a button enabled or disabled.

Source:
Parameters:
Name Type Description
action DOMString

The action of the button
disabled Boolean

the new disabled value

setButtonText(action, value) → {Promise}

Description:

  • Set the title text of a button.

    This method is overloaded to take either a string value for the button title or a jQuery promise that is resolved with text most commonly from a Str.get_string call.

Source:
Parameters:
Name Type Description
action DOMString

The action of the button
value String | object

The button text, or a promise which will resolve to it
Returns:
Type
Promise

setRemoveOnClose(remove)

Description:

  • Set the flag to remove the modal from the DOM on close.

Source:
Parameters:
Name Type Description
remove Boolean

setReturnElement(element)

Description:

  • Set the return element for the modal.

Source:
Parameters:
Name Type Description
element Element | jQuery

Element to focus when the modal is closed

setTemplateJS(js)

Description:

  • Set the template JS for this modal.

Source:
Parameters:
Name Type Description
js String

The JavaScript to run when the modal is attached to the DOM.

(protected, static) _getTemplateName(modalConfig) → {string}

Description:

  • A helper to get the template name for this modal.

Source:
Parameters:
Name Type Description
modalConfig ModalConfig
Returns:
Type
string

(static) registerModalType()

Description:

  • Register a modal with the legacy modal registry.

    This is provided to allow backwards-compatibility with existing code that uses the legacy modal registry. It is not necessary to register modals for code only present in Moodle 4.3 and later.

Source:

(inner) accessibilityHide()

Description:

  • Restores the aria visibility on the DOM elements changed when displaying the dialogue popup and makes the dialogue aria hidden to allow screen readers to navigate the main page correctly when the dialogue is closed.

Source:

(inner) accessibilityShow()

Description:

  • Sets the appropriate aria attributes on this dialogue and the other elements in the DOM to ensure that screen readers are able to navigate the dialogue popup correctly.

Source:

(inner) asyncSet(value, setFunction) → {Promise}

Description:

  • Set or resolve and set the value using the function.

Source:
Parameters:
Name Type Description
value string | object

The string or jQuery promise.
setFunction function

The setter
Returns:
Type
Promise

(inner) attachToDOM()

Description:

  • Attach the modal to the correct part of the page.

    If it hasn't already been added it runs any javascript that has been cached until now.

Source:

(inner) calculateZIndex() → {int}

Description:

  • Determine the highest z-index value currently on the page.

Source:
Returns:
Type
int

(inner) countOtherVisibleModals() → {int}

Description:

  • Count the number of other visible modals (not including this one).

Source:
Returns:
Type
int

(inner) destroy()

Description:

  • Remove this modal from the DOM.

Source:

(inner) getBackdrop() → {object}

Description:

  • Get the modal backdrop.

Source:
Returns:

jQuery promise

Type
object

(inner) getBody() → {object}

Description:

  • Get the modal body element.

Source:
Returns:

jQuery object

Type
object

(inner) getBodyPromise() → {object}

Description:

  • Get a promise resolving to the body region.

Source:
Returns:

jQuery object

Type
object

(inner) getFooter() → {object}

Description:

  • Get the modal footer element.

Source:
Returns:

jQuery object

Type
object

(inner) getFooterPromise() → {object}

Description:

  • Get a promise resolving to the footer region.

Source:
Returns:

jQuery object

Type
object

(inner) getModal() → {object}

Description:

  • Get the modal element of this modal.

Source:
Returns:

jQuery object

Type
object

(inner) getModalCount() → {int}

Description:

  • Get the unique modal count.

Source:
Returns:
Type
int

(inner) getRoot() → {object}

Description:

  • Get the root element of this modal.

Source:
Returns:

jQuery object

Type
object

(inner) getTitle() → {object}

Description:

  • Get the modal title element.

Source:
Returns:

jQuery object

Type
object

(inner) getTitlePromise() → {Promise}

Description:

  • Get a promise resolving to the title region.

Source:
Returns:
Type
Promise

(inner) hasFocus() → {bool}

Description:

  • Check if this modal has focus.

Source:
Returns:
Type
bool

(inner) hasFooterContent() → {bool}

Description:

  • Check if the footer has any content in it.

Source:
Returns:
Type
bool

(inner) hasTransitions() → {bool}

Description:

  • Check if this modal has CSS transitions applied.

Source:
Returns:
Type
bool

(inner) hide()

Description:

  • Hide this modal.

Source:

(inner) hideFooter()

Description:

  • Hide the footer element.

Source:

(inner) hideIfNotForm()

Description:

  • Hide this modal if it does not contain a form.

Source:

(inner) isLarge() → {bool}

Description:

  • Check if the modal is a large modal.

Source:
Returns:
Type
bool

(inner) isSmall() → {bool}

Description:

  • Check if the modal is a small modal.

Source:
Returns:
Type
bool

(inner) isVerticallyCentered() → {bool}

Description:

  • Check if the modal is vertically centered.

Source:
Returns:
Type
bool

(inner) isVisible() → {bool}

Description:

  • Check if this modal is visible.

Source:
Returns:
Type
bool

(inner) registerCloseOnCancel()

Description:

  • Register a listener to close the dialogue when the cancel button is pressed.

Source:

(inner) registerCloseOnDelete()

Description:

  • Register a listener to close the dialogue when the delete button is pressed.

Source:

(inner) registerCloseOnSave()

Description:

  • Register a listener to close the dialogue when the save button is pressed.

Source:

(inner) registerEventListeners()

Description:

  • Set up all of the event handling for the modal.

Source:

(inner) setBody(value)

Description:

  • Set the modal body element.

    This method is overloaded to take either a string value for the body or a jQuery promise that is resolved with HTML and Javascript most commonly from a Templates.render call.

Source:
Parameters:
Name Type Description
value string | object

The body string or jQuery promise which resolves to the body.
Fires:

(inner) setFooter(value)

Description:

  • Set the modal footer element. The footer element is made visible, if it isn't already.

    This method is overloaded to take either a string value for the body or a jQuery promise that is resolved with HTML and Javascript most commonly from a Templates.render call.

Source:
Parameters:
Name Type Description
value string | object

The footer string or jQuery promise

(inner) setLarge()

Description:

  • Mark the modal as a large modal.

Source:

(inner) setScrollable(value)

Description:

  • Set this modal to be scrollable or not.

Source:
Parameters:
Name Type Description
value bool

Whether the modal is scrollable or not

(inner) setSmall()

Description:

  • Mark the modal as a small modal.

Source:

(inner) setTitle(value)

Description:

  • Set the modal title element.

    This method is overloaded to take either a string value for the title or a jQuery promise that is resolved with HTML most commonly from a Str.get_string call.

Source:
Parameters:
Name Type Description
value string | object

The title string or jQuery promise which resolves to the title.

(inner) setVerticallyCentered()

Description:

  • Mark the modal as a centered modal.

Source:

(inner) show() → {Promise}

Description:

  • Display this modal. The modal will be attached to the DOM if it hasn't already been.

Source:
Returns:
Type
Promise

(inner) showFooter()

Description:

  • Show the footer element.

Source:

Type Definitions

ModalConfig

Description:

  • A configuration to provide to the modal.

Source:
Properties:
Name Type Attributes Default Description
type string <optional>

The type of modal to create.
title string | Promise.<string> <optional>

The title of the modal.
body string | Promise.<string> <optional>

The body of the modal.
footer string | Promise.<string> <optional>

The footer of the modal.
show boolean <optional>
 false

Whether to show the modal immediately.
scrollable boolean <optional>
 true

Whether the modal should be scrollable.
removeOnClose boolean <optional>
 true

Whether the modal should be removed from the DOM when it is closed.
returnElement Element | jQuery <optional>

The element to focus when closing the modal.
large boolean <optional>
 false

Whether the modal should be a large modal.
isVerticallyCentered boolean <optional>
 false

Whether the modal should be vertically centered.
buttons object <optional>
 {}

The buttons to display in the footer as a key => title pair.

A configuration to provide to the modal.

Type:
  • Object