2 var ChangesLimitPopupWidget
= require( './ChangesLimitPopupWidget.js' ),
3 DatePopupWidget
= require( './DatePopupWidget.js' ),
4 ChangesLimitAndDateButtonWidget
;
7 * Widget defining the button controlling the popup for the number of results
9 * @class mw.rcfilters.ui.ChangesLimitAndDateButtonWidget
10 * @extends OO.ui.Widget
13 * @param {mw.rcfilters.Controller} controller Controller
14 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
15 * @param {Object} [config] Configuration object
16 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
18 ChangesLimitAndDateButtonWidget
= function MwRcfiltersUiChangesLimitWidget( controller
, model
, config
) {
19 config
= config
|| {};
22 ChangesLimitAndDateButtonWidget
.parent
.call( this, config
);
24 this.controller
= controller
;
27 this.$overlay
= config
.$overlay
|| this.$element
;
30 this.limitGroupModel
= null;
31 this.groupByPageItemModel
= null;
32 this.daysGroupModel
= null;
34 this.model
.connect( this, {
35 initialize
: 'onModelInitialize'
39 .addClass( 'mw-rcfilters-ui-changesLimitAndDateButtonWidget' );
44 OO
.inheritClass( ChangesLimitAndDateButtonWidget
, OO
.ui
.Widget
);
47 * Respond to model initialize event
49 ChangesLimitAndDateButtonWidget
.prototype.onModelInitialize = function () {
50 var changesLimitPopupWidget
, selectedItem
, currentValue
, datePopupWidget
,
51 displayGroupModel
= this.model
.getGroup( 'display' );
53 this.limitGroupModel
= this.model
.getGroup( 'limit' );
54 this.groupByPageItemModel
= displayGroupModel
.getItemByParamName( 'enhanced' );
55 this.daysGroupModel
= this.model
.getGroup( 'days' );
57 // HACK: We need the model to be ready before we populate the button
58 // and the widget, because we require the filter items for the
59 // limit and their events. This addition is only done after the
60 // model is initialized.
61 // Note: This will be fixed soon!
62 if ( this.limitGroupModel
&& this.daysGroupModel
) {
63 changesLimitPopupWidget
= new ChangesLimitPopupWidget(
65 this.groupByPageItemModel
68 datePopupWidget
= new DatePopupWidget(
71 label
: mw
.msg( 'rcfilters-date-popup-title' )
75 selectedItem
= this.limitGroupModel
.findSelectedItems()[ 0 ];
76 currentValue
= ( selectedItem
&& selectedItem
.getLabel() ) ||
77 mw
.language
.convertNumber( this.limitGroupModel
.getDefaultParamValue() );
79 this.button
= new OO
.ui
.PopupButtonWidget( {
82 label
: mw
.msg( 'rcfilters-limit-and-date-label', currentValue
),
83 $overlay
: this.$overlay
,
89 $autoCloseIgnore
: this.$overlay
,
90 $content
: $( '<div>' ).append(
91 // TODO: Merge ChangesLimitPopupWidget with DatePopupWidget into one common widget
92 changesLimitPopupWidget
.$element
,
93 datePopupWidget
.$element
97 this.updateButtonLabel();
100 this.limitGroupModel
.connect( this, { update
: 'updateButtonLabel' } );
101 this.daysGroupModel
.connect( this, { update
: 'updateButtonLabel' } );
102 changesLimitPopupWidget
.connect( this, {
103 limit
: 'onPopupLimit',
104 groupByPage
: 'onPopupGroupByPage'
106 datePopupWidget
.connect( this, { days
: 'onPopupDays' } );
108 this.$element
.append( this.button
.$element
);
113 * Respond to popup limit change event
115 * @param {string} filterName Chosen filter name
117 ChangesLimitAndDateButtonWidget
.prototype.onPopupLimit = function ( filterName
) {
118 var item
= this.limitGroupModel
.getItemByName( filterName
);
120 this.controller
.toggleFilterSelect( filterName
, true );
121 this.controller
.updateLimitDefault( item
.getParamName() );
122 this.button
.popup
.toggle( false );
126 * Respond to popup limit change event
128 * @param {boolean} isGrouped The result set is grouped by page
130 ChangesLimitAndDateButtonWidget
.prototype.onPopupGroupByPage = function ( isGrouped
) {
131 this.controller
.toggleFilterSelect( this.groupByPageItemModel
.getName(), isGrouped
);
132 this.controller
.updateGroupByPageDefault( isGrouped
);
133 this.button
.popup
.toggle( false );
137 * Respond to popup limit change event
139 * @param {string} filterName Chosen filter name
141 ChangesLimitAndDateButtonWidget
.prototype.onPopupDays = function ( filterName
) {
142 var item
= this.daysGroupModel
.getItemByName( filterName
);
144 this.controller
.toggleFilterSelect( filterName
, true );
145 this.controller
.updateDaysDefault( item
.getParamName() );
146 this.button
.popup
.toggle( false );
150 * Respond to limit choose event
152 * @param {string} filterName Filter name
154 ChangesLimitAndDateButtonWidget
.prototype.updateButtonLabel = function () {
156 limit
= this.limitGroupModel
.findSelectedItems()[ 0 ],
157 label
= limit
&& limit
.getLabel(),
158 days
= this.daysGroupModel
.findSelectedItems()[ 0 ],
159 daysParamName
= Number( days
.getParamName() ) < 1 ?
160 'rcfilters-days-show-hours' :
161 'rcfilters-days-show-days';
164 if ( label
&& days
) {
165 message
= mw
.msg( 'rcfilters-limit-and-date-label', label
,
166 mw
.msg( daysParamName
, days
.getLabel() )
168 this.button
.setLabel( message
);
172 module
.exports
= ChangesLimitAndDateButtonWidget
;