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
14 mw
.rcfilters
.ui
.FilterWrapperWidget
= function MwRcfiltersUiFilterWrapperWidget( controller
, model
, config
) {
15 config
= config
|| {};
18 mw
.rcfilters
.ui
.FilterWrapperWidget
.parent
.call( this, config
);
20 OO
.ui
.mixin
.PendingElement
.call( this, config
);
22 this.controller
= controller
;
24 this.filtersInCapsule
= [];
26 this.filterPopup
= new mw
.rcfilters
.ui
.FiltersListWidget(
30 label
: mw
.msg( 'rcfilters-filterlist-title' )
34 this.textInput
= new OO
.ui
.TextInputWidget( {
35 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
37 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
40 this.capsule
= new mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget( controller
, this.model
, this.textInput
, {
42 $content
: this.filterPopup
.$element
,
43 classes
: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ]
48 this.model
.connect( this, {
49 initialize
: 'onModelInitialize',
50 itemUpdate
: 'onModelItemUpdate'
52 this.textInput
.connect( this, {
53 change
: 'onTextInputChange'
55 this.capsule
.connect( this, {
56 remove
: 'onCapsuleRemoveItem'
60 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
61 .append( this.capsule
.$element
, this.textInput
.$element
);
66 OO
.inheritClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.Widget
);
67 OO
.mixinClass( mw
.rcfilters
.ui
.FilterWrapperWidget
, OO
.ui
.mixin
.PendingElement
);
70 * Respond to text input change
72 * @param {string} newValue Current value
74 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onTextInputChange = function ( newValue
) {
76 this.filterPopup
.filter( this.model
.findMatches( newValue
) );
80 * Respond to an event where an item is removed from the capsule.
81 * This is the case where a user actively removes a filter box from the capsule widget.
83 * @param {string[]} filterNames An array of filter names that were removed
85 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onCapsuleRemoveItem = function ( filterNames
) {
89 filterNames
.forEach( function ( filterName
) {
91 filterItem
= widget
.model
.getItemByName( filterName
);
92 filterItem
.toggleSelected( false );
97 * Respond to model update event and set up the available filters to choose
100 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onModelInitialize = function () {
103 filters
= this.model
.getItems();
106 this.capsule
.getMenu().clearItems();
108 // Insert hidden options for the capsule to get its item data from
109 items
= filters
.map( function ( filterItem
) {
110 return new OO
.ui
.MenuOptionWidget( {
111 data
: filterItem
.getName(),
112 label
: filterItem
.getLabel()
116 this.capsule
.getMenu().addItems( items
);
118 // Add defaults to capsule. We have to do this
119 // after we added to the capsule menu, since that's
120 // how the capsule multiselect widget knows which
122 filters
.forEach( function ( filterItem
) {
123 if ( filterItem
.isSelected() ) {
124 wrapper
.addCapsuleItemFromName( filterItem
.getName() );
130 * Respond to model item update
132 * @param {mw.rcfilters.dm.FilterItem} item Filter item that was updated
134 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.onModelItemUpdate = function ( item
) {
135 if ( item
.isSelected() ) {
136 this.addCapsuleItemFromName( item
.getName() );
138 this.capsule
.removeItemsFromData( [ item
.getName() ] );
143 * Add a capsule item by its filter name
145 * @param {string} itemName Filter name
147 mw
.rcfilters
.ui
.FilterWrapperWidget
.prototype.addCapsuleItemFromName = function ( itemName
) {
148 var item
= this.model
.getItemByName( itemName
);
150 this.capsule
.addItemsFromData( [ itemName
] );
152 // Deal with active/inactive capsule filter items
153 this.capsule
.getItemFromData( itemName
).$element
154 .toggleClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-item-inactive', !item
.isActive() );