1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
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 ) );
|
