3 * Filter-specific CapsuleMultiselectWidget
6 * @extends OO.ui.CapsuleMultiselectWidget
9 * @param {mw.rcfilters.Controller} controller RCFilters controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model RCFilters view model
11 * @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
12 * @param {Object} config Configuration object
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
15 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
= function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller
, model
, filterInput
, config
) {
16 this.$overlay
= config
.$overlay
|| this.$element
;
19 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.parent
.call( this, $.extend( true, {
20 popup
: { $autoCloseIgnore
: filterInput
.$element
.add( this.$overlay
) }
23 this.controller
= controller
;
26 this.filterInput
= filterInput
;
28 this.$content
.prepend(
30 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
31 .text( mw
.msg( 'rcfilters-activefilters' ) )
34 this.resetButton
= new OO
.ui
.ButtonWidget( {
37 title
: mw
.msg( 'rcfilters-clear-all-filters' ),
38 classes
: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-resetButton' ]
41 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
42 label
: mw
.msg( 'rcfilters-empty-filter' ),
43 classes
: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-emptyFilters' ]
47 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
48 this.model
.connect( this, {
49 itemUpdate
: 'onModelItemUpdate',
50 highlightChange
: 'onModelHighlightChange'
52 // Add the filterInput as trigger
53 this.filterInput
.$input
54 .on( 'focus', this.focus
.bind( this ) );
57 this.$content
.append( this.emptyFilterMessage
.$element
);
60 // The content and button should appear side by side regardless of how
61 // wide the button is; the button also changes its width depending
62 // on language and its state, so the safest way to present both side
63 // by side is with a table layout
65 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-table' )
68 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-row' )
71 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content' )
72 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
73 .append( this.$content
),
75 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
76 .append( this.resetButton
.$element
)
82 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );
84 this.reevaluateResetRestoreState();
89 OO
.inheritClass( mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
, OO
.ui
.CapsuleMultiselectWidget
);
95 * @param {string[]} filters Array of names of removed filters
97 * Filters were removed
103 * Respond to model itemUpdate event
105 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
107 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
111 this.model
.isHighlightEnabled() &&
112 item
.isHighlightSupported() &&
113 item
.getHighlightColor()
116 this.addItemByName( item
.getName() );
118 this.removeItemByName( item
.getName() );
121 // Re-evaluate reset state
122 this.reevaluateResetRestoreState();
126 * Respond to highlightChange event
128 * @param {boolean} isHighlightEnabled Highlight is enabled
130 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
131 var highlightedItems
= this.model
.getHighlightedItems();
133 if ( isHighlightEnabled
) {
134 // Add capsule widgets
135 highlightedItems
.forEach( function ( filterItem
) {
136 this.addItemByName( filterItem
.getName() );
139 // Remove capsule widgets if they're not selected
140 highlightedItems
.forEach( function ( filterItem
) {
141 if ( !filterItem
.isSelected() ) {
142 this.removeItemByName( filterItem
.getName() );
149 * Respond to click event on the reset button
151 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onResetButtonClick = function () {
152 if ( this.model
.areCurrentFiltersEmpty() ) {
153 // Reset to default filters
154 this.controller
.resetToDefaults();
156 // Reset to have no filters
157 this.controller
.emptyFilters();
162 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
164 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
165 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
166 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
167 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
169 this.resetButton
.setIcon(
170 currFiltersAreEmpty
? 'history' : 'trash'
173 this.resetButton
.setLabel(
174 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
177 this.resetButton
.toggle( !hideResetButton
);
178 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
184 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.createItemWidget = function ( data
) {
185 var item
= this.model
.getItemByName( data
);
191 return new mw
.rcfilters
.ui
.CapsuleItemWidget(
194 { $overlay
: this.$overlay
}
199 * Add items by their filter name
201 * @param {string} name Filter name
203 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.addItemByName = function ( name
) {
204 var item
= this.model
.getItemByName( name
);
210 // Check that the item isn't already added
211 if ( !this.getItemFromData( name
) ) {
212 this.addItems( [ this.createItemWidget( name
) ] );
217 * Remove items by their filter name
219 * @param {string} name Filter name
221 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.removeItemByName = function ( name
) {
222 this.removeItemsFromData( [ name
] );
228 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.focus = function () {
229 // Override this method; we don't want to focus on the popup, and we
230 // don't want to bind the size to the handle.
231 if ( !this.isDisabled() ) {
232 this.popup
.toggle( true );
233 this.filterInput
.$input
.get( 0 ).focus();
241 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onFocusForPopup = function () {
242 // HACK can be removed once I21b8cff4048 is merged in oojs-ui
249 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onKeyDown = function () {};
254 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.onPopupFocusOut = function () {};
259 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.clearInput = function () {
260 if ( this.filterInput
) {
261 this.filterInput
.setValue( '' );
263 this.menu
.toggle( false );
264 this.menu
.selectItem();
265 this.menu
.highlightItem();
271 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.removeItems = function ( items
) {
273 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.parent
.prototype.removeItems
.call( this, items
);
275 // Destroy the item widget when it is removed
276 // This is done because we re-add items by recreating them, rather than hiding them
277 // and items include popups, that will just continue to be created and appended
279 items
.forEach( function ( widget
) {
285 * Override 'editItem' since it tries to use $input which does
286 * not exist when a popup is available.
288 mw
.rcfilters
.ui
.FilterCapsuleMultiselectWidget
.prototype.editItem = function () {};
289 }( mediaWiki
, jQuery
) );