1 var FilterTagMultiselectWidget
= require( './FilterTagMultiselectWidget.js' ),
2 LiveUpdateButtonWidget
= require( './LiveUpdateButtonWidget.js' ),
3 ChangesLimitAndDateButtonWidget
= require( './ChangesLimitAndDateButtonWidget.js' ),
7 * List displaying all filter groups
9 * @class mw.rcfilters.ui.FilterWrapperWidget
10 * @extends OO.ui.Widget
11 * @mixins OO.ui.mixin.PendingElement
14 * @param {mw.rcfilters.Controller} controller Controller
15 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
16 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
17 * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
18 * @param {Object} [config] Configuration object
19 * @cfg {Object} [filters] A definition of the filter groups in this list
20 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
21 * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
22 * system. If not given, falls back to this widget's $element
23 * @cfg {boolean} [collapsed] Filter area is collapsed
25 FilterWrapperWidget
= function MwRcfiltersUiFilterWrapperWidget(
26 controller
, model
, savedQueriesModel
, changesListModel
, config
29 config
= config
|| {};
32 FilterWrapperWidget
.parent
.call( this, config
);
34 OO
.ui
.mixin
.PendingElement
.call( this, config
);
36 this.controller
= controller
;
38 this.queriesModel
= savedQueriesModel
;
39 this.changesListModel
= changesListModel
;
40 this.$overlay
= config
.$overlay
|| this.$element
;
41 this.$wrapper
= config
.$wrapper
|| this.$element
;
43 this.filterTagWidget
= new FilterTagMultiselectWidget(
48 $overlay
: this.$overlay
,
49 collapsed
: config
.collapsed
,
50 $wrapper
: this.$wrapper
54 this.liveUpdateButton
= new LiveUpdateButtonWidget(
59 this.numChangesAndDateWidget
= new ChangesLimitAndDateButtonWidget(
63 $overlay
: this.$overlay
67 this.showNewChangesLink
= new OO
.ui
.ButtonWidget( {
70 flags
: [ 'progressive' ],
71 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-showNewChanges' ]
75 this.filterTagWidget
.menu
.connect( this, { toggle
: [ 'emit', 'menuToggle' ] } );
76 this.changesListModel
.connect( this, { newChangesExist
: 'onNewChangesExist' } );
77 this.showNewChangesLink
.connect( this, { click
: 'onShowNewChangesClick' } );
78 this.showNewChangesLink
.toggle( false );
81 this.$top
= $( '<div>' )
82 .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' );
84 $bottom
= $( '<div>' )
85 .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
87 this.showNewChangesLink
.$element
,
88 this.numChangesAndDateWidget
.$element
91 if ( this.controller
.pollingRate
) {
92 $bottom
.prepend( this.liveUpdateButton
.$element
);
96 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
99 this.filterTagWidget
.$element
,
106 OO
.inheritClass( FilterWrapperWidget
, OO
.ui
.Widget
);
107 OO
.mixinClass( FilterWrapperWidget
, OO
.ui
.mixin
.PendingElement
);
112 * Set the content of the top section
114 * @param {jQuery} $topSectionElement
116 FilterWrapperWidget
.prototype.setTopSection = function ( $topSectionElement
) {
117 this.$top
.append( $topSectionElement
);
121 * Respond to the user clicking the 'show new changes' button
123 FilterWrapperWidget
.prototype.onShowNewChangesClick = function () {
124 this.controller
.showNewChanges();
128 * Respond to changes list model newChangesExist
130 * @param {boolean} newChangesExist Whether new changes exist
132 FilterWrapperWidget
.prototype.onNewChangesExist = function ( newChangesExist
) {
133 if ( newChangesExist
) {
134 this.showNewChangesLink
.setLabel(
136 'rcfilters-show-new-changes',
137 this.changesListModel
.getNextFromFormatted()
141 this.showNewChangesLink
.toggle( newChangesExist
);
144 module
.exports
= FilterWrapperWidget
;