Class: ui

ui()

new ui()

Namespace for all classes, static methods and static properties.
Source:

Classes

ActionFieldLayout
ActionSet
ActionWidget
ApexTheme
BarToolGroup
BlankTheme
BookletLayout
ButtonGroupWidget
ButtonInputWidget
ButtonOptionWidget
ButtonSelectWidget
ButtonWidget
CapsuleItemWidget
CapsuleMultiselectWidget
CheckboxInputWidget
CheckboxMultioptionWidget
CheckboxMultiselectInputWidget
CheckboxMultiselectWidget
ComboBoxInputWidget
DecoratedOptionWidget
Dialog
DropdownInputWidget
DropdownWidget
Element
Error
FieldLayout
FieldsetLayout
FormLayout
HiddenInputWidget
HorizontalLayout
HtmlSnippet
IconWidget
IndexLayout
IndicatorWidget
InputWidget
LabelWidget
Layout
ListToolGroup
MenuLayout
MenuOptionWidget
MenuSectionOptionWidget
MenuSelectWidget
MenuTagMultiselectWidget
MenuToolGroup
MessageDialog
mixin
MultilineTextInputWidget
MultioptionWidget
MultiselectWidget
NumberInputWidget
OptionWidget
OutlineControlsWidget
OutlineOptionWidget
OutlineSelectWidget
PageLayout
PanelLayout
PopupButtonWidget
PopupTagMultiselectWidget
PopupTool
PopupToolGroup
PopupWidget
Process
ProcessDialog
ProgressBarWidget
RadioInputWidget
RadioOptionWidget
RadioSelectInputWidget
RadioSelectWidget
SearchInputWidget
SearchWidget
SelectFileWidget
SelectWidget
StackLayout
TabOptionWidget
TabPanelLayout
TabSelectWidget
TagItemWidget
TagMultiselectWidget
TextInputWidget
Theme
ToggleButtonWidget
ToggleSwitchWidget
ToggleWidget
Tool
Toolbar
ToolFactory
ToolGroup
ToolGroupFactory
ToolGroupTool
Widget
WikimediaUITheme
Window
WindowInstance
WindowManager

Members

(static) Keys

Properties:
Type Description
Object
Source:

(static) MouseButtons

Constants for MouseEvent.which
Properties:
Type Description
Object
Source:

(static) now

A (possibly faster) way to get the current timestamp as an integer
Source:

Methods

(static) alert(text, optionsopt) → {jQuery.Promise}

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.
Parameters:
Name Type Attributes Description
text jQuery | string 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
Example
OO.ui.alert( 'Something happened!' ).done( function () {
        console.log( 'User closed the dialog.' );
    } );

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

(static) confirm(text, optionsopt) → {jQuery.Promise}

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.
Parameters:
Name Type Attributes Description
text jQuery | string 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
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.' );
        }
    } );

(static) contains(containers, contained, matchContainersopt) → {boolean}

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

(static) debounce(func, waitopt, immediateopt) → {function}

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

(static) deferMsg(key, …paramsopt) → {function}

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 Mixed <optional>
<repeatable>
Message parameters
Source:
Returns:
Function that returns the resolved message when executed
Type
function

(static) findFocusable($container, backwardsopt) → {jQuery}

Find a focusable child
Parameters:
Name Type Attributes Description
$container jQuery Container to search in
backwards boolean <optional>
Search backwards
Source:
Returns:
Focusable child, or an empty jQuery object if none found
Type
jQuery

(static) generateElementId() → {string}

Generate a unique ID for element
Source:
Returns:
ID
Type
string

(static) getDefaultOverlay() → {jQuery}

Get the default overlay, which is used by various widgets when they are passed `$overlay: true`. See .
Source:
Returns:
Default overlay node
Type
jQuery

(static) getLocalValue(obj, langopt, fallbackopt) → {Mixed}

Get a value in an object keyed by language code.
Parameters:
Name Type Attributes Description
obj Object.<string, Mixed> 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
Mixed

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

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>

(static) getViewportSpacing() → {Object}

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

(static) infuse(idOrNode) → {OO.ui.Element}

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 Description
idOrNode string | HTMLElement | jQuery A DOM id (if a string) or node for the widget to infuse.
Source:
Returns:
The `OO.ui.Element` corresponding to this (infusable) document node.
Type
OO.ui.Element

(static) isFocusableElement($element) → {boolean}

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

(static) isMobile() → {boolean}

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:
Use is on a mobile device
Type
boolean

(static) isSafeUrl(url) → {boolean}

Parameters:
Name Type Description
url string
Source:
Returns:
Type
boolean

(static) msg(key, …paramsopt) → {string}

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](https://github.com/wikimedia/jquery.i18n) follows.
Parameters:
Name Type Attributes Description
key string Message key
params Mixed <optional>
<repeatable>
Message parameters
Source:
Returns:
Translated message with parameters substituted
Type
string
Example
var i, iLen, button,
        messagePath = 'oojs-ui/dist/i18n/',
        languages = [ $.i18n().locale, 'ur', 'en' ],
        languageMap = {};

    for ( 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
        button = new OO.ui.ButtonWidget( {
            label: OO.ui.msg( 'ooui-dialog-message-accept' ),
            icon: 'check'
        } );
        $( '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'
        } );
        $( 'body' ).append( button.$element );
    } );

(static) prompt(text, optionsopt) → {jQuery.Promise}

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.
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:
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
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.' );
        }
    } );

(static) resolveMsg(msg) → {string}

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 Deferred message, or message text
Source:
Returns:
Resolved message
Type
string

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

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

(static) warnDeprecation(message)

Puts a console warning with provided message.
Parameters:
Name Type Description
message string Message
Source:

ui()

new ui()

Source:

Classes

ActionFieldLayout
ActionSet
ActionWidget
ApexTheme
BarToolGroup
BlankTheme
BookletLayout
ButtonGroupWidget
ButtonInputWidget
ButtonOptionWidget
ButtonSelectWidget
ButtonWidget
CapsuleItemWidget
CapsuleMultiselectWidget
CheckboxInputWidget
CheckboxMultioptionWidget
CheckboxMultiselectInputWidget
CheckboxMultiselectWidget
ComboBoxInputWidget
DecoratedOptionWidget
Dialog
DropdownInputWidget
DropdownWidget
Element
Error
FieldLayout
FieldsetLayout
FormLayout
HiddenInputWidget
HorizontalLayout
HtmlSnippet
IconWidget
IndexLayout
IndicatorWidget
InputWidget
LabelWidget
Layout
ListToolGroup
MenuLayout
MenuOptionWidget
MenuSectionOptionWidget
MenuSelectWidget
MenuTagMultiselectWidget
MenuToolGroup
MessageDialog
mixin
MultilineTextInputWidget
MultioptionWidget
MultiselectWidget
NumberInputWidget
OptionWidget
OutlineControlsWidget
OutlineOptionWidget
OutlineSelectWidget
PageLayout
PanelLayout
PopupButtonWidget
PopupTagMultiselectWidget
PopupTool
PopupToolGroup
PopupWidget
Process
ProcessDialog
ProgressBarWidget
RadioInputWidget
RadioOptionWidget
RadioSelectInputWidget
RadioSelectWidget
SearchInputWidget
SearchWidget
SelectFileWidget
SelectWidget
StackLayout
TabOptionWidget
TabPanelLayout
TabSelectWidget
TagItemWidget
TagMultiselectWidget
TextInputWidget
Theme
ToggleButtonWidget
ToggleSwitchWidget
ToggleWidget
Tool
Toolbar
ToolFactory
ToolGroup
ToolGroupFactory
ToolGroupTool
Widget
WikimediaUITheme
Window
WindowInstance
WindowManager

Members

(static) Keys

Properties:
Type Description
Object
Source:

(static) MouseButtons

Constants for MouseEvent.which
Properties:
Type Description
Object
Source:

(static) now

A (possibly faster) way to get the current timestamp as an integer
Source:

Methods

(static) alert(text, optionsopt) → {jQuery.Promise}

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.
Parameters:
Name Type Attributes Description
text jQuery | string 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
Example
OO.ui.alert( 'Something happened!' ).done( function () {
        console.log( 'User closed the dialog.' );
    } );

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

(static) confirm(text, optionsopt) → {jQuery.Promise}

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.
Parameters:
Name Type Attributes Description
text jQuery | string 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
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.' );
        }
    } );

(static) contains(containers, contained, matchContainersopt) → {boolean}

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

(static) debounce(func, waitopt, immediateopt) → {function}

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

(static) deferMsg(key, …paramsopt) → {function}

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 Mixed <optional>
<repeatable>
Message parameters
Source:
Returns:
Function that returns the resolved message when executed
Type
function

(static) findFocusable($container, backwardsopt) → {jQuery}

Find a focusable child
Parameters:
Name Type Attributes Description
$container jQuery Container to search in
backwards boolean <optional>
Search backwards
Source:
Returns:
Focusable child, or an empty jQuery object if none found
Type
jQuery

(static) generateElementId() → {string}

Generate a unique ID for element
Source:
Returns:
ID
Type
string

(static) getDefaultOverlay() → {jQuery}

Get the default overlay, which is used by various widgets when they are passed `$overlay: true`. See .
Source:
Returns:
Default overlay node
Type
jQuery

(static) getLocalValue(obj, langopt, fallbackopt) → {Mixed}

Get a value in an object keyed by language code.
Parameters:
Name Type Attributes Description
obj Object.<string, Mixed> 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
Mixed

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

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>

(static) getViewportSpacing() → {Object}

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

(static) infuse(idOrNode) → {OO.ui.Element}

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 Description
idOrNode string | HTMLElement | jQuery A DOM id (if a string) or node for the widget to infuse.
Source:
Returns:
The `OO.ui.Element` corresponding to this (infusable) document node.
Type
OO.ui.Element

(static) isFocusableElement($element) → {boolean}

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

(static) isMobile() → {boolean}

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:
Use is on a mobile device
Type
boolean

(static) isSafeUrl(url) → {boolean}

Parameters:
Name Type Description
url string
Source:
Returns:
Type
boolean

(static) msg(key, …paramsopt) → {string}

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](https://github.com/wikimedia/jquery.i18n) follows.
Parameters:
Name Type Attributes Description
key string Message key
params Mixed <optional>
<repeatable>
Message parameters
Source:
Returns:
Translated message with parameters substituted
Type
string
Example
var i, iLen, button,
        messagePath = 'oojs-ui/dist/i18n/',
        languages = [ $.i18n().locale, 'ur', 'en' ],
        languageMap = {};

    for ( 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
        button = new OO.ui.ButtonWidget( {
            label: OO.ui.msg( 'ooui-dialog-message-accept' ),
            icon: 'check'
        } );
        $( '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'
        } );
        $( 'body' ).append( button.$element );
    } );

(static) prompt(text, optionsopt) → {jQuery.Promise}

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.
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:
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
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.' );
        }
    } );

(static) resolveMsg(msg) → {string}

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 Deferred message, or message text
Source:
Returns:
Resolved message
Type
string

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

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

(static) warnDeprecation(message)

Puts a console warning with provided message.
Parameters:
Name Type Description
message string Message
Source: