Expand all

abstract OO.ui.mixin.FlaggedElement

Constructor

new OO.ui.mixin.FlaggedElement([config])abstract #

The FlaggedElement class is an attribute mixin, meaning that it is used to add additional functionality to an element created by another class. The class provides a ‘flags’ property assigned the name (or an array of names) of styling flags, which are used to customize the look and feel of a widget to better describe its importance and functionality.

The library currently contains the following styling flags for general use:

  • progressive: Progressive styling is applied to convey that the widget will move the user forward in a process.
  • destructive: Destructive styling is applied to convey that the widget will remove something.

ActionWidgets, which are a special kind of button that execute an action, use these flags: primary and safe. Please see the OOUI documentation on MediaWiki for more information.

The flags affect the appearance of the buttons:

Example

// FlaggedElement is mixed into ButtonWidget to provide styling flags
    const button1 = new OO.ui.ButtonWidget( {
            label: 'Progressive',
            flags: 'progressive'
        } ),
        button2 = new OO.ui.ButtonWidget( {
            label: 'Destructive',
            flags: 'destructive'
        } );
    $( document.body ).append( button1.$element, button2.$element );

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Description
flags string | Array.<string> optional

The name or names of the flags (e.g., 'progressive' or 'primary') to apply. Please see the [OOUI documentation on MediaWiki][2] for more information about available flags. [2]: https://www.mediawiki.org/wiki/OOUI/Elements/Flagged
$flagged jQuery optional

The flagged element. By default, the flagged functionality is applied to the element created by the class ($element). If a different element is specified, the flagged functionality will be applied to it instead.
Source:

The FlaggedElement class is an attribute mixin, meaning that it is used to add additional functionality to an element created by another class.

Properties

flagsstatic #

Initial value to pass to setFlags if no value is provided in config.

Properties:

Type Description
string | Array.<string> | Object.<string, boolean>
Source:
Initial value to pass to setFlags if no value is provided in config.

Methods

clearFlags() → {OO.ui.Element}chainable #

Clear all flags.

Source:

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Clear all flags.

getFlags() → {Array.<string>} #

Get the names of all flags set.

Source:

Returns:

Flag names

Type
Array.<string>
Get the names of all flags set.

hasFlag(flag) → {boolean} #

Check if the specified flag is set.

Parameters:

Name Type Description
flag string

Name of flag
Source:

Returns:

The flag is set

Type
boolean
Check if the specified flag is set.

setFlaggedElement($flagged) #

Set the flagged element.

This method is used to retarget a flagged mixin so that its functionality applies to the specified element. If an element is already set, the method will remove the mixin’s effect on that element.

Parameters:

Name Type Description
$flagged jQuery

Element that should be flagged
Source:
Set the flagged element.

setFlags(flags) → {OO.ui.Element}chainable #

Add one or more flags.

Parameters:

Name Type Description
flags string | Array.<string> | Object.<string, boolean>

A flag name, an array of flag names, or an object keyed by flag name with a boolean value that indicates whether the flag should be added (true) or removed (false).
Source:

Returns:

The element, for chaining

Type
OO.ui.Element

Fires:

Add one or more flags.

Events

flag(changes) #

A flag event is emitted when the #clearFlags or #setFlags methods are used. The changes parameter contains the name of each modified flag and indicates whether it was added or removed.

Parameters:

Name Type Description
changes Object.<string, boolean>

Object keyed by flag name. A Boolean true indicates that the flag was added, false that the flag was removed.
Source:
A flag event is emitted when the #clearFlags or #setFlags methods are used.