1 files changed, 168 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js
new file mode 100644
index 00000000..a0eab146
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.js
@@ -0,0 +1,168 @@
+( function ( mw ) {
+	/**
+	 * Widget defining the button controlling the popup for the number of results
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 *
+	 * @constructor
+	 * @param {mw.rcfilters.Controller} controller Controller
+	 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
+	 * @param {Object} [config] Configuration object
+	 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
+		config = config || {};
+
+		// Parent
+		mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.parent.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( mw.rcfilters.ui.ChangesLimitAndDateButtonWidget, OO.ui.Widget );
+
+	/**
+	 * Respond to model initialize event
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onModelInitialize = function () {
+		var changesLimitPopupWidget, selectedItem, currentValue, datePopupWidget,
+			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 ) {
+			changesLimitPopupWidget = new mw.rcfilters.ui.ChangesLimitPopupWidget(
+				this.limitGroupModel,
+				this.groupByPageItemModel
+			);
+
+			datePopupWidget = new mw.rcfilters.ui.DatePopupWidget(
+				this.daysGroupModel,
+				{
+					label: mw.msg( 'rcfilters-date-popup-title' )
+				}
+			);
+
+			selectedItem = this.limitGroupModel.findSelectedItems()[ 0 ];
+			currentValue = ( selectedItem && selectedItem.getLabel() ) ||
+				mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
+
+			this.button = new OO.ui.PopupButtonWidget( {
+				icon: 'advanced',
+				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
+						changesLimitPopupWidget.$element,
+						datePopupWidget.$element
+					)
+				}
+			} );
+			this.updateButtonLabel();
+
+			// Events
+			this.limitGroupModel.connect( this, { update: 'updateButtonLabel' } );
+			this.daysGroupModel.connect( this, { update: 'updateButtonLabel' } );
+			changesLimitPopupWidget.connect( this, {
+				limit: 'onPopupLimit',
+				groupByPage: 'onPopupGroupByPage'
+			} );
+			datePopupWidget.connect( this, { days: 'onPopupDays' } );
+
+			this.$element.append( this.button.$element );
+		}
+	};
+
+	/**
+	 * Respond to popup limit change event
+	 *
+	 * @param {string} filterName Chosen filter name
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupLimit = function ( filterName ) {
+		var 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
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
+		this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
+		this.controller.updateGroupByPageDefault( isGrouped );
+		this.button.popup.toggle( false );
+	};
+
+	/**
+	 * Respond to popup limit change event
+	 *
+	 * @param {string} filterName Chosen filter name
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.onPopupDays = function ( filterName ) {
+		var 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
+	 *
+	 * @param {string} filterName Filter name
+	 */
+	mw.rcfilters.ui.ChangesLimitAndDateButtonWidget.prototype.updateButtonLabel = function () {
+		var message,
+			limit = this.limitGroupModel.findSelectedItems()[ 0 ],
+			label = limit && limit.getLabel(),
+			days = this.daysGroupModel.findSelectedItems()[ 0 ],
+			daysParamName = Number( days.getParamName() ) < 1 ?
+				'rcfilters-days-show-hours' :
+				'rcfilters-days-show-days';
+
+		// Update the label
+		if ( label && days ) {
+			message = mw.msg( 'rcfilters-limit-and-date-label', label,
+				mw.msg( daysParamName, days.getLabel() )
+			);
+			this.button.setLabel( message );
+		}
+	};
+
+}( mediaWiki ) );