Mixin: PendingElement

.ui.mixin.PendingElement

PendingElement is a mixin that is used to create elements that notify users that something is happening and that they should wait before proceeding. The pending state is visually represented with a pending texture that appears in the head of a pending process dialog or in the input field of a text input widget.

Currently, Action widgets, which mix in this class, can also be marked as pending, but only when used in message dialogs. The behavior is not currently supported for action widgets used in process dialogs.

Source:

Example

function MessageDialog( config ) {
        MessageDialog.parent.call( this, config );
    }
    OO.inheritClass( MessageDialog, OO.ui.MessageDialog );

    MessageDialog.static.name = 'myMessageDialog';
    MessageDialog.static.actions = [
        { action: 'save', label: 'Done', flags: 'primary' },
        { label: 'Cancel', flags: 'safe' }
    ];

    MessageDialog.prototype.initialize = function () {
        MessageDialog.parent.prototype.initialize.apply( this, arguments );
        this.content = new OO.ui.PanelLayout( { $: this.$, padded: true } );
        this.content.$element.append( '<p>Click the \'Done\' action widget to see its pending state. Note that action widgets can be marked pending in message dialogs but not process dialogs.</p>' );
        this.$body.append( this.content.$element );
    };
    MessageDialog.prototype.getBodyHeight = function () {
        return 100;
    }
    MessageDialog.prototype.getActionProcess = function ( action ) {
        var dialog = this;
        if ( action === 'save' ) {
            dialog.getActions().get({actions: 'save'})[0].pushPending();
            return new OO.ui.Process()
            .next( 1000 )
            .next( function () {
                dialog.getActions().get({actions: 'save'})[0].popPending();
            } );
        }
        return MessageDialog.parent.prototype.getActionProcess.call( this, action );
    };

    var windowManager = new OO.ui.WindowManager();
    $( 'body' ).append( windowManager.$element );

    var dialog = new MessageDialog();
    windowManager.addWindows( [ dialog ] );
    windowManager.openWindow( dialog );

Methods

isPending() → {boolean}

Check if an element is pending.

Source:
Returns:

Element is pending

Type
boolean

popPending()

Decrease the pending counter. The pending state will remain active until the counter is zero (i.e., the number of calls to #pushPending and #popPending is the same).

Source:

pushPending()

Increase the pending counter. The pending state will remain active until the counter is zero (i.e., the number of calls to #pushPending and #popPending is the same).

Source:

setPendingElement($pending)

Set the pending element (and clean up any existing one).

Parameters:
Name Type Description
$pending jQuery

The element to set to pending.
Source: