Dialogs are full screen overlays that cover the currently visible window area using a semi-opague backdrop and a prominently placed dialog window in the foreground. They shift the attention away from the original content towards the dialog and usually contain additional details and/or dedicated form inputs.
The lazy initialization is performed upon the first invocation from the callee,
using the magic
_dialogSetup() method to retrieve the basic configuration for
the dialog construction and any event callbacks.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
id is used to identify a dialog on runtime, but is also part of the first-
time setup when the dialog has not been opened before. If
the module attempts to construct the dialog using an element with the same id.
There are six different types of value that
source does allow and each of them
changes how the initial dialog is constructed:
The dialog exists already and the value of
idshould be used to identify the element.
The HTML is provided using the second argument of
() => void
sourceis a function, it is executed and is expected to start the dialog initialization itself.
Plain objects are interpreted as parameters for an Ajax request, in particular
source.datawill be used to issue the request. It is possible to specify the key
source.afteras a callback
(content: Element, responseData: Object) => voidthat is executed after the dialog was opened.
The string is expected to be plain HTML that should be used to construct the dialog.
A new container
<div>with the provided
idis created and the contents of the
DocumentFragmentis appended to it. This container is then used for the dialog.
All configuration options and callbacks are handled through this object.
Clicks on the dialog backdrop will close the top-most dialog. This option will
be force-disabled if the option
closeable is set to
Enables the close button in the dialog title, when disabled the dialog can be
closed through the
.close() API call only.
The phrase that is displayed in the tooltip for the close button.
Shows a confirmation dialog using the configured message before closing the dialog. The dialog will not be closed if the dialog is rejected by the user.
The phrase that is displayed in the dialog title.
options.onBeforeClose: (id: string) => void#
The callback is executed when the user clicks on the close button or, if enabled, on the backdrop. The callback is responsible to close the dialog by itself, the default close behavior is automatically prevented.
options.onClose: (id: string) => void#
The callback is notified once the dialog is about to be closed, but is still visible at this point. It is not possible to abort the close operation at this point.
options.onShow: (content: Element) => void#
Receives the dialog content element as its only argument, allowing the callback to modify the DOM or to register event listeners before the dialog is presented to the user. The dialog is already visible at call time, but the dialog has not been finalized yet.
setTitle(id: string | Object, title: string)#
Sets the title of a dialog.
setCallback(id: string | Object, key: string, value: (data: any) => void | null)#
Sets a callback function after the dialog initialization, the special value
null will remove a previously set callback. Valid values for
rebuild(id: string | Object)#
Rebuilds a dialog by performing various calculations on the maximum dialog
height in regards to the overflow handling and adjustments for embedded forms.
This method is automatically invoked whenever a dialog is shown, after invoking
close(id: string | Object)#
Closes an open dialog, this will neither trigger a confirmation dialog, nor does
it invoke the
options.onBeforeClose callback. The
will always be invoked, but it cannot abort the close operation.
getDialog(id: string | Object): Object#
This method returns an internal data object by reference, any modifications made do have an effect on the dialogs behavior and in particular no validation is performed on the modification. It is strongly recommended to use the
.set*() methods only.
Returns the internal dialog data that is attached to a dialog. The most important
.content which holds a reference to the dialog's inner content element.
isOpen(id: string | Object): boolean#
Returns true if the dialog exists and is open.