mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-11 15:38:37 +00:00
121cbd6ee8
$.extend() with one parameter will merge the given options into the
global `jQuery` object, which was definitely not intended here. Maybe
the `config` variable was supposed to be passed as the second
parameter, but it doesn't look like that would do anything either.
Accessing the global `jQuery` object in that way ended up generating
completely unrelated warnings about deprecated `$.trimByteLength`,
which was reported in the task.
Follow-up to 7658e151d6.
Bug: T256732
Change-Id: I5f92b6725c8abdcfb676e6a09b610ea0dc8c245f
91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
( function () {
|
|
/**
|
|
* 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 MenuSelectWidget 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 {Object} [horizontalPosition='auto'] How to position the menu, see OO.ui.FloatableElement.
|
|
* By default, 'start' will be tried first, and if that doesn't fit, 'end' will be used.
|
|
*/
|
|
mw.echo.ui.ActionMenuPopupWidget = function MwEchoUiActionMenuPopupWidget( config ) {
|
|
config = config || {};
|
|
|
|
// Parent constructor
|
|
mw.echo.ui.ActionMenuPopupWidget.super.call( this, config );
|
|
|
|
this.$overlay = config.$overlay || this.$element;
|
|
|
|
// Menu
|
|
this.customMenuPosition = ( config.horizontalPosition || 'auto' ) !== 'auto';
|
|
this.menu = new OO.ui.MenuSelectWidget( {
|
|
$floatableContainer: this.$element,
|
|
horizontalPosition: this.customMenuPosition ? config.horizontalPosition : 'start',
|
|
classes: [ 'mw-echo-ui-actionMenuPopupWidget-menu' ],
|
|
widget: this
|
|
} );
|
|
this.$overlay.append( this.menu.$element );
|
|
|
|
// Events
|
|
this.connect( this, { click: 'onAction' } );
|
|
this.getMenu().connect( this, {
|
|
remove: 'decideToggle',
|
|
add: 'decideToggle',
|
|
clear: 'decideToggle'
|
|
} );
|
|
// 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 () {
|
|
// HACK: If config.horizontalPosition isn't set, first try 'start', then 'end'
|
|
if ( !this.customMenuPosition ) {
|
|
this.menu.setHorizontalPosition( 'start' );
|
|
}
|
|
this.menu.toggle();
|
|
if ( !this.customMenuPosition && this.menu.isClipped() ) {
|
|
this.menu.setHorizontalPosition( 'end' );
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Decide whether the menu should be visible, based on whether it is
|
|
* empty or not.
|
|
*/
|
|
mw.echo.ui.ActionMenuPopupWidget.prototype.decideToggle = function () {
|
|
this.toggle( !this.getMenu().isEmpty() );
|
|
};
|
|
|
|
/**
|
|
* Get the widget's action menu
|
|
*
|
|
* @return {OO.ui.MenuSelectWidget} Menu
|
|
*/
|
|
mw.echo.ui.ActionMenuPopupWidget.prototype.getMenu = function () {
|
|
return this.menu;
|
|
};
|
|
}() );
|