Expand all

OO.ui.FieldsetLayout

Extends

Constructor

new OO.ui.FieldsetLayout([config]) #

FieldsetLayouts are composed of one or more FieldLayouts, which each contain an individual widget and, optionally, a label. Each Fieldset can be configured with a label as well. For more information and examples, please see the [OOUI documentation on MediaWiki][1].

Example

// Example of a fieldset layout
    const input1 = new OO.ui.TextInputWidget( {
        placeholder: 'A text input field'
    } );

    const input2 = new OO.ui.TextInputWidget( {
        placeholder: 'A text input field'
    } );

    const fieldset = new OO.ui.FieldsetLayout( {
        label: 'Example of a fieldset layout'
    } );

    fieldset.addItems( [
        new OO.ui.FieldLayout( input1, {
            label: 'Field One'
        } ),
        new OO.ui.FieldLayout( input2, {
            label: 'Field Two'
        } )
    ] );
    $( document.body ).append( fieldset.$element );

[1]: https://www.mediawiki.org/wiki/OOUI/Layouts/Fields_and_Fieldsets

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
items Array.<OO.ui.FieldLayout> optional

An array of fields to add to the fieldset. See OO.ui.FieldLayout for more information about fields.
help string | OO.ui.HtmlSnippet optional

Help text. When help text is specified and helpInline is false, a "help" icon will appear in the upper-right corner of the rendered field; clicking it will display the text in a popup. If helpInline is true, then a subtle description will be shown after the label. For feedback messages, you are advised to use notices.
helpInline boolean optional
 false

Whether or not the help should be inline, or shown when the "help" icon is clicked.
$overlay jQuery optional

Passed to OO.ui.PopupButtonWidget for help popup, if help is given. See https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays.
Mixes in:
Source:

FieldsetLayouts are composed of one or more FieldLayouts, which each contain an individual widget and, optionally, a label.

Properties

icon #

The symbolic name of the icon (e.g., ‘remove’ or ‘menu’), or a map of symbolic names. A map is used for i18n purposes and contains a default icon name and additional names keyed by language code. The default name is used when no icon is keyed by the user's language.

Example of an i18n map:

{ default: 'bold-a', en: 'bold-b', de: 'bold-f' }

Note: the static property will be overridden if the #icon configuration is used.

Properties:

Type Description
Object | string
Mixes in:
Source:
The symbolic name of the icon (e.g., ‘remove’ or ‘menu’), or a map of symbolic names.

iconTitle #

The icon title, displayed when users move the mouse over the icon. The value can be text, a function that returns title text, or null for no title.

The static property will be overridden if the #iconTitle configuration is used.

Properties:

Type Description
string | function | null
Mixes in:
Source:
The icon title, displayed when users move the mouse over the icon.

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
Mixes in:
Source:
The label text.

tagNamestatic #

Source:

Methods

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.

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
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

isVisible() → {boolean} #

Check if element is visible.

Returns:

element is visible

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

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.

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.