( function ( mw ) { /** * Action menu popup widget for echo items. * * We don't currently have anything that properly answers the complete * design for our popup menus in OOUI, so this widget serves two purposes: * 1. The FloatingMenuSelectWidget is intended to deliver a menu that relates * directly to its anchor, so its sizing is dictated by whatever anchors * it. This is not what we require, so we have to override the 'click' event * to reset the width of the menu. * 2. It abstracts the behavior of the item menus for easier management * in the item widget itself (which is fairly large) * * @class * @extends OO.ui.ButtonWidget * * @constructor * @param {Object} [config] Configuration object * @cfg {jQuery} [$overlay] A jQuery element functioning as an overlay * for popups. * @cfg {number} [menuWidth=300] The width of the popup menu */ mw.echo.ui.ActionMenuPopupWidget = function MwEchoUiActionMenuPopupWidget( config ) { config = config || {}; // Parent constructor mw.echo.ui.ActionMenuPopupWidget.parent.call( this, config ); this.$overlay = config.$overlay || this.$element; this.menuWidth = config.menuWidth || 300; // Menu this.menu = new OO.ui.FloatingMenuSelectWidget( { $container: this.$element, classes: [ 'mw-echo-ui-actionMenuPopupWidget-menu' ] } ); this.$overlay.append( this.menu.$element ); // Events this.connect( this, { click: 'onAction' } ); // Initialization this.$element .addClass( 'mw-echo-ui-actionMenuPopupWidget' ); }; /* Setup */ OO.inheritClass( mw.echo.ui.ActionMenuPopupWidget, OO.ui.ButtonWidget ); /** * Handle the button action being triggered. * * @private */ mw.echo.ui.ActionMenuPopupWidget.prototype.onAction = function () { this.menu.toggle(); // HACK: The menu is attempting to be the same size as the container, // which in our case is not the point at all. We need the menu // to be larger, so force this setting: this.menu.$element.css( 'width', this.menuWidth ); }; /** * Get the widget's action menu * * @return {OO.ui.FloatingMenuSelectWidget} Menu */ mw.echo.ui.ActionMenuPopupWidget.prototype.getMenu = function () { return this.menu; }; } )( mediaWiki );