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 |
(static) MouseButtons
Constants for MouseEvent.which
Properties:
| Type | Description |
|---|---|
| Object |
(static) now
A (possibly faster) way to get the current timestamp as an integer
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 |
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 |
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 |
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 |
Returns:
Focusable child, or an empty jQuery object if none found
- Type
- jQuery
(static) generateElementId() → {string}
Generate a unique ID for element
Returns:
ID
- Type
- string
(static) getDefaultOverlay() → {jQuery}
Get the default overlay, which is used by various widgets when they are passed $overlay: true.
See
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 |
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.
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.
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. |
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 |
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.
Returns:
Use is on a mobile device
- Type
- boolean
(static) isSafeUrl(url) → {boolean}
Parameters:
| Name | Type | Description |
|---|---|---|
url |
string |
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 follows.
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
key |
string | Message key |
|
params |
Mixed |
<optional> <repeatable> |
Message parameters |
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.
// OOjs UI 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
|
- 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 |
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 |
Returns:
Throttled function
- Type
- function
(static) warnDeprecation(message)
Puts a console warning with provided message.
Parameters:
| Name | Type | Description |
|---|---|---|
message |
string | Message |