Namespace: ui, OOUI, JSDoc

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:

core.js, line 13

MouseButtonsstatic #

Constants for MouseEvent.which

Properties:

Type	Description
Object

Source:

core.js, line 37

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		Message text to display
`options`	Object	optional	Additional options, see OO.ui.MessageDialog#getSetupProcess

Source:

windows.js, line 35

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		Message text to display
`options`	Object	optional	Additional options, see OO.ui.MessageDialog#getSetupProcess

Source:

windows.js, line 65

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:

core.js, line 201

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:

core.js, line 229

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:

core.js, line 402

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:

core.js, line 120

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:

core.js, line 54

Returns:

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:

core.js, line 513

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:

core.js, line 163

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:

core.js, line 503

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:

core.js, line 151

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:

core.js, line 485

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:

core.js, line 314

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:

core.js, line 66

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:

core.js, line 473

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:

core.js, line 427

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:

core.js, line 375

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

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:

windows.js, line 98

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:

core.js, line 416

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:

core.js, line 275

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:

core.js, line 255

Puts a console warning with provided message.