mediawiki-extensions-Echo/modules/ui/mw.echo.ui.ActionMenuPopupWidget.js
Moriel Schottlender 8e76bc4126 Refactoring Echo's front end for MVC
Changing the way Echo's front-end architecture works to work with
model-view-controller methodology.

Change-Id: I97862402c41bc04dd41cd08d79f19ff677340249
2016-05-18 12:28:45 -07:00

78 lines
2.4 KiB
JavaScript

( 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' ],
widget: this
} );
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 );
// HACK: Prevent ClippableElement from overwriting this width value on scroll
// or window resize
this.menu.toggleClipping( false );
};
/**
* Get the widget's action menu
*
* @return {OO.ui.FloatingMenuSelectWidget} Menu
*/
mw.echo.ui.ActionMenuPopupWidget.prototype.getMenu = function () {
return this.menu;
};
} )( mediaWiki );