# all files / src/mixins/ PendingElement.js

92.31% Statements 24/26
75% Branches 9/12
80% Functions 4/5
92.31% Lines 24/26

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133

    1×

    15200×

    15200×
    15200×

    15200×

    1×

    1×
    15201×
    1×

    15201×
    15201×

    1×

    1×
    5×
    5×
    5×

    5×

    5×

    1×
    5×
    5×
    5×

    5×

    5×

     /**
     * 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 {@link OO.ui.ProcessDialog process dialog} or in the input
     * field of a {@link OO.ui.TextInputWidget text input widget}.
     *
     * Currently, {@link OO.ui.ActionWidget Action widgets}, which mix in this class, can also be marked as pending, but only when
     * used in {@link OO.ui.MessageDialog message dialogs}. The behavior is not currently supported for action widgets used
     * in process dialogs.
     *
     *     @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 );
     *
     * @abstract
     * @class
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {jQuery} [$pending] Element to mark as pending, defaults to this.$element
     */
    OO.ui.mixin.PendingElement = function OoUiMixinPendingElement( config ) {
    	// Configuration initialization
    	config = config || {};

    	// Properties
    	this.pending = 0;
    	this.$pending = null;

    	// Initialisation
    	this.setPendingElement( config.$pending || this.$element );
    };

    /* Setup */

    OO.initClass( OO.ui.mixin.PendingElement );

    /* Methods */

    /**
     * Set the pending element (and clean up any existing one).
     *
     * @param {jQuery} $pending The element to set to pending.
     */
    OO.ui.mixin.PendingElement.prototype.setPendingElement = function ( $pending ) {
    	if ( this.$pending ) {
    		this.$pending.removeClass( 'oo-ui-pendingElement-pending' );
    	}

    	this.$pending = $pending;
    	Iif ( this.pending > 0 ) {
    		this.$pending.addClass( 'oo-ui-pendingElement-pending' );
    	}
    };

    /**
     * Check if an element is pending.
     *
     * @return {boolean} Element is pending
     */
    OO.ui.mixin.PendingElement.prototype.isPending = function () {
    	return !!this.pending;
    };

    /**
     * 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).
     *
     * @chainable
     */
    OO.ui.mixin.PendingElement.prototype.pushPending = function () {
    	Eif ( this.pending === 0 ) {
    		this.$pending.addClass( 'oo-ui-pendingElement-pending' );
    		this.updateThemeClasses();
    	}
    	this.pending++;

    	return this;
    };

    /**
     * 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).
     *
     * @chainable
     */
    OO.ui.mixin.PendingElement.prototype.popPending = function () {
    	Eif ( this.pending === 1 ) {
    		this.$pending.removeClass( 'oo-ui-pendingElement-pending' );
    		this.updateThemeClasses();
    	}
    	this.pending = Math.max( 0, this.pending - 1 );

    	return this;
    };