3 * List displaying all filter groups
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.PendingElement
9 * @param {mw.rcfilters.Controller} controller Controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
11 * @param {Object} [config] Configuration object
12 * @cfg {Object} [filters] A definition of the filter groups in this list
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
15 mw
.rcfilters
.ui
.FilterWrapperWidget
= function MwRcfiltersUiFilterWrapperWidget( controller
, model
, config
) {
16 config
= config
|| {};
19 mw
.rcfilters
.ui
.FilterWrapperWidget
.parent
.call( this, config
);
21 OO
.ui
.mixin
.PendingElement
.call( this, config
);
23 this.controller
= controller
;
25 this.$overlay
= config
.$overlay
|| this.$element
;
27 this.filterPopup
= new mw
.rcfilters
.ui
.FiltersListWidget(
31 label
: mw
.msg( 'rcfilters-filterlist-title' ),
32 $overlay
: this.$overlay
36 this.textInput
= new OO
.ui
.TextInputWidget( {
37 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
39 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
42 this.capsule
= new mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget( controller
, this.model
, this.textInput
, {
43 $overlay
: this.$overlay
,
45 $content
: this.filterPopup
.$element
,
46 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
52 this.model
.connect( this, {
53 initialize
: 'onModelInitialize'
55 this.textInput
.connect( this, {
56 change
: 'onTextInputChange'
59 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
60 .append( this.capsule
.$element
, this.textInput
.$element
);
65 OO
.inheritClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.Widget
);
66 OO
.mixinClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.mixin
.PendingElement
);
69 * Respond to text input change
71 * @param {string} newValue Current value
73 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onTextInputChange = function ( newValue
) {
75 this.filterPopup
.filter( this.model
.findMatches( newValue
) );
76 this.capsule
.popup
.clip();
80 * Respond to model update event and set up the available filters to choose
83 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onModelInitialize = function () {
86 // Add defaults to capsule. We have to do this
87 // after we added to the capsule menu, since that's
88 // how the capsule multiselect widget knows which
90 this.model
.getItems().forEach( function ( filterItem
) {
91 if ( filterItem
.isSelected() ) {
92 wrapper
.capsule
.addItemByName( filterItem
.getName() );