3 * List displaying all filter groups
5 * @extends OO.ui.MenuTagMultiselectWidget
6 * @mixins OO.ui.mixin.PendingElement
9 * @param {mw.rcfilters.Controller} controller Controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
11 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
12 * @param {Object} config Configuration object
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
15 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
= function MwRcfiltersUiFilterTagMultiselectWidget( controller
, model
, savedQueriesModel
, config
) {
17 areSavedQueriesEnabled
= mw
.config
.get( 'wgStructuredChangeFiltersEnableSaving' ),
18 title
= new OO
.ui
.LabelWidget( {
19 label
: mw
.msg( 'rcfilters-activefilters' ),
20 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
22 $contentWrapper
= $( '<div>' )
23 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
25 config
= config
|| {};
27 this.controller
= controller
;
29 this.queriesModel
= savedQueriesModel
;
30 this.$overlay
= config
.$overlay
|| this.$element
;
31 this.matchingQuery
= null;
32 this.areSavedQueriesEnabled
= areSavedQueriesEnabled
;
35 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.call( this, $.extend( true, {
36 label
: mw
.msg( 'rcfilters-filterlist-title' ),
37 placeholder
: mw
.msg( 'rcfilters-empty-filter' ),
38 inputPosition
: 'outline',
39 allowArbitrary
: false,
40 allowDisplayInvalidTags
: false,
41 allowReordering
: false,
42 $overlay
: this.$overlay
,
44 hideWhenOutOfView
: false,
49 new OO
.ui
.ButtonWidget( {
52 flags
: [ 'progressive' ],
53 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
54 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
60 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
64 this.savedQueryTitle
= new OO
.ui
.LabelWidget( {
66 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
69 this.resetButton
= new OO
.ui
.ButtonWidget( {
71 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
74 if ( areSavedQueriesEnabled
) {
75 this.saveQueryButton
= new mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget(
80 this.saveQueryButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
82 this.saveQueryButton
.connect( this, {
83 click
: 'onSaveQueryButtonClick',
84 saveCurrent
: 'setSavedQueryVisibility'
88 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
89 label
: mw
.msg( 'rcfilters-empty-filter' ),
90 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
92 this.$content
.append( this.emptyFilterMessage
.$element
);
95 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
96 // Stop propagation for mousedown, so that the widget doesn't
97 // trigger the focus on the input and scrolls up when we click the reset button
98 this.resetButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
99 this.model
.connect( this, {
100 initialize
: 'onModelInitialize',
101 update
: 'onModelUpdate',
102 itemUpdate
: 'onModelItemUpdate',
103 highlightChange
: 'onModelHighlightChange'
105 this.input
.connect( this, { change
: 'onInputChange' } );
106 this.queriesModel
.connect( this, { itemUpdate
: 'onSavedQueriesItemUpdate' } );
108 // The filter list and button should appear side by side regardless of how
109 // wide the button is; the button also changes its width depending
110 // on language and its state, so the safest way to present both side
111 // by side is with a table layout
112 rcFiltersRow
= $( '<div>' )
113 .addClass( 'mw-rcfilters-ui-row' )
116 .addClass( 'mw-rcfilters-ui-cell' )
117 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
120 if ( areSavedQueriesEnabled
) {
123 .addClass( 'mw-rcfilters-ui-cell' )
124 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
125 .append( this.saveQueryButton
.$element
)
131 .addClass( 'mw-rcfilters-ui-cell' )
132 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
133 .append( this.resetButton
.$element
)
137 $contentWrapper
.append(
139 this.savedQueryTitle
.$element
,
141 .addClass( 'mw-rcfilters-ui-table' )
148 this.$handle
.append( $contentWrapper
);
149 this.emptyFilterMessage
.toggle( this.isEmpty() );
150 this.savedQueryTitle
.toggle( false );
153 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
155 this.reevaluateResetRestoreState();
160 OO
.inheritClass( mw
.rcfilters
.ui
.FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
165 * Respond to input change event
167 * @param {string} value Value of the input
169 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputChange = function ( value
) {
170 var view
= 'default';
172 if ( value
.indexOf( this.model
.getViewTrigger( 'namespaces' ) ) === 0 ) {
176 this.controller
.switchView( view
);
179 * Respond to query button click
181 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSaveQueryButtonClick = function () {
182 this.getMenu().toggle( false );
186 * Respond to save query item change. Mainly this is done to update the label in case
187 * a query item has been edited
189 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
191 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSavedQueriesItemUpdate = function ( item
) {
192 if ( this.matchingQuery
=== item
) {
193 // This means we just edited the item that is currently matched
194 this.savedQueryTitle
.setLabel( item
.getLabel() );
199 * Respond to menu toggle
201 * @param {boolean} isVisible Menu is visible
203 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
205 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onMenuToggle
.call( this );
208 mw
.hook( 'RcFilters.popup.open' ).fire();
210 if ( !this.getMenu().getSelectedItem() ) {
211 // If there are no selected items, scroll menu to top
212 // This has to be in a setTimeout so the menu has time
213 // to be positioned and fixed
214 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
218 this.selectTag( null );
220 // Clear input if the only thing in the input is the prefix
222 this.input
.getValue() === this.model
.getViewTrigger( this.model
.getCurrentView() )
225 this.input
.setValue( '' );
233 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
235 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
238 this.scrollToTop( this.$element
);
244 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.doInputEscape = function () {
246 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.doInputEscape
.call( this );
249 this.input
.$input
.blur();
255 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
257 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
259 this.emptyFilterMessage
.toggle( this.isEmpty() );
263 * Respond to model initialize event
265 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
266 this.setSavedQueryVisibility();
270 * Respond to model update event
272 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelUpdate = function () {
273 this.updateElementsForView();
277 * Update the elements in the widget to the current view
279 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.updateElementsForView = function () {
280 var view
= this.model
.getCurrentView(),
281 inputValue
= this.input
.getValue(),
282 newInputValue
= inputValue
;
286 if ( inputValue
.indexOf( this.model
.getViewTrigger( 'namespaces' ) ) !== 0 ) {
287 // Add the prefix to the input
288 newInputValue
= this.model
.getViewTrigger( 'namespaces' ) + inputValue
;
293 if ( inputValue
.indexOf( this.model
.getViewTrigger( 'namespaces' ) ) === 0 ) {
295 newInputValue
= inputValue
.substr( 1 );
301 this.input
.setValue( newInputValue
);
305 * Set the visibility of the saved query button
307 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.setSavedQueryVisibility = function () {
308 if ( this.areSavedQueriesEnabled
) {
309 this.matchingQuery
= this.controller
.findQueryMatchingCurrentState();
311 this.savedQueryTitle
.setLabel(
312 this.matchingQuery
? this.matchingQuery
.getLabel() : ''
314 this.savedQueryTitle
.toggle( !!this.matchingQuery
);
315 this.saveQueryButton
.toggle(
323 * Respond to model itemUpdate event
325 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
327 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
331 this.model
.isHighlightEnabled() &&
332 item
.isHighlightSupported() &&
333 item
.getHighlightColor()
336 this.addTag( item
.getName(), item
.getLabel() );
338 this.removeTagByData( item
.getName() );
341 this.setSavedQueryVisibility();
343 // Re-evaluate reset state
344 this.reevaluateResetRestoreState();
350 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
352 this.model
.getItemByName( data
) &&
353 !this.isDuplicateData( data
)
360 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
361 this.controller
.toggleFilterSelect( item
.model
.getName() );
363 // Select the tag if it exists, or reset selection otherwise
364 this.selectTag( this.getItemFromData( item
.model
.getName() ) );
370 * Respond to highlightChange event
372 * @param {boolean} isHighlightEnabled Highlight is enabled
374 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
375 var highlightedItems
= this.model
.getHighlightedItems();
377 if ( isHighlightEnabled
) {
378 // Add capsule widgets
379 highlightedItems
.forEach( function ( filterItem
) {
380 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
383 // Remove capsule widgets if they're not selected
384 highlightedItems
.forEach( function ( filterItem
) {
385 if ( !filterItem
.isSelected() ) {
386 this.removeTagByData( filterItem
.getName() );
395 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
397 menuOption
= this.menu
.getItemFromModel( tagItem
.getModel() ),
398 oldInputValue
= this.input
.getValue();
401 this.input
.setValue( '' );
404 this.controller
.switchView( tagItem
.getView() );
407 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
409 this.menu
.selectItem( menuOption
);
410 this.selectTag( tagItem
);
412 // Scroll to the item
413 if ( oldInputValue
) {
414 // We're binding a 'once' to the itemVisibilityChange event
415 // so this happens when the menu is ready after the items
416 // are visible again, in case this is done right after the
417 // user filtered the results
419 'itemVisibilityChange',
420 function () { widget
.scrollToTop( menuOption
.$element
); }
423 this.scrollToTop( menuOption
.$element
);
428 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
429 * If no items are given, reset selection from all.
431 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
432 * omit to deselect all
434 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
435 var i
, len
, selected
;
437 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
438 selected
= this.items
[ i
] === item
;
439 if ( this.items
[ i
].isSelected() !== selected
) {
440 this.items
[ i
].toggleSelected( selected
);
447 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
449 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
451 this.controller
.clearFilter( tagItem
.getName() );
457 * Respond to click event on the reset button
459 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
460 if ( this.model
.areCurrentFiltersEmpty() ) {
461 // Reset to default filters
462 this.controller
.resetToDefaults();
464 // Reset to have no filters
465 this.controller
.emptyFilters();
470 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
472 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
473 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
474 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
475 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
477 this.resetButton
.setIcon(
478 currFiltersAreEmpty
? 'history' : 'trash'
481 this.resetButton
.setLabel(
482 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
484 this.resetButton
.setTitle(
485 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
488 this.resetButton
.toggle( !hideResetButton
);
489 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
495 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
496 return new mw
.rcfilters
.ui
.MenuSelectWidget(
500 filterFromInput
: true
508 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
509 var filterItem
= this.model
.getItemByName( data
);
512 return new mw
.rcfilters
.ui
.FilterTagItemWidget(
516 $overlay
: this.$overlay
523 * Scroll the element to top within its container
526 * @param {jQuery} $element Element to position
527 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
528 * much space (in pixels) above the widget.
530 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
) {
531 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
532 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
533 containerScrollTop
= $( container
).is( 'body, html' ) ? 0 : $( container
).scrollTop();
536 $( container
).animate( {
537 scrollTop
: containerScrollTop
+ pos
.top
- ( marginFromTop
|| 0 )