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
) {
16 var title
= new OO
.ui
.LabelWidget( {
17 label
: mw
.msg( 'rcfilters-activefilters' ),
18 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
20 $contentWrapper
= $( '<div>' )
21 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
23 config
= config
|| {};
25 this.controller
= controller
;
27 this.queriesModel
= savedQueriesModel
;
28 this.$overlay
= config
.$overlay
|| this.$element
;
29 this.matchingQuery
= null;
32 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.call( this, $.extend( true, {
33 label
: mw
.msg( 'rcfilters-filterlist-title' ),
34 placeholder
: mw
.msg( 'rcfilters-empty-filter' ),
35 inputPosition
: 'outline',
36 allowArbitrary
: false,
37 allowDisplayInvalidTags
: false,
38 allowReordering
: false,
39 $overlay
: this.$overlay
,
41 hideWhenOutOfView
: false,
46 new OO
.ui
.ButtonWidget( {
49 flags
: [ 'progressive' ],
50 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
51 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
57 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
61 this.savedQueryTitle
= new OO
.ui
.LabelWidget( {
63 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
66 this.resetButton
= new OO
.ui
.ButtonWidget( {
68 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
71 this.saveQueryButton
= new mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget(
76 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
77 label
: mw
.msg( 'rcfilters-empty-filter' ),
78 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
80 this.$content
.append( this.emptyFilterMessage
.$element
);
83 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
84 // Stop propagation for mousedown, so that the widget doesn't
85 // trigger the focus on the input and scrolls up when we click the reset button
86 this.resetButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
87 this.saveQueryButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
88 this.model
.connect( this, {
89 initialize
: 'onModelInitialize',
90 itemUpdate
: 'onModelItemUpdate',
91 highlightChange
: 'onModelHighlightChange'
93 this.saveQueryButton
.connect( this, {
94 click
: 'onSaveQueryButtonClick',
95 saveCurrent
: 'setSavedQueryVisibility'
97 this.queriesModel
.connect( this, { itemUpdate
: 'onSavedQueriesItemUpdate' } );
100 $contentWrapper
.append(
102 this.savedQueryTitle
.$element
,
104 .addClass( 'mw-rcfilters-ui-table' )
106 // The filter list and button should appear side by side regardless of how
107 // wide the button is; the button also changes its width depending
108 // on language and its state, so the safest way to present both side
109 // by side is with a table layout
111 .addClass( 'mw-rcfilters-ui-row' )
114 .addClass( 'mw-rcfilters-ui-cell' )
115 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' ),
117 .addClass( 'mw-rcfilters-ui-cell' )
118 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
119 .append( this.saveQueryButton
.$element
),
121 .addClass( 'mw-rcfilters-ui-cell' )
122 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
123 .append( this.resetButton
.$element
)
129 this.$handle
.append( $contentWrapper
);
130 this.emptyFilterMessage
.toggle( this.isEmpty() );
131 this.savedQueryTitle
.toggle( false );
134 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
136 this.populateFromModel();
137 this.reevaluateResetRestoreState();
142 OO
.inheritClass( mw
.rcfilters
.ui
.FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
147 * Respond to query button click
149 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSaveQueryButtonClick = function () {
150 this.getMenu().toggle( false );
154 * Respond to save query item change. Mainly this is done to update the label in case
155 * a query item has been edited
157 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
159 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSavedQueriesItemUpdate = function ( item
) {
160 if ( this.matchingQuery
=== item
) {
161 // This means we just edited the item that is currently matched
162 this.savedQueryTitle
.setLabel( item
.getLabel() );
167 * Respond to menu toggle
169 * @param {boolean} isVisible Menu is visible
171 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
173 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onMenuToggle
.call( this );
176 mw
.hook( 'RcFilters.popup.open' ).fire();
178 if ( !this.getMenu().getSelectedItem() ) {
179 // If there are no selected items, scroll menu to top
180 // This has to be in a setTimeout so the menu has time
181 // to be positioned and fixed
182 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
186 this.selectTag( null );
193 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
195 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
198 this.scrollToTop( this.$element
);
204 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
206 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
208 this.emptyFilterMessage
.toggle( this.isEmpty() );
212 * Respond to model initialize event
214 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
215 this.populateFromModel();
217 this.setSavedQueryVisibility();
221 * Set the visibility of the saved query button
223 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.setSavedQueryVisibility = function () {
224 this.matchingQuery
= this.controller
.findQueryMatchingCurrentState();
226 this.savedQueryTitle
.setLabel(
227 this.matchingQuery
? this.matchingQuery
.getLabel() : ''
229 this.savedQueryTitle
.toggle( !!this.matchingQuery
);
230 this.saveQueryButton
.toggle(
236 * Respond to model itemUpdate event
238 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
240 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
244 this.model
.isHighlightEnabled() &&
245 item
.isHighlightSupported() &&
246 item
.getHighlightColor()
249 this.addTag( item
.getName(), item
.getLabel() );
251 this.removeTagByData( item
.getName() );
254 this.setSavedQueryVisibility();
256 // Re-evaluate reset state
257 this.reevaluateResetRestoreState();
263 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
265 this.menu
.getItemFromData( data
) &&
266 !this.isDuplicateData( data
)
273 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
274 this.controller
.toggleFilterSelect( item
.model
.getName() );
276 // Select the tag if it exists, or reset selection otherwise
277 this.selectTag( this.getItemFromData( item
.model
.getName() ) );
283 * Respond to highlightChange event
285 * @param {boolean} isHighlightEnabled Highlight is enabled
287 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
288 var highlightedItems
= this.model
.getHighlightedItems();
290 if ( isHighlightEnabled
) {
291 // Add capsule widgets
292 highlightedItems
.forEach( function ( filterItem
) {
293 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
296 // Remove capsule widgets if they're not selected
297 highlightedItems
.forEach( function ( filterItem
) {
298 if ( !filterItem
.isSelected() ) {
299 this.removeTagByData( filterItem
.getName() );
308 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
310 menuOption
= this.menu
.getItemFromData( tagItem
.getData() ),
311 oldInputValue
= this.input
.getValue();
314 this.input
.setValue( '' );
317 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
319 this.menu
.selectItem( menuOption
);
320 this.selectTag( tagItem
);
322 // Scroll to the item
323 if ( oldInputValue
) {
324 // We're binding a 'once' to the itemVisibilityChange event
325 // so this happens when the menu is ready after the items
326 // are visible again, in case this is done right after the
327 // user filtered the results
329 'itemVisibilityChange',
330 function () { widget
.scrollToTop( menuOption
.$element
); }
333 this.scrollToTop( menuOption
.$element
);
338 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
339 * If no items are given, reset selection from all.
341 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
342 * omit to deselect all
344 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
345 var i
, len
, selected
;
347 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
348 selected
= this.items
[ i
] === item
;
349 if ( this.items
[ i
].isSelected() !== selected
) {
350 this.items
[ i
].toggleSelected( selected
);
357 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
359 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
361 this.controller
.clearFilter( tagItem
.getName() );
367 * Respond to click event on the reset button
369 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
370 if ( this.model
.areCurrentFiltersEmpty() ) {
371 // Reset to default filters
372 this.controller
.resetToDefaults();
374 // Reset to have no filters
375 this.controller
.emptyFilters();
380 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
382 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
383 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
384 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
385 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
387 this.resetButton
.setIcon(
388 currFiltersAreEmpty
? 'history' : 'trash'
391 this.resetButton
.setLabel(
392 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
394 this.resetButton
.setTitle(
395 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
398 this.resetButton
.toggle( !hideResetButton
);
399 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
405 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
406 return new mw
.rcfilters
.ui
.FloatingMenuSelectWidget(
410 filterFromInput
: true
416 * Populate the menu from the model
418 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.populateFromModel = function () {
423 this.getMenu().clearItems();
425 $.each( this.model
.getFilterGroups(), function ( groupName
, groupModel
) {
428 new mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget(
432 $overlay
: widget
.$overlay
438 widget
.model
.getGroupFilters( groupName
).forEach( function ( filterItem
) {
440 new mw
.rcfilters
.ui
.FilterMenuOptionWidget(
444 $overlay
: widget
.$overlay
451 // Add all items to the menu
452 this.getMenu().addItems( items
);
458 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
459 var filterItem
= this.model
.getItemByName( data
);
462 return new mw
.rcfilters
.ui
.FilterTagItemWidget(
466 $overlay
: this.$overlay
473 * Scroll the element to top within its container
476 * @param {jQuery} $element Element to position
477 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
478 * much space (in pixels) above the widget.
480 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
) {
481 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
482 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
483 containerScrollTop
= $( container
).is( 'body, html' ) ? 0 : $( container
).scrollTop();
486 $( container
).animate( {
487 scrollTop
: containerScrollTop
+ pos
.top
- ( marginFromTop
|| 0 )