Expand all

abstract OO.ui.ActionSet

Constructor

new OO.ui.ActionSet([config])abstract #

ActionSets manage the behavior of the action widgets that comprise them. Actions can be made available for specific contexts (modes) and circumstances (abilities). Action sets are primarily used with Dialogs.

ActionSets contain two types of actions:

  • Special: Special actions are the first visible actions with special flags, such as 'safe' and 'primary', the default special flags. Additional special flags can be configured in subclasses with the static #specialFlags property.
  • Other: Other actions include all non-special visible actions.

See the OOUI documentation on MediaWiki for more information.

Example

// Example: An action set used in a process dialog
    function MyProcessDialog( config ) {
        MyProcessDialog.super.call( this, config );
    }
    OO.inheritClass( MyProcessDialog, OO.ui.ProcessDialog );
    MyProcessDialog.static.title = 'An action set in a process dialog';
    MyProcessDialog.static.name = 'myProcessDialog';
    // An action set that uses modes ('edit' and 'help' mode, in this example).
    MyProcessDialog.static.actions = [
        {
          action: 'continue',
          modes: 'edit',
          label: 'Continue',
          flags: [ 'primary', 'progressive' ]
        },
        { action: 'help', modes: 'edit', label: 'Help' },
        { modes: 'edit', label: 'Cancel', flags: 'safe' },
        { action: 'back', modes: 'help', label: 'Back', flags: 'safe' }
    ];

    MyProcessDialog.prototype.initialize = function () {
        MyProcessDialog.super.prototype.initialize.apply( this, arguments );
        this.panel1 = new OO.ui.PanelLayout( { padded: true, expanded: false } );
        this.panel1.$element.append( '<p>This dialog uses an action set (continue, help, ' +
            'cancel, back) configured with modes. This is edit mode. Click \'help\' to see ' +
            'help mode.</p>' );
        this.panel2 = new OO.ui.PanelLayout( { padded: true, expanded: false } );
        this.panel2.$element.append( '<p>This is help mode. Only the \'back\' action widget ' +
             'is configured to be visible here. Click \'back\' to return to \'edit\' mode.' +
             '</p>' );
        this.stackLayout = new OO.ui.StackLayout( {
            items: [ this.panel1, this.panel2 ]
        } );
        this.$body.append( this.stackLayout.$element );
    };
    MyProcessDialog.prototype.getSetupProcess = function ( data ) {
        return MyProcessDialog.super.prototype.getSetupProcess.call( this, data )
            .next( () => {
                this.actions.setMode( 'edit' );
            } );
    };
    MyProcessDialog.prototype.getActionProcess = function ( action ) {
        if ( action === 'help' ) {
            this.actions.setMode( 'help' );
            this.stackLayout.setItem( this.panel2 );
        } else if ( action === 'back' ) {
            this.actions.setMode( 'edit' );
            this.stackLayout.setItem( this.panel1 );
        } else if ( action === 'continue' ) {
            return new OO.ui.Process( () => {
                this.close();
            } );
        }
        return MyProcessDialog.super.prototype.getActionProcess.call( this, action );
    };
    MyProcessDialog.prototype.getBodyHeight = function () {
        return this.panel1.$element.outerHeight( true );
    };
    const windowManager = new OO.ui.WindowManager();
    $( document.body ).append( windowManager.$element );
    const dialog = new MyProcessDialog( {
        size: 'medium'
    } );
    windowManager.addWindows( [ dialog ] );
    windowManager.openWindow( dialog );

Parameters:

Name Type Attributes Description
config Object optional

Configuration options
Mixes in:
Source:

ActionSets manage the behavior of the action widgets that comprise them.

Properties

specialFlagsabstractstatic #

Symbolic name of the flags used to identify special actions. Special actions are displayed in the header of a process dialog. See the OOUI documentation on MediaWiki for more information and examples.

Properties:

Type Description
string
Source:
Symbolic name of the flags used to identify special actions.

Methods

add(actions) → {OO.ui.ActionSet}chainable #

Add action widgets to the action set.

Parameters:

Name Type Description
actions Array.<OO.ui.ActionWidget>

Action widgets to add
Source:

Fires:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Add action widgets to the action set.

clear() → {OO.ui.ActionSet}chainable #

Remove all action widgets from the set.

To remove only specified actions, use the remove method instead.

Source:

Fires:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Remove all action widgets from the set.

forEach(filter, callback) → {OO.ui.ActionSet}chainable #

Executes a function once per action.

When making changes to multiple actions, use this method instead of iterating over the actions manually to defer emitting a #change event until after all actions have been changed.

Parameters:

Name Type Description
filter Object | null

Filters to use to determine which actions to iterate over; see #get
callback function

Callback to run for each action; callback is invoked with three arguments: the action, the action's index, the list of actions being iterated over
Source:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Executes a function once per action.

get([filters]) → {Array.<OO.ui.ActionWidget>} #

Get action widgets based on the specified filter: ‘actions’, ‘flags’, ‘modes’, ‘visible’, or ‘disabled’.

Parameters:

Name Type Attributes Description
filters Object optional

Filters to use, omit to get all actions

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

Actions that action widgets must have
flags string | Array.<string> optional

Flags that action widgets must have (e.g., 'safe')
modes string | Array.<string> optional

Modes that action widgets must have
visible boolean optional

Visibility that action widgets must have, omit to get both visible and invisible
disabled boolean optional

Disabled state that action widgets must have, omit to get both enabled and disabled
Source:

Returns:

Action widgets matching all criteria

Type
Array.<OO.ui.ActionWidget>

Get action widgets based on the specified filter: ‘actions’, ‘flags’, ‘modes’, ‘visible’, or ‘disabled’.

getOthers() → {Array.<OO.ui.ActionWidget>} #

Get 'other' actions.

Other actions include all non-special visible action widgets.

Source:

Returns:

'Other' action widgets

Type
Array.<OO.ui.ActionWidget>
Get 'other' actions.

getSpecial() → {Array.<OO.ui.ActionWidget>|null} #

Get 'special' actions.

Special actions are the first visible action widgets with special flags, such as 'safe' and 'primary'. Special flags can be configured in subclasses by changing the static #specialFlags property.

Source:

Returns:

'Special' action widgets.

Type
Array.<OO.ui.ActionWidget> | null
Get 'special' actions.

isSpecial(action) → {boolean} #

Check if an action is one of the special actions.

Parameters:

Name Type Description
action OO.ui.ActionWidget

Action to check
Source:

Returns:

Action is special

Type
boolean
Check if an action is one of the special actions.

remove(actions) → {OO.ui.ActionSet}chainable #

Remove action widgets from the set.

To remove all actions, you may wish to use the #clear method instead.

Parameters:

Name Type Description
actions Array.<OO.ui.ActionWidget>

Action widgets to remove
Source:

Fires:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Remove action widgets from the set.

setAbilities(actions) → {OO.ui.ActionSet}chainable #

Set the abilities of the specified actions.

Action widgets that are configured with the specified actions will be enabled or disabled based on the boolean values specified in the actions parameter.

Parameters:

Name Type Description
actions Object.<string, boolean>

A list keyed by action name with boolean values that indicate whether or not the action should be enabled.
Source:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Set the abilities of the specified actions.

setMode(mode) → {OO.ui.ActionSet}chainable #

Set the mode (e.g., ‘edit’ or ‘view’). Only actions configured to be available in the specified mode will be made visible. All other actions will be hidden.

Parameters:

Name Type Description
mode string

The mode. Only actions configured to be available in the specified mode will be made visible.
Source:

Fires:

Returns:

The widget, for chaining

Type
OO.ui.ActionSet
Set the mode (e.g., ‘edit’ or ‘view’).

Events

add(added) #

An 'add' event is emitted when actions are added to the action set.

Parameters:

Name Type Description
added Array.<OO.ui.ActionWidget>

Actions added
Source:
An 'add' event is emitted when actions are added to the action set.

change() #

A 'change' event is emitted when actions are added, cleared, or removed from the action set or when the mode is changed.

Source:

A 'change' event is emitted when actions are added, cleared, or removed from the action set or when the mode is changed.

click(action) #

A 'click' event is emitted when an action is clicked.

Parameters:

Name Type Description
action OO.ui.ActionWidget

Action that was clicked
Source:
A 'click' event is emitted when an action is clicked.

remove(added) #

A 'remove' event is emitted when actions are removed or cleared.

Parameters:

Name Type Description
added Array.<OO.ui.ActionWidget>

Actions removed
Source:

A 'remove' event is emitted when actions are removed or cleared.