mapp.ui.elements.dialog()
Exports the dialog method as mapp.ui.elements.dialog()
- Source
Methods
(inner) dialog(dialog) → {Object}
The dialog method decorates a dialog object with methods to close or shift the element within the confines of the containing [target] window element.
const dialog = mapp.ui.elements.dialog({
target: document.body,
css_style: 'width: 300px; height: 200px; background: #fff; border: 1px solid #000',
header: 'Dialog Header',
content: 'Dialog Content',
close: true,
headerDrag: true
});
The show method will be called on an existing dialog unless the creation is implicit with the new property flag.
| Name | Type | Description |
|---|---|---|
dialog | Object | The dialog configuration object. |
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
dialog.target | HTMLElement | The target element where the dialog will be appended. | ||
dialog.css_style | string | <optional> | The CSS styles to apply to the dialog dialog. | |
dialog.data_id | string | <optional> | 'dialog' | The data-id attribute value for the dialog. |
dialog.header | string | <optional> | The HTML content for the dialog header. | |
dialog.content | string | <optional> | The HTML content for the dialog body. | |
dialog.modal | boolean | <optional> | A flag to determine if its a Modal or Dialog. | |
dialog.closeBtn | boolean | <optional> | The flag property will become the closeBtn element. | |
dialog.minimizeBtn | boolean | <optional> | The flag property will become the minimizeBtn element. | |
dialog.close | function | <optional> | A function called by default when the dialog is closed. The dialog element is closed and removed from DOM. | |
dialog.onClose | function | <optional> | Optional function to run after dialog element is closed - uses onclose dialog event and overrides dialog.close(). | |
dialog.new | boolean | <optional> | Optional parameter which specifies whether a new dialog should be created on re-opening the dialog. | |
dialog.top | number | <optional> | The top position of the dialog. | |
dialog.left | number | <optional> | The left position of the dialog. | |
dialog.right | number | <optional> | The right position of the dialog (used to calculate left position). | |
dialog.contained | boolean | <optional> | A flag indicating whether to keep the dialog within the target element's boundaries. | |
dialog.containedCentre | boolean | <optional> | A flag indicating whether to keep the dialog centered within the target element's boundaries. | |
dialog.headerDrag | boolean | <optional> | A flag indicating whether the dialog can be dragged only by the header.By default, the dialog can be dragged from anywhere. |
- Source
Decorated dialog configuration object
- Type:
- Object
(inner) shiftContained(dialog, leftShift, topShift)
The shiftContained method prevents the dialog element to be shifted beyond the extent of the containing window element.
| Name | Type | Description |
|---|---|---|
dialog | Object | The dialog configuration object. |
leftShift | integer | Shift from left offset. |
topShift | integer | Shift from top offset |
- Source
(inner) shiftContainedCentre(dialog, leftShift, topShift)
The shiftContainedCentre method prevents the dialog elements calculated centre to be shifted beyond the extent of the containing window element.
| Name | Type | Description |
|---|---|---|
dialog | Object | The dialog configuration object. |
leftShift | integer | Shift from left offset. |
topShift | integer | Shift from top offset |
- Source
(inner) show()
Appends the dialog node to its target. Called upon re-opening a dialog.
- Source