User Interface - JavaScript API#
Ui/Alignment
#
Calculates the alignment of one element relative to another element, with support for boundary constraints, alignment restrictions and additional pointer elements.
set(element: Element, referenceElement: Element, options: Object)
#
Calculates and sets the alignment of the element element
.
verticalOffset: number
#
Defaults to 0
.
Creates a gap between the element and the reference element, in pixels.
pointer: boolean
#
Defaults to false
.
Sets the position of the pointer element, requires an existing child of the
element with the CSS class .elementPointer
.
pointerOffset: number
#
Defaults to 4
.
The margin from the left/right edge of the element and is used to avoid the arrow from being placed right at the edge.
Does not apply when aligning the element to the reference elemnent's center.
pointerClassNames: string[]
#
Defaults to []
.
If your element uses CSS-only pointers, such as using the ::before
or ::after
pseudo selectors, you can specifiy two separate CSS class names that control the
alignment:
pointerClassNames[0]
is applied to the element when the pointer is displayed at the bottom.pointerClassNames[1]
is used to align the pointer to the right side of the element.
refDimensionsElement: Element
#
Defaults to null
.
An alternative element that will be used to determine the position and dimensions of the reference element. This can be useful if you reference element is contained in a wrapper element with alternating dimensions.
horizontal: string
#
This value is automatically flipped for RTL (right-to-left) languages, left
is changed into right
and vice versa.
Defaults to "left"
.
Sets the prefered alignment, accepts either left
or right
. The value left
instructs the module to align the element with the left boundary of the reference
element.
The horizontal
alignment is used as the default and a flip only occurs, if there
is not enough space in the desired direction. If the element exceeds the boundaries
in both directions, the value of horizontal
is used.
vertical: string
#
Defaults to "bottom"
.
Sets the prefered alignment, accepts either bottom
or top
. The value bottom
instructs the module to align the element below the reference element.
The vertical
alignment is used as the default and a flip only occurs, if there
is not enough space in the desired direction. If the element exceeds the boundaries
in both directions, the value of vertical
is used.
allowFlip: string
#
The value for horizontal
is automatically flipped for RTL (right-to-left) languages, left
is changed into right
and vice versa. This setting only controls the behavior when violating space constraints, therefore the aforementioned transformation is always applied.
Defaults to "both"
.
Restricts the automatic alignment flipping if the element exceeds the window boundaries in the instructed direction.
both
- No restrictions.horizontal
- Element can be aligned with the left or the right boundary of the reference element, but the vertical position is fixed.vertical
- Element can be aligned below or above the reference element, but the vertical position is fixed.none
- No flipping can occur, the element will be aligned regardless of any space constraints.
Ui/CloseOverlay
#
Register elements that should be closed when the user clicks anywhere else, such as drop-down menus or tooltips.
1 2 3 4 5 |
|
add(identifier: string, callback: () => void)
#
Adds a callback that will be invoked when the user clicks anywhere else.
Ui/Confirmation
#
Prompt the user to make a decision before carrying out an action, such as a safety warning before permanently deleting content.
1 2 3 4 5 6 7 8 |
|
show(options: Object)
#
Displays a dialog overlay with actions buttons to confirm or reject the dialog.
cancel: (parameters: Object) => void
#
Defaults to null
.
Callback that is invoked when the dialog was rejected.
confirm: (parameters: Object) => void
#
Defaults to null
.
Callback that is invoked when the user has confirmed the dialog.
message: string
#
Defaults to '""'.
Text that is displayed in the content area of the dialog, optionally this can
be HTML, but this requires messageIsHtml
to be enabled.
messageIsHtml
#
Defaults to false
.
The message
option is interpreted as text-only, setting this option to true
will cause the message
to be evaluated as HTML.
parameters: Object
#
Optional list of parameter options that will be passed to the cancel()
and
confirm()
callbacks.
template: string
#
An optional HTML template that will be inserted into the dialog content area,
but after the message
section.
Ui/Notification
#
Displays a simple notification at the very top of the window, such as a success message for Ajax based actions.
1 2 3 4 5 6 7 8 9 |
|
show(message: string, callback?: () => void, cssClassName?: string)
#
Shows the notification and executes the callback after 2 seconds.