Skip to content

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
require(["Ui/CloseOverlay"], function(UiCloseOverlay) {
  UiCloseOverlay.add("App/Foo", function() {
    // invoked, close something
  });
});

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
require(["Ui/Confirmation"], function(UiConfirmation) {
  UiConfirmation.show({
    confirm: function() {
      // the user has confirmed the dialog
    },
    message: "Do you really want to continue?"
  });
});

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
require(["Ui/Notification"], function(UiNotification) {
  UiNotification.show(
    "Your changes have been saved.",
    function() {
      // this callback will be invoked after 2 seconds
    },
    "success"
  );
});

show(message: string, callback?: () => void, cssClassName?: string)#

Shows the notification and executes the callback after 2 seconds.


Last update: 2021-01-08