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

Returns:

Type
string
Inherited from:
Source:
Include information about the widget's accessKey in our title.

getClosestScrollableElementContainer() → {HTMLElement} #

Get closest scrollable container.

Returns:

Closest scrollable container

Type
HTMLElement
Inherited from:
Source:
Get closest scrollable container.

getData() → {any} #

Get element data.

Returns:

Element data

Type
any
Inherited from:
Source:
Get element data.

getElementDocument() → {HTMLDocument} #

Get the DOM document.

Returns:

Document object

Type
HTMLDocument
Inherited from:
Source:
Get the DOM document.

getElementGroup() → {OO.ui.mixin.GroupElement|null} #

Get group element is in.

Returns:

Group element, null if none

Type
OO.ui.mixin.GroupElement | null
Inherited from:
Source:
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.

Returns:

Type
string
Inherited from:
Source:

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.

Returns:

Window object

Type
Window
Inherited from:
Source:
Get the DOM window.

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

Get the widget contained by the field.

Returns:

Field widget

Type
OO.ui.Widget
Inherited from:
Source:
Get the widget contained by the field.

getTagName() → {string} #

Get the HTML tag name.

Override this method to base the result on instance information.

Returns:

HTML tag name

Type
string
Inherited from:
Source:
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

Returns:

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

Type
jQuery
Inherited from:
Mixes in:
Source:
Highlight the first occurrence of the query in the given text

isElementAttached() → {boolean} #

Check if the element is attached to the DOM

Returns:

The element is attached to the DOM

Type
boolean
Inherited from:
Source:
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.

Returns:

Type
boolean
Inherited from:
Source:

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

isVisible() → {boolean} #

Check if element is visible.

Returns:

element is visible

Type
boolean
Inherited from:
Source:
Check if element is visible.

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

Parameters:

Name Type Description
kind string

'error' or 'notice'
text string | OO.ui.HtmlSnippet

Returns:

Type
jQuery
Inherited from:
Source:

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

Returns:

The layout, for chaining

Type
OO.ui.Layout
Inherited from:
Source:
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

Returns:

Promise which resolves when the scroll is complete

Type
jQuery.Promise
Inherited from:
Source:
Scroll element into view.

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

Set element data.

Parameters:

Name Type Description
data any

Element data

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
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

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
Set group element is in.

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

Set the element has an 'id' attribute.

Parameters:

Name Type Description
id string

Returns:

The element, for chaining

Type
OO.ui.Element
Inherited from:
Source:
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.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Inherited from:
Source:
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.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Inherited from:
Source:
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.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Inherited from:
Source:
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.

Returns:

The layout, for chaining

Type
OO.ui.BookletLayout
Inherited from:
Source:
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

Returns:

All methods are supported

Type
boolean
Inherited from:
Source:
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

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Inherited from:
Source:
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.