Page MenuHomeWickedGov Phorge
Files F4134297

ChangesLimitAndDateButtonWidget.js
No OneTemporary
Actions

Size
5 KB
Referenced Files
None
Subscribers
None

ChangesLimitAndDateButtonWidget.js
View Options

const ChangesLimitPopupWidget = require( './ChangesLimitPopupWidget.js' ),
DatePopupWidget = require( './DatePopupWidget.js' );
/**
* Widget defining the button controlling the popup for the number of results.
*
* @class mw.rcfilters.ui.ChangesLimitAndDateButtonWidget
* @ignore
* @extends OO.ui.Widget
*
* @param {mw.rcfilters.Controller} controller Controller
* @param {mw.rcfilters.dm.FiltersViewModel} model View model
* @param {Object} [config] Configuration object
* @param {jQuery} [config.$overlay] A jQuery object serving as overlay for popups
*/
const ChangesLimitAndDateButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
config = config || {};
// Parent
ChangesLimitAndDateButtonWidget.super.call( this, config );
this.controller = controller;
this.model = model;
this.$overlay = config.$overlay || this.$element;
this.button = null;
this.limitGroupModel = null;
this.groupByPageItemModel = null;
this.daysGroupModel = null;
this.model.connect( this, {
initialize: 'onModelInitialize'
} );
this.$element
.addClass( 'mw-rcfilters-ui-changesLimitAndDateButtonWidget' );
};
/* Initialization */
OO.inheritClass( ChangesLimitAndDateButtonWidget, OO.ui.Widget );
/**
* Respond to model initialize event
*/
ChangesLimitAndDateButtonWidget.prototype.onModelInitialize = function () {
const displayGroupModel = this.model.getGroup( 'display' );
this.limitGroupModel = this.model.getGroup( 'limit' );
this.groupByPageItemModel = displayGroupModel.getItemByParamName( 'enhanced' );
this.daysGroupModel = this.model.getGroup( 'days' );
// HACK: We need the model to be ready before we populate the button
// and the widget, because we require the filter items for the
// limit and their events. This addition is only done after the
// model is initialized.
// Note: This will be fixed soon!
if ( this.limitGroupModel && this.daysGroupModel ) {
this.changesLimitPopupWidget = new ChangesLimitPopupWidget(
this.limitGroupModel,
this.groupByPageItemModel
);
const datePopupWidget = new DatePopupWidget(
this.daysGroupModel,
{
label: mw.msg( 'rcfilters-date-popup-title' )
}
);
const selectedItem = this.limitGroupModel.findSelectedItems()[ 0 ];
const currentValue = ( selectedItem && selectedItem.getLabel() ) ||
mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
this.button = new OO.ui.PopupButtonWidget( {
icon: 'settings',
indicator: 'down',
label: mw.msg( 'rcfilters-limit-and-date-label', currentValue ),
$overlay: this.$overlay,
popup: {
width: 300,
padded: false,
anchor: false,
align: 'backwards',
$autoCloseIgnore: this.$overlay,
$content: $( '<div>' ).append(
// TODO: Merge ChangesLimitPopupWidget with DatePopupWidget into one common widget
this.changesLimitPopupWidget.$element,
datePopupWidget.$element
)
}
} );
this.button.popup.connect( this, { ready: 'onPopupInitialized' } );
this.button.popup.connect( this, { closing: 'onPopupClosing' } );
this.button.popup.$element.attr( 'aria-label',
mw.msg( 'rcfilters-limit-and-date-popup-dialog-aria-label' )
);
this.updateButtonLabel();
// Events
this.limitGroupModel.connect( this, { update: 'updateButtonLabel' } );
this.daysGroupModel.connect( this, { update: 'updateButtonLabel' } );
this.changesLimitPopupWidget.connect( this, {
limit: 'onPopupLimit',
groupByPage: 'onPopupGroupByPage',
groupByPageUserClick: 'onPopupGroupByPageUserClick'
} );
datePopupWidget.connect( this, { days: 'onPopupDays' } );
this.$element.append( this.button.$element );
}
};
/**
* Respond to popup initialized event
*
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupInitialized = function () {
this.changesLimitPopupWidget.$element.find( '*[tabindex]' ).first().trigger( 'focus' );
};
/**
* Respond to popup closing event
*
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupClosing = function () {
this.button.$button.trigger( 'focus' );
};
/**
* Respond to popup limit change event
*
* @param {string} filterName Chosen filter name
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupLimit = function ( filterName ) {
const item = this.limitGroupModel.getItemByName( filterName );
this.controller.toggleFilterSelect( filterName, true );
this.controller.updateLimitDefault( item.getParamName() );
this.button.popup.toggle( false );
};
/**
* Respond to popup limit change event
*
* @param {boolean} isGrouped The result set is grouped by page
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
this.button.popup.toggle( false );
};
/**
* Respond to popup request to save the group by page setting in preferences
*
* @param {boolean} isSelected The state of the group by page checkbox
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPageUserClick = function ( isSelected ) {
this.controller.updateGroupByPageDefault( isSelected );
};
/**
* Respond to popup limit change event
*
* @param {string} filterName Chosen filter name
*/
ChangesLimitAndDateButtonWidget.prototype.onPopupDays = function ( filterName ) {
const item = this.daysGroupModel.getItemByName( filterName );
this.controller.toggleFilterSelect( filterName, true );
this.controller.updateDaysDefault( item.getParamName() );
this.button.popup.toggle( false );
};
/**
* Respond to limit choose event
*/
ChangesLimitAndDateButtonWidget.prototype.updateButtonLabel = function () {
const limit = this.limitGroupModel.findSelectedItems()[ 0 ],
label = limit && limit.getLabel(),
days = this.daysGroupModel.findSelectedItems()[ 0 ];
// Update the label
if ( label && days ) {
const message = mw.msg( 'rcfilters-limit-and-date-label', label,
mw.msg(
Number( days.getParamName() ) < 1 ?
'rcfilters-days-show-hours' :
'rcfilters-days-show-days',
days.getLabel()
)
);
this.button.setLabel( message );
}
};
module.exports = ChangesLimitAndDateButtonWidget;

File Metadata

Mime Type
text/plain
Expires
Wed, Aug 19, 12:34 (3 w, 2 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
c7/21/ebcc2a184d1d7ef8328ca6991bc9
Default Alt Text
ChangesLimitAndDateButtonWidget.js (5 KB)

Event Timeline