Class: PopupWidget

.ui.PopupWidget(configopt)

new PopupWidget(configopt)

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 [OOUI 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 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 [OOUI docs on MediaWiki][3] for an example. [3]: https://www.mediawiki.org/wiki/OOUI/Widgets/Popups#containerExample
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 [OOUI documentation on MediaWiki][2] for an example. [2]: https://www.mediawiki.org/wiki/OOUI/Widgets/Popups#autocloseExample
head boolean <optional>
false Show a popup header that contains a #label (if specified) and close button.
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/OOUI/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 `
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 `
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: