Expand all

OO.ui

Namespace for all classes, static methods and static properties.

Namespaces

mixin
Namespace for OOUI mixins.

Classes

ActionFieldLayout
ActionFieldLayouts are used with OO.ui.FieldsetLayout.
ActionSet

ActionSets manage the behavior of the action widgets that comprise them.

ActionWidget
An ActionWidget is a button widget that executes an action.
ApexTheme
BarToolGroup

BarToolGroups are one of three types of toolgroups that are used to create toolbars (the other types of groups are MenuToolGroup and ListToolGroup).

BlankTheme
BookletLayout

BookletLayouts contain page layouts as well as an outline that allows users to easily navigate through the pages and select which one to display.

ButtonGroupWidget

A ButtonGroupWidget groups related buttons and is used together with OO.ui.ButtonWidget and its subclasses.

ButtonInputWidget

ButtonInputWidget is used to submit HTML forms and is intended to be used within a OO.ui.FormLayout.

ButtonMenuSelectWidget
ButtonMenuSelectWidgets launch a menu of options created with OO.ui.MenuOptionWidget.
ButtonOptionWidget

ButtonOptionWidget is a special type of button element that can be selected and configured with data.

ButtonSelectWidget

ButtonSelectWidget is a select widget that contains button options and is used together with OO.ui.ButtonOptionWidget.

ButtonWidget
ButtonWidget is a generic widget for buttons.
CheckboxInputWidget
CheckboxInputWidgets, like HTML checkboxes, can be selected and/or configured with a value.
CheckboxMultioptionWidget
CheckboxMultioptionWidget is an option widget that looks like a checkbox.
CheckboxMultiselectInputWidget

CheckboxMultiselectInputWidget is a CheckboxMultiselectWidget intended to be used within a HTML form, such as a OO.ui.FormLayout.

CheckboxMultiselectWidget

CheckboxMultiselectWidget is a multiselect widget that contains checkboxes and is used together with OO.ui.CheckboxMultioptionWidget.

ComboBoxInputWidget

ComboBoxInputWidgets combine a text input (where a value can be entered manually) and a menu of options (from which a value can be chosen instead).

CopyTextLayout

CopyTextLayout is an action field layout containing some readonly text and a button to copy it to the clipboard.

DecoratedOptionWidget

DecoratedOptionWidgets are options that can be configured with an icon and/or indicator.

Dialog
The Dialog class serves as the base class for the other types of dialogs.
DropdownInputWidget

DropdownInputWidget is a DropdownWidget intended to be used within an HTML form, such as a OO.ui.FormLayout.

DropdownWidget

DropdownWidgets are not menus themselves, rather they contain a menu of options created with OO.ui.MenuOptionWidget.

Element

Each Element represents a rendering in the DOM—a button or an icon, for example, or anything that is visible to a user.

Error

Errors contain a required message (either a string or jQuery selection) that is used to describe what went wrong in a process.

FieldLayout
FieldLayouts are used with OO.ui.FieldsetLayout.
FieldsetLayout

FieldsetLayouts are composed of one or more FieldLayouts, which each contain an individual widget and, optionally, a label.

FormLayout

FormLayouts are used to wrap FieldsetLayouts when you intend to use browser-based form submission for the fields instead of handling them in JavaScript.

HiddenInputWidget
Data widget intended for creating <input type="hidden"> inputs.
HorizontalLayout

HorizontalLayout arranges its contents in a single line (using display: inline-block for its items), with small margins between them.

HtmlSnippet

Wraps an HTML snippet for use with configuration values which default to strings.

IconWidget
IconWidget is a generic widget for icons.
IndexLayout

IndexLayouts contain tab panel layouts as well as tabs that allow users to easily navigate through the tab panels and select which one to display.

IndicatorWidget

IndicatorWidgets create indicators, which are small graphics that are generally used to draw attention to the status of an item or to clarify the function within a control.

InputWidget

InputWidget is the base class for all input widgets, which include text inputs, checkbox inputs, radio inputs, and button inputs.

LabelWidget
LabelWidgets help identify the function of interface elements.
Layout

Layouts are containers for elements and are used to arrange other widgets of arbitrary type in a way that is centrally controlled and can be updated dynamically.

ListToolGroup

ListToolGroups are one of three types of toolgroups that are used to create toolbars (the other types of groups are MenuToolGroup and BarToolGroup).

MenuLayout
MenuLayouts combine a menu and a content panel.
MenuOptionWidget
MenuOptionWidget is an option widget that looks like a menu item.
MenuSectionOptionWidget

MenuSectionOptionWidgets are used inside menu select widgets to group one or more related menu options.

MenuSelectWidget

MenuSelectWidget is a select widget that contains options and is used together with OO.ui.MenuOptionWidget.

MenuTagMultiselectWidget

MenuTagMultiselectWidget is a OO.ui.TagMultiselectWidget intended to use a menu of selectable options.

MenuToolGroup

MenuToolGroups are one of three types of toolgroups that are used to create toolbars (the other types of groups are BarToolGroup and ListToolGroup).

MessageDialog
MessageDialogs display a confirmation or alert message.
MessageWidget

MessageWidget produces a visual component for sending a notice to the user with an icon and distinct design noting its purpose.

MultilineTextInputWidget

MultilineTextInputWidgets, like HTML textareas, are featuring customization options to configure number of rows visible.

MultioptionWidget
MultioptionWidgets are special elements that can be selected and configured with data.
MultiselectWidget
MultiselectWidget allows selecting multiple options from a list.
NumberInputWidget

NumberInputWidgets combine a text input (where a value can be entered manually) and two button widgets (to adjust the value in increments) to allow the user to enter a number.

OptionWidget
OptionWidgets are special elements that can be selected and configured with data.
OutlineControlsWidget

OutlineControlsWidget is a set of controls for an outline select widget.

OutlineOptionWidget
OutlineOptionWidget is an item in an OutlineSelectWidget.
OutlineSelectWidget

OutlineSelectWidget is a structured list that contains outline options A set of controls can be provided with an outline controls widget.

PageLayout

PageLayouts are used within booklet layouts to create pages that users can select and display from the booklet's optional outline navigation.

PanelLayout
PanelLayouts expand to cover the entire area of their parent.
PopupButtonWidget

PopupButtonWidgets toggle the visibility of a contained PopupWidget, which is used to display additional information or options.

PopupTagMultiselectWidget

PopupTagMultiselectWidget is a OO.ui.TagMultiselectWidget intended to use a popup.

PopupTool
Popup tools open a popup window when they are selected from the toolbar.
PopupToolGroup

PopupToolGroup is an abstract base class used by both MenuToolGroup and ListToolGroup to provide a popup (an overlaid menu or list of tools with an optional icon and label).

PopupWidget
PopupWidget is a container for content.
Process
A Process is a list of steps that are called in sequence.
ProcessDialog

ProcessDialog windows encapsulate a process and all of the code necessary to complete it.

ProgressBarWidget

Progress bars visually display the status of an operation, such as a download, and can be either determinate or indeterminate:

  • determinate process bars show the percent of an operation that is complete.

RadioInputWidget
RadioInputWidget creates a single radio button.
RadioOptionWidget
RadioOptionWidget is an option widget that looks like a radio button.
RadioSelectInputWidget

RadioSelectInputWidget is a RadioSelectWidget intended to be used within an HTML form, such as a OO.ui.FormLayout.

RadioSelectWidget

RadioSelectWidget is a select widget that contains radio options and is used together with OO.ui.RadioOptionWidget.

SearchInputWidget

SearchInputWidgets are TextInputWidgets with type="search" assigned and feature a 'search' icon as well as a functional 'clear' indicator by default.

SearchWidget

SearchWidgets combine a text input field, where users can type a search query, and a menu of search results, which is displayed beneath the query field.

SelectFileInputWidget
SelectFileInputWidgets allow for selecting files, using .
SelectWidget
A SelectWidget is of a generic selection of options.
StackLayout
StackLayouts contain a series of panel layouts.
TabOptionWidget
TabOptionWidget is an item in a TabSelectWidget.
TabPanelLayout

TabPanelLayouts are used within index layouts to create tab panels that users can select and display from the index's optional tab navigation.

TabSelectWidget

TabSelectWidget is a list that contains tab options

Currently, this class is only used by index layouts.

TagItemWidget

TagItemWidgets are used within a TagMultiselectWidget to display the selected items.

TagMultiselectWidget

A basic tag multiselect widget, similar in concept to combo box widget that allows the user to add multiple values that are displayed in a tag area.

TextInputWidget

TextInputWidgets, like HTML text inputs, can be configured with options that customize the size of the field as well as its presentation.

Theme
Theme logic.
ToggleButtonWidget

ToggleButtons are buttons that have a state (‘on’ or ‘off’) that is represented by a Boolean value.

ToggleSwitchWidget
ToggleSwitches are switches that slide on and off.
ToggleWidget
ToggleWidget implements basic behavior of widgets with an on/off state.
Tool

Tools, together with toolgroups, constitute toolbars.

Toolbar

Toolbars are complex interface components that permit users to easily access a variety of tools (e.g., formatting commands) and actions, which are additional commands that are part of the toolbar, but not configured as tools.

ToolFactory
A ToolFactory creates tools on demand.
ToolGroup

ToolGroups are collections of tools that are used in a toolbar.

ToolGroupFactory
ToolGroupFactories create toolgroups on demand.
ToolGroupTool

A ToolGroupTool is a special sort of tool that can contain other tools and toolgroups.

Widget

Widgets are compositions of one or more OOUI elements that users can both view and interact with.

WikimediaUITheme
Window
A window is a container for elements that are in a child frame.
WindowInstance

A window instance represents the life cycle for one single opening of a window until its closing.

WindowManager

Window managers are used to open and close windows and control their presentation.

Properties

Keysstatic #

Properties:

Type Description
Object
Source:

MouseButtonsstatic #

Constants for MouseEvent.which

Properties:

Type Description
Object
Source:
Constants for MouseEvent.which

Methods

alert(text, [options]) → {jQuery.Promise}static #

Display a quick modal alert dialog, using a OO.ui.MessageDialog. While the dialog is open, the rest of the page will be dimmed out and the user won't be able to interact with it. The dialog has only one action button, labelled "OK", clicking it will simply close the dialog.

A window manager is created automatically when this function is called for the first time.

Example

OO.ui.alert( 'Something happened!' ).done( function () {
        console.log( 'User closed the dialog.' );
    } );

    OO.ui.alert( 'Something larger happened!', { size: 'large' } );

Parameters:

Name Type Attributes Description
text jQuery | string | function

Message text to display

options Object optional

Additional options, see OO.ui.MessageDialog#getSetupProcess

Source:

Returns:

Promise resolved when the user closes the dialog

Type
jQuery.Promise
Display a quick modal alert dialog, using a OO.ui.MessageDialog.

confirm(text, [options]) → {jQuery.Promise}static #

Display a quick modal confirmation dialog, using a OO.ui.MessageDialog. While the dialog is open, the rest of the page will be dimmed out and the user won't be able to interact with it. The dialog has two action buttons, one to confirm an operation (labelled "OK") and one to cancel it (labelled "Cancel").

A window manager is created automatically when this function is called for the first time.

Example

OO.ui.confirm( 'Are you sure?' ).done( function ( confirmed ) {
        if ( confirmed ) {
            console.log( 'User clicked "OK"!' );
        } else {
            console.log( 'User clicked "Cancel" or closed the dialog.' );
        }
    } );

Parameters:

Name Type Attributes Description
text jQuery | string | function

Message text to display

options Object optional

Additional options, see OO.ui.MessageDialog#getSetupProcess

Source:

Returns:

Promise resolved when the user closes the dialog. If the user chose to confirm, the promise will resolve to boolean true; otherwise, it will resolve to boolean false.

Type
jQuery.Promise
Display a quick modal confirmation dialog, using a OO.ui.MessageDialog.

contains(containers, contained, [matchContainers]) → {boolean}static #

Check if a node is contained within another node.

Similar to jQuery#contains except a list of containers can be supplied and a boolean argument allows you to include the container in the match list

Parameters:

Name Type Attributes Description
containers HTMLElement | Array.<HTMLElement>

Container node(s) to search in

contained HTMLElement

Node to find

matchContainers boolean optional

Include the container(s) in the list of nodes to match, otherwise only match descendants

Source:

Returns:

The node is in the list of target nodes

Type
boolean
Check if a node is contained within another node.

debounce(func, [wait], [immediate]) → {function}static #

Return a function, that, as long as it continues to be invoked, will not be triggered. The function will be called after it stops being called for N milliseconds. If immediate is passed, trigger the function on the leading edge, instead of the trailing.

Ported from: http://underscorejs.org/underscore.js

Parameters:

Name Type Attributes Default Description
func function

Function to debounce

wait number optional
0

Wait period in milliseconds

immediate boolean optional

Trigger on leading edge

Source:

Returns:

Debounced function

Type
function

Return a function, that, as long as it continues to be invoked, will not be triggered.

deferMsg(key, […params]) → {function}static #

Package a message and arguments for deferred resolution.

Use this when you are statically specifying a message and the message may not yet be present.

Parameters:

Name Type Attributes Description
key string

Message key

params any optional
repeatable

Message parameters

Source:

Returns:

Function that returns the resolved message when executed

Type
function
Package a message and arguments for deferred resolution.

findFocusable($container, [backwards]) → {jQuery}static #

Find a focusable child.

Parameters:

Name Type Attributes Default Description
$container jQuery

Container to search in

backwards boolean optional
false

Search backwards

Source:

Returns:

Focusable child, or an empty jQuery object if none found

Type
jQuery
Find a focusable child.

generateElementId() → {string}static #

Generate a unique ID for element

Source:

Returns:

ID

Type
string
Generate a unique ID for element

getDefaultOverlay() → {jQuery}static #

Get the default overlay, which is used by various widgets when they are passed $overlay: true. See https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays.

Source:

Returns:

Default overlay node

Type
jQuery
Get the default overlay, which is used by various widgets when they are passed $overlay: true.

getLocalValue(obj, [lang], [fallback]) → {any}static #

Get a value in an object keyed by language code.

Parameters:

Name Type Attributes Description
obj Object.<string, any>

Object keyed by language code

lang string | null optional

Language code, if omitted or null defaults to any user language

fallback string optional

Fallback code, used if no matching language can be found

Source:

Returns:

Local value

Type
any
Get a value in an object keyed by language code.

getTeleportTarget() → {HTMLElement}static #

Get the element where elements that are positioned outside of normal flow are inserted, for example dialogs and dropdown menus.

This is meant to be overridden if the site needs to style this element in some way (e.g. setting font size), and doesn't want to style the whole document.

Source:

Returns:

Type
HTMLElement

Get the element where elements that are positioned outside of normal flow are inserted, for example dialogs and dropdown menus.

getUserLanguages() → {Array.<string>}static #

Get the user's language and any fallback languages.

These language codes are used to localize user interface elements in the user's language.

In environments that provide a localization system, this function should be overridden to return the user's language(s). The default implementation returns English (en) only.

Source:

Returns:

Language codes, in descending order of priority

Type
Array.<string>
Get the user's language and any fallback languages.

getViewportSpacing() → {Object}static #

Get the additional spacing that should be taken into account when displaying elements that are clipped to the viewport, e.g. dropdown menus and popups. This is meant to be overridden to avoid such menus overlapping any fixed headers/toolbars/navigation used by the site.

Source:

Returns:

Object with the properties 'top', 'right', 'bottom', 'left', each representing the extra spacing from that edge of viewport (in pixels)

Type
Object

Get the additional spacing that should be taken into account when displaying elements that are clipped to the viewport, e.g.

infuse(node, [config]) → {OO.ui.Element}static #

Reconstitute a JavaScript object corresponding to a widget created by the PHP implementation.

This is an alias for OO.ui.Element.static.infuse().

Parameters:

Name Type Attributes Description
node string | HTMLElement | jQuery

A single node for the widget to infuse. String must be a selector (deprecated).

config Object optional

Configuration options

Source:

Returns:

The OO.ui.Element corresponding to this (infusable) document node.

Type
OO.ui.Element

Reconstitute a JavaScript object corresponding to a widget created by the PHP implementation.

isFocusableElement($element) → {boolean}static #

Check if an element is focusable. Inspired by :focusable in jQueryUI v1.11.4 - 2015-04-14

Parameters:

Name Type Description
$element jQuery

Element to test

Source:

Returns:

Element is focusable

Type
boolean
Check if an element is focusable.

isMobile() → {boolean}static #

Check if the user has a 'mobile' device.

For our purposes this means the user is primarily using an on-screen keyboard, touch input instead of a mouse and may have a physically small display.

It is left up to implementors to decide how to compute this so the default implementation always returns false.

Source:

Returns:

User is on a mobile device

Type
boolean
Check if the user has a 'mobile' device.

isSafeUrl(url) → {boolean}static #

Parameters:

Name Type Description
url string
Source:

Returns:

Type
boolean

msg(key, […params]) → {string}static #

Get a localized message.

After the message key, message parameters may optionally be passed. In the default implementation, any occurrences of $1 are replaced with the first parameter, $2 with the second parameter, etc. Alternative implementations of OO.ui.msg may use any substitution system they like, as long as they support unnamed, ordered message parameters.

In environments that provide a localization system, this function should be overridden to return the message translated in the user's language. The default implementation always returns English messages. An example of doing this with jQuery.i18n follows.

Example

const messagePath = 'oojs-ui/dist/i18n/',
        languages = [ $.i18n().locale, 'ur', 'en' ],
        languageMap = {};

    for ( let i = 0, iLen = languages.length; i < iLen; i++ ) {
        languageMap[ languages[ i ] ] = messagePath + languages[ i ].toLowerCase() + '.json';
    }

    $.i18n().load( languageMap ).done( function() {
        // Replace the built-in `msg` only once we've loaded the internationalization.
        // OOUI uses `OO.ui.deferMsg` for all initially-loaded messages. So long as
        // you put off creating any widgets until this promise is complete, no English
        // will be displayed.
        OO.ui.msg = $.i18n;

        // A button displaying "OK" in the default locale
        const button = new OO.ui.ButtonWidget( {
            label: OO.ui.msg( 'ooui-dialog-message-accept' ),
            icon: 'check'
        } );
        $( document.body ).append( button.$element );

        // A button displaying "OK" in Urdu
        $.i18n().locale = 'ur';
        button = new OO.ui.ButtonWidget( {
            label: OO.ui.msg( 'ooui-dialog-message-accept' ),
            icon: 'check'
        } );
        $( document.body ).append( button.$element );
    } );

Parameters:

Name Type Attributes Description
key string

Message key

params any optional
repeatable

Message parameters

Source:

Returns:

Translated message with parameters substituted

Type
string
Get a localized message.

prompt(text, [options]) → {jQuery.Promise}static #

Display a quick modal prompt dialog, using a OO.ui.MessageDialog. While the dialog is open, the rest of the page will be dimmed out and the user won't be able to interact with it. The dialog has a text input widget and two action buttons, one to confirm an operation (labelled "OK") and one to cancel it (labelled "Cancel").

A window manager is created automatically when this function is called for the first time.

Example

OO.ui.prompt( 'Choose a line to go to', {
        textInput: { placeholder: 'Line number' }
    } ).done( function ( result ) {
        if ( result !== null ) {
            console.log( 'User typed "' + result + '" then clicked "OK".' );
        } else {
            console.log( 'User clicked "Cancel" or closed the dialog.' );
        }
    } );

Parameters:

Name Type Attributes Description
text jQuery | string | function

Message text to display

options Object optional

Additional options, see OO.ui.MessageDialog#getSetupProcess

Properties:
Name Type Attributes Description
textInput Object optional

Additional options for text input widget, see OO.ui.TextInputWidget

Source:

Returns:

Promise resolved when the user closes the dialog. If the user chose to confirm, the promise will resolve with the value of the text input widget; otherwise, it will resolve to null.

Type
jQuery.Promise
Display a quick modal prompt dialog, using a OO.ui.MessageDialog.

resolveMsg(msg) → {string|any}static #

Resolve a message.

If the message is a function it will be executed, otherwise it will pass through directly.

Parameters:

Name Type Description
msg function | string | any
Source:

Returns:

Resolved message when there was something to resolve, pass through otherwise

Type
string | any
Resolve a message.

throttle(func, wait) → {function}static #

Returns a function, that, when invoked, will only be triggered at most once during a given window of time. If called again during that window, it will wait until the window ends and then trigger itself again.

As it's not knowable to the caller whether the function will actually run when the wrapper is called, return values from the function are entirely discarded.

Parameters:

Name Type Description
func function

Function to throttle

wait number

Throttle window length, in milliseconds

Source:

Returns:

Throttled function

Type
function

Returns a function, that, when invoked, will only be triggered at most once during a given window of time.

warnDeprecation(message)static #

Puts a console warning with provided message.

Parameters:

Name Type Description
message string

Message

Source:
Puts a console warning with provided message.