Class: PopupWidget

.ui.PopupWidget(configopt, headopt)

new PopupWidget(configopt, headopt)

PopupWidget is a container for content. The popup is overlaid and positioned absolutely. By default, each popup has an anchor that points toward its origin. Please see the [OOjs UI documentation on Mediawiki] [1] for more information and examples.

Unlike most widgets, PopupWidget is initially hidden and must be shown by calling #toggle.

Parameters:
Name Type Attributes Default Description
config Object <optional>

Configuration options

Properties
Name Type Attributes Default Description
width number <optional>
 320

Width of popup in pixels
height number <optional>

Height of popup in pixels. Omit to use the automatic height.
anchor boolean <optional>
 true

Show anchor pointing to origin of popup
position string <optional>
 'below'

Where to position the popup relative to $floatableContainer 'above': Put popup above $floatableContainer; anchor points down to the horizontal center of $floatableContainer 'below': Put popup below $floatableContainer; anchor points up to the horizontal center of $floatableContainer 'before': Put popup to the left (LTR) / right (RTL) of $floatableContainer; anchor points endwards (right/left) to the vertical center of $floatableContainer 'after': Put popup to the right (LTR) / left (RTL) of $floatableContainer; anchor points startwards (left/right) to the vertical center of $floatableContainer
align string <optional>
 'center'

How to align the popup to $floatableContainer 'forwards': If position is above/below, move the popup as far endwards (right in LTR, left in RTL) as possible while still keeping the anchor within the popup; if position is before/after, move the popup as far downwards as possible. 'backwards': If position is above/below, move the popup as far startwards (left in LTR, right in RTL) as possible while still keeping the anchor within the popup; if position in before/after, move the popup as far upwards as possible. 'center': Horizontally (if position is above/below) or vertically (before/after) align the center of the popup with the center of $floatableContainer. 'force-left': Alias for 'forwards' in LTR and 'backwards' in RTL 'force-right': Alias for 'backwards' in RTL and 'forwards' in LTR
autoFlip boolean <optional>
 true

Whether to automatically switch the popup's position between 'above' and 'below', or between 'before' and 'after', if there is not enough space in the desired direction to display the popup without clipping
$container jQuery <optional>

Constrain the popup to the boundaries of the specified container. See the OOjs UI docs on MediaWiki for an example.
containerPadding number <optional>
 10

Padding between the popup and its container, specified as a number of pixels.
$content jQuery <optional>

Content to append to the popup's body
$footer jQuery <optional>

Content to append to the popup's footer
autoClose boolean <optional>
 false

Automatically close the popup when it loses focus.
$autoCloseIgnore jQuery <optional>

Elements that will not close the popup when clicked. This config option is only relevant if #autoClose is set to true. See the OOjs UI docs on MediaWiki for an example.
head boolean <optional>
 false

Show a popup header that contains a #label (if specified) and close button.
config.padded boolean <optional>
 false

Add padding to the popup's body
Mixes In:
Source:
Example
// A popup widget.
    var popup = new OO.ui.PopupWidget( {
        $content: $( '<p>Hi there!</p>' ),
        padded: true,
        width: 300
    } );

    $( 'body' ).append( popup.$element );
    // To display the popup, toggle the visibility to 'true'.
    popup.toggle( true );

[1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Popups

Extends

Methods

computePosition()

Source:

getAlignment() → {string}

Get popup alignment

Source:
Returns:

Alignment of the popup, center, force-left, force-right, backwards or forwards.

Type
string

getBodyId() → {string}

Get an ID of the body element, this can be used as the aria-describedby attribute for an input field.

Source:
Returns:

The ID of the body element

Type
string

getClosestScrollableElementContainer() → {HTMLElement}

Get closest scrollable container.

Inherited From:
Source:
Returns:

Closest scrollable container

Type
HTMLElement

getData() → {Mixed}

Get element data.

Inherited From:
Source:
Returns:

Element data

Type
Mixed

getElementDocument() → {HTMLDocument}

Get the DOM document.

Inherited From:
Source:
Returns:

Document object

Type
HTMLDocument

getElementGroup() → {OO.ui.mixin.GroupElement|null}

Get group element is in.

Inherited From:
Source:
Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null

getElementId() → {string}

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

Inherited From:
Source:
Returns:
Type
string

getElementWindow() → {Window}

Get the DOM window.

Inherited From:
Source:
Returns:

Window object

Type
Window

getInputId() → {string|null}

Get an ID of a labelable node which is part of this widget, if any, to be used for <label for> value.

If this function returns null, the widget should have a meaningful #simulateLabelClick method instead.

Inherited From:
Source:
Returns:

The ID of the labelable element

Type
string | null

getPosition() → {string}

Get popup positioning.

Source:
Returns:

'above', 'below', 'before' or 'after'

Type
string

getTagName() → {string}

Get the HTML tag name.

Override this method to base the result on instance information.

Inherited From:
Source:
Returns:

HTML tag name

Type
string

hasAnchor() → {boolean}

Check if the anchor is visible.

Source:
Returns:

Anchor is visible

Type
boolean

isDisabled() → {boolean}

Check if the widget is disabled.

Inherited From:
Source:
Returns:

Widget is disabled

Type
boolean

isElementAttached() → {boolean}

Check if the element is attached to the DOM

Inherited From:
Source:
Returns:

The element is attached to the DOM

Type
boolean

isVisible() → {boolean}

Check if element is visible.

Inherited From:
Source:
Returns:

element is visible

Type
boolean

(protected) restorePreInfuseState(state)

Restore the pre-infusion dynamic state for this widget.

This method is called after #$element has been inserted into DOM. The parameter is the return value of #gatherPreInfuseState.

Parameters:
Name Type Description
state Object
Inherited From:
Source:

scrollElementIntoView(configopt) → {jQuery.Promise}

Scroll element into view.

Parameters:
Name Type Attributes Description
config Object <optional>

Configuration options
Inherited From:
Source:
Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise

setAlignment(alignopt)

Set popup alignment

Parameters:
Name Type Attributes Default Description
align string <optional>
 center

Alignment of the popup, center, force-left, force-right, backwards or forwards.
Source:

setAnchorEdge(edge)

Change which edge the anchor appears on.

Parameters:
Name Type Description
edge string

'top', 'bottom', 'start' or 'end'
Source:

setAutoFlip(autoFlip)

Set popup auto-flipping.

Parameters:
Name Type Description
autoFlip boolean

Whether to automatically switch the popup's position between 'above' and 'below', or between 'before' and 'after', if there is not enough space in the desired direction to display the popup without clipping
Source:

setData(data)

Set element data.

Parameters:
Name Type Description
data Mixed

Element data
Inherited From:
Source:

setDisabled(disabled)

Set the 'disabled' state of the widget.

When a widget is disabled, it cannot be used and its appearance is updated to reflect this state.

Parameters:
Name Type Description
disabled boolean

Disable widget
Inherited From:
Source:

setElementGroup(group)

Set group element is in.

Parameters:
Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited From:
Source:

setElementId(id)

Set the element has an 'id' attribute.

Parameters:
Name Type Description
id string
Inherited From:
Source:

setPosition(position)

Change the positioning of the popup.

Parameters:
Name Type Description
position string

'above', 'below', 'before' or 'after'
Source:

setSize(width, height, transitionopt)

Set the size of the popup.

Changing the size may also change the popup's position depending on the alignment.

Parameters:
Name Type Attributes Default Description
width number

Width in pixels
height number

Height in pixels
transition boolean <optional>
 false

Use a smooth transition
Source:

simulateLabelClick()

Simulate the behavior of clicking on a label (a HTML <label> element) bound to this input. HTML only allows <label> to act on specific "labelable" elements; complex widgets might need to override this method to provide intuitive, accessible behavior.

By default, this does nothing. OO.ui.mixin.TabIndexedElement overrides it for focusable widgets. Individual widgets may override it too.

This method is called by OO.ui.LabelWidget and OO.ui.FieldLayout. It should not be called directly.

Inherited From:
Source:

supports(methods) → {boolean}

Check if element supports one or more methods.

Parameters:
Name Type Description
methods string | Array.<string>

Method or list of methods to check
Inherited From:
Source:
Returns:

All methods are supported

Type
boolean

toggle(showopt)

Toggle visibility of an element.

Parameters:
Name Type Attributes Description
show boolean <optional>

Make element visible, omit to toggle visibility
Overrides:
Source:
Fires:
  • event:visible

toggleAnchor(showopt)

Show, hide, or toggle the visibility of the anchor.

Parameters:
Name Type Attributes Description
show boolean <optional>

Show anchor, omit to toggle
Source:

updateDimensions(transitionopt)

Update the size and position.

Only use this to keep the popup properly anchored. Use #setSize to change the size, and this will be called automatically.

Parameters:
Name Type Attributes Default Description
transition boolean <optional>
 false

Use a smooth transition
Source:

updateDisabled()

Update the disabled state, in case of changes in parent widget.

Inherited From:
Source:

updateThemeClasses()

Update the theme-provided classes.

Inherited From:
Source: