# all files / src/widgets/ PopupButtonWidget.js

92.31% Statements 12/13
83.33% Branches 5/6
50% Functions 1/2
92.31% Lines 12/13

    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

    1×

    1920×

    1920×

    1920×

    1920×

    1920×

    1920×

    1920×

    1920×

    1×
    1×

    1×

     /**
     * PopupButtonWidgets toggle the visibility of a contained {@link OO.ui.PopupWidget PopupWidget},
     * which is used to display additional information or options.
     *
     *     @example
     *     // Example of a popup button.
     *     var popupButton = new OO.ui.PopupButtonWidget( {
     *         label: 'Popup button with options',
     *         icon: 'menu',
     *         popup: {
     *             $content: $( '<p>Additional options here.</p>' ),
     *             padded: true,
     *             align: 'force-left'
     *         }
     *     } );
     *     // Append the button to the DOM.
     *     $( 'body' ).append( popupButton.$element );
     *
     * @class
     * @extends OO.ui.ButtonWidget
     * @mixins OO.ui.mixin.PopupElement
     *
     * @constructor
     * @param {Object} [config] Configuration options
     * @cfg {jQuery} [$overlay] Render the popup into a separate layer. This configuration is useful in cases where
     *  the expanded popup is larger than its containing `<div>`. The specified overlay layer is usually on top of the
     *  containing `<div>` and has a larger area. By default, the popup uses relative positioning.
     *  See <https://www.mediawiki.org/wiki/OOUI/Concepts#Overlays>.
     */
    OO.ui.PopupButtonWidget = function OoUiPopupButtonWidget( config ) {
    	// Configuration initialization
    	config = config || {};

    	// Parent constructor
    	OO.ui.PopupButtonWidget.parent.call( this, config );

    	// Mixin constructors
    	OO.ui.mixin.PopupElement.call( this, config );

    	// Properties
    	this.$overlay = ( config.$overlay === true ? OO.ui.getDefaultOverlay() : config.$overlay ) || this.$element;

    	// Events
    	this.connect( this, { click: 'onAction' } );

    	// Initialization
    	this.$element
    		.addClass( 'oo-ui-popupButtonWidget' );
    	this.popup.$element
    		.addClass( 'oo-ui-popupButtonWidget-popup' )
    		.toggleClass( 'oo-ui-popupButtonWidget-framed-popup', this.isFramed() )
    		.toggleClass( 'oo-ui-popupButtonWidget-frameless-popup', !this.isFramed() );
    	this.$overlay.append( this.popup.$element );
    };

    /* Setup */

    OO.inheritClass( OO.ui.PopupButtonWidget, OO.ui.ButtonWidget );
    OO.mixinClass( OO.ui.PopupButtonWidget, OO.ui.mixin.PopupElement );

    /* Methods */

    /**
     * Handle the button action being triggered.
     *
     * @private
     */
    OO.ui.PopupButtonWidget.prototype.onAction = function () {
    	this.popup.toggle();
    };