Expand all

OO.ui.ActionFieldLayout

Extends

Constructor

new OO.ui.ActionFieldLayout(fieldWidget, buttonWidget, config) #

ActionFieldLayouts are used with OO.ui.FieldsetLayout. The layout consists of a field-widget, a button, and an optional label and/or help text. The field-widget (e.g., a TextInputWidget), is required and is specified before any optional configuration settings.

Labels can be aligned in one of four ways:

  • left: The label is placed before the field-widget and aligned with the left margin. A left-alignment is used for forms with many fields.
  • right: The label is placed before the field-widget and aligned to the right margin. A right-alignment is used for long but familiar forms which users tab through, verifying the current field with a quick glance at the label.
  • top: The label is placed above the field-widget. A top-alignment is used for brief forms that users fill out from top to bottom.
  • inline: The label is placed after the field-widget and aligned to the left. An inline-alignment is best used with checkboxes or radio buttons.

Help text is accessed via a help icon that appears in the upper right corner of the rendered field layout when help text is specified.

Example

// Example of an ActionFieldLayout
    const actionFieldLayout = new OO.ui.ActionFieldLayout(
        new OO.ui.TextInputWidget( {
            placeholder: 'Field widget'
        } ),
        new OO.ui.ButtonWidget( {
            label: 'Button'
        } ),
        {
            label: 'An ActionFieldLayout. This label is aligned top',
            align: 'top',
            help: 'This is help text'
        }
    );

    $( document.body ).append( actionFieldLayout.$element );

Parameters:

Name Type Description
fieldWidget OO.ui.Widget

Field widget
buttonWidget OO.ui.ButtonWidget

Button widget
config Object
Source:
ActionFieldLayouts are used with OO.ui.FieldsetLayout.

Properties

label #

The label text. The label can be specified as a plaintext string, a function that will produce a string (will be resolved on construction time), or null for no label. The static value will be overridden if a label is specified with the #label config option.

Properties:

Type Description
string | function | null
Inherited from:
Mixes in:
Source:
The label text.

title #

The title text, a function that returns text, or null for no title. The value of the static property is overridden if the #title config option is used.

If the element has a default title (e.g. <input type=file>), null will allow that title to be shown. Use empty string to suppress it.

Properties:

Type Description
string | function | null
Inherited from:
Mixes in:
Source:
The title text, a function that returns text, or null for no title.

Methods

formatTitleWithAccessKey(title) → {string}protected #

Include information about the widget's accessKey in our title. TitledElement calls this method. (This is a bit of a hack.)

Parameters:

Name Type Description
title string

Tooltip label for 'title' attribute
Inherited from:
Source:

Returns:

Type
string
Include information about the widget's accessKey in our title.

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Inherited from:
Source:

Returns:

Closest scrollable container

Type
HTMLElement
Get closest scrollable container.

getData() → {any} #

Get element data.

Inherited from:
Source:

Returns:

Element data

Type
any
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Inherited from:
Source:

Returns:

Document object

Type
HTMLDocument
Get the DOM document.

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
Get group element is in.

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

Ensure that the element has an 'id' attribute, setting it to an unique value if it's missing, and return its value.

getElementWindow() → {Window} #

Get the DOM window.

Inherited from:
Source:

Returns:

Window object

Type
Window
Get the DOM window.

getField() → {OO.ui.Widget} #

Get the widget contained by the field.

Inherited from:
Source:

Returns:

Field widget

Type
OO.ui.Widget
Get the widget contained by the field.

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
Get the HTML tag name.

highlightQuery(text, query, [compare], [combineMarks]) → {jQuery} #

Highlight the first occurrence of the query in the given text

Parameters:

Name Type Attributes Default Description
text string

Text
query string

Query to find
compare function optional

Optional string comparator, e.g. Intl.Collator().compare
combineMarks boolean optional
 false

Pull combining marks into highlighted text
Inherited from:
Mixes in:
Source:

Returns:

Text with the first match of the query sub-string wrapped in highlighted span

Type
jQuery
Highlight the first occurrence of the query in the given text

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Inherited from:
Source:

Returns:

The element is attached to the DOM

Type
boolean
Check if the element is attached to the DOM

isFieldInline() → {boolean} #

Return true if the given field widget can be used with 'inline' alignment (see #setAlignment). Return false if it can't or if this can't be determined.

Inherited from:
Source:

Returns:

Type
boolean

Return true if the given field widget can be used with 'inline' alignment (see #setAlignment).

isVisible() → {boolean} #

Check if element is visible.

Inherited from:
Source:

Returns:

element is visible

Type
boolean
Check if element is visible.

makeMessage(kind, text) → {jQuery}protected #

Parameters:

Name Type Description
kind string

'error' or 'notice'
text string | OO.ui.HtmlSnippet
Inherited from:
Source:

Returns:

Type
jQuery

onLabelClick(event) #

Handle click events on the field label, or inline help

Parameters:

Name Type Description
event jQuery.Event
Inherited from:
Source:
Handle click events on the field label, or inline help

resetScroll() → {OO.ui.Layout}chainable #

Reset scroll offsets

Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.Layout
Reset scroll offsets

restorePreInfuseState(state)protected #

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:
Restore the pre-infusion dynamic state for this widget.

scrollElementIntoView([config]) → {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
Scroll element into view.

setData(data) → {OO.ui.Element}chainable #

Set element data.

Parameters:

Name Type Description
data any

Element data
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set element data.

setElementGroup(group) → {OO.ui.Element}chainable #

Set group element is in.

Parameters:

Name Type Description
group OO.ui.mixin.GroupElement | null

Group element, null if none
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set group element is in.

setElementId(id) → {OO.ui.Element}chainable #

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element
Set the element has an 'id' attribute.

setErrors(errors) → {OO.ui.BookletLayout}chainable #

Set the list of error messages.

Parameters:

Name Type Description
errors Array

Error messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of error messages.

setNotices(notices) → {OO.ui.BookletLayout}chainable #

Set the list of notice messages.

Parameters:

Name Type Description
notices Array

Notices about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of notice messages.

setSuccess(successMessages) → {OO.ui.BookletLayout}chainable #

Set the list of success messages.

Parameters:

Name Type Description
successMessages Array

Success messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of success messages.

setWarnings(warnings) → {OO.ui.BookletLayout}chainable #

Set the list of warning messages.

Parameters:

Name Type Description
warnings Array

Warning messages about the widget, which will be displayed below the widget. The array may contain strings or OO.ui.HtmlSnippet instances.
Inherited from:
Source:

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Set the list of warning messages.

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
Check if element supports one or more methods.

toggle([show]) → {OO.ui.Element}chainable #

Toggle visibility of an element.

Parameters:

Name Type Attributes Description
show boolean optional

Make element visible, omit to toggle visibility
Inherited from:
Source:

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Toggle visibility of an element.

updateThemeClasses() #

Update the theme-provided classes.

This is called in element mixins and widget classes any time state changes. Updating is debounced, minimizing overhead of changing multiple attributes and guaranteeing that theme updates do not occur within an element's constructor

Inherited from:
Source:
Update the theme-provided classes.