Expand all

abstract OO.ui.mixin.FloatableElement

Constructor

new OO.ui.mixin.FloatableElement([config])abstract #

Element that will stick adjacent to a specified container, even when it is inserted elsewhere in the document (for example, in an OO.ui.Window's $overlay).

The elements's position is automatically calculated and maintained when window is resized or the page is scrolled. If you reposition the container manually, you have to call #position to make sure the element is still placed correctly.

As positioning is only possible when both the element and the container are attached to the DOM and visible, it's only done after you call #togglePositioning. You might want to do this inside the #toggle method to display a floating popup, for example.

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
$floatable jQuery optional

Node to position, assigned to #$floatable, omit to use #$element
$floatableContainer jQuery optional

Node to position adjacent to
verticalPosition string optional
 'below'

Where to position $floatable vertically: 'below': Directly below $floatableContainer, aligning f's top edge with fC's bottom edge 'above': Directly above $floatableContainer, aligning f's bottom edge with fC's top edge 'top': Align the top edge with $floatableContainer's top edge 'bottom': Align the bottom edge with $floatableContainer's bottom edge 'center': Vertically align the center with $floatableContainer's center
horizontalPosition string optional
 'start'

Where to position $floatable horizontally: 'before': Directly before $floatableContainer, aligning f's end edge with fC's start edge 'after': Directly after $floatableContainer, aligning f's start edge with fC's end edge 'start': Align the start (left in LTR, right in RTL) edge with $floatableContainer's start edge 'end': Align the end (right in LTR, left in RTL) edge with $floatableContainer's end edge 'center': Horizontally align the center with $floatableContainer's center
hideWhenOutOfView boolean optional
 true

Whether to hide the floatable element if the container is out of view
spacing number optional
 0

Spacing from $floatableContainer, when $floatable is positioned outside the container (i.e. below/above/before/after).
Source:

Element that will stick adjacent to a specified container, even when it is inserted elsewhere in the document (for example, in an OO.ui.Window's $overlay).

Methods

computePosition() → {Object} #

Compute how #$floatable should be positioned based on the position of #$floatableContainer and the positioning settings. This is a helper for #position that shouldn't be called directly, but may be overridden by subclasses if they want to change or add to the positioning logic.

Source:

Returns:

New position to apply with .css(). Keys are 'top', 'left', 'bottom' and 'right'.

Type
Object

Compute how #$floatable should be positioned based on the position of #$floatableContainer and the positioning settings.

isFloatableOutOfView() → {boolean} #

Check if the floatable is hidden to the user because it was offscreen.

Source:

Returns:

Floatable is out of view

Type
boolean
Check if the floatable is hidden to the user because it was offscreen.

position() → {OO.ui.Element}chainable #

Position the floatable below its container.

This should only be done when both of them are attached to the DOM and visible.

Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Position the floatable below its container.

setFloatableContainer($floatableContainer) #

Set floatable container.

The element will be positioned relative to the specified container.

Parameters:

Name Type Description
$floatableContainer jQuery | null

Container to keep visible, or null to unset
Source:
Set floatable container.

setFloatableElement($floatable) #

Set floatable element.

If an element is already set, it will be cleaned up before setting up the new element.

Parameters:

Name Type Description
$floatable jQuery

Element to make floatable
Source:
Set floatable element.

setHorizontalPosition(position) #

Change how the element is positioned horizontally.

Parameters:

Name Type Description
position string

'before', 'after', 'start', 'end' or 'center'
Source:
Change how the element is positioned horizontally.

setVerticalPosition(position) #

Change how the element is positioned vertically.

Parameters:

Name Type Description
position string

'below', 'above', 'top', 'bottom' or 'center'
Source:
Change how the element is positioned vertically.

togglePositioning([positioning]) → {OO.ui.Element}chainable #

Toggle positioning.

Do not turn positioning on until after the element is attached to the DOM and visible.

Parameters:

Name Type Attributes Description
positioning boolean optional

Enable positioning, omit to toggle
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Toggle positioning.