3 * List displaying all filter groups
6 * @extends OO.ui.MenuTagMultiselectWidget
7 * @mixins OO.ui.mixin.PendingElement
10 * @param {mw.rcfilters.Controller} controller Controller
11 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
12 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
13 * @param {Object} config Configuration object
14 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
16 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
= function MwRcfiltersUiFilterTagMultiselectWidget( controller
, model
, savedQueriesModel
, config
) {
18 areSavedQueriesEnabled
= mw
.config
.get( 'wgStructuredChangeFiltersEnableSaving' ),
19 title
= new OO
.ui
.LabelWidget( {
20 label
: mw
.msg( 'rcfilters-activefilters' ),
21 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
23 $contentWrapper
= $( '<div>' )
24 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
26 config
= config
|| {};
28 this.controller
= controller
;
30 this.queriesModel
= savedQueriesModel
;
31 this.$overlay
= config
.$overlay
|| this.$element
;
32 this.matchingQuery
= null;
33 this.areSavedQueriesEnabled
= areSavedQueriesEnabled
;
36 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.call( this, $.extend( true, {
37 label
: mw
.msg( 'rcfilters-filterlist-title' ),
38 placeholder
: mw
.msg( 'rcfilters-empty-filter' ),
39 inputPosition
: 'outline',
40 allowArbitrary
: false,
41 allowDisplayInvalidTags
: false,
42 allowReordering
: false,
43 $overlay
: this.$overlay
,
45 hideWhenOutOfView
: false,
51 disabled
: !mw
.config
.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ),
53 // View select menu, appears on default view only
54 $element
: $( '<div>' )
55 .append( new mw
.rcfilters
.ui
.ViewSwitchWidget( this.controller
, this.model
).$element
),
60 // Feedback footer, appears on all views
61 $element
: $( '<div>' )
63 new OO
.ui
.ButtonWidget( {
66 flags
: [ 'progressive' ],
67 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
68 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
76 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
80 this.savedQueryTitle
= new OO
.ui
.LabelWidget( {
82 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
85 this.resetButton
= new OO
.ui
.ButtonWidget( {
87 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
90 if ( areSavedQueriesEnabled
) {
91 this.saveQueryButton
= new mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget(
96 this.saveQueryButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
98 this.saveQueryButton
.connect( this, {
99 click
: 'onSaveQueryButtonClick',
100 saveCurrent
: 'setSavedQueryVisibility'
104 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
105 label
: mw
.msg( 'rcfilters-empty-filter' ),
106 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
108 this.$content
.append( this.emptyFilterMessage
.$element
);
111 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
112 // Stop propagation for mousedown, so that the widget doesn't
113 // trigger the focus on the input and scrolls up when we click the reset button
114 this.resetButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
115 this.model
.connect( this, {
116 initialize
: 'onModelInitialize',
117 update
: 'onModelUpdate',
118 itemUpdate
: 'onModelItemUpdate',
119 highlightChange
: 'onModelHighlightChange'
121 this.input
.connect( this, { change
: 'onInputChange' } );
122 this.queriesModel
.connect( this, { itemUpdate
: 'onSavedQueriesItemUpdate' } );
124 // The filter list and button should appear side by side regardless of how
125 // wide the button is; the button also changes its width depending
126 // on language and its state, so the safest way to present both side
127 // by side is with a table layout
128 rcFiltersRow
= $( '<div>' )
129 .addClass( 'mw-rcfilters-ui-row' )
132 .addClass( 'mw-rcfilters-ui-cell' )
133 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
136 if ( areSavedQueriesEnabled
) {
139 .addClass( 'mw-rcfilters-ui-cell' )
140 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
141 .append( this.saveQueryButton
.$element
)
145 if ( mw
.config
.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ) {
146 // Add a selector at the right of the input
147 this.viewsSelectWidget
= new OO
.ui
.ButtonSelectWidget( {
148 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
150 new OO
.ui
.ButtonOptionWidget( {
154 title
: mw
.msg( 'rcfilters-view-namespaces-tooltip' )
156 new OO
.ui
.ButtonOptionWidget( {
160 title
: mw
.msg( 'rcfilters-view-tags-tooltip' )
165 // Rearrange the UI so the select widget is at the right of the input
166 this.$element
.append(
168 .addClass( 'mw-rcfilters-ui-table' )
171 .addClass( 'mw-rcfilters-ui-row' )
174 .addClass( 'mw-rcfilters-ui-cell' )
175 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
176 .append( this.input
.$element
),
178 .addClass( 'mw-rcfilters-ui-cell' )
179 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
180 .append( this.viewsSelectWidget
.$element
)
186 this.viewsSelectWidget
.connect( this, { choose
: 'onViewsSelectWidgetChoose' } );
191 .addClass( 'mw-rcfilters-ui-cell' )
192 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
193 .append( this.resetButton
.$element
)
197 $contentWrapper
.append(
199 this.savedQueryTitle
.$element
,
201 .addClass( 'mw-rcfilters-ui-table' )
208 this.$handle
.append( $contentWrapper
);
209 this.emptyFilterMessage
.toggle( this.isEmpty() );
210 this.savedQueryTitle
.toggle( false );
213 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
215 this.reevaluateResetRestoreState();
220 OO
.inheritClass( mw
.rcfilters
.ui
.FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
225 * Respond to view select widget choose event
227 * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget
229 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget
) {
230 this.controller
.switchView( buttonOptionWidget
.getData() );
231 this.viewsSelectWidget
.selectItem( null );
236 * Respond to input change event
238 * @param {string} value Value of the input
240 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputChange = function ( value
) {
243 value
= value
.trim();
245 view
= this.model
.getViewByTrigger( value
.substr( 0, 1 ) );
247 this.controller
.switchView( view
);
250 * Respond to query button click
252 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSaveQueryButtonClick = function () {
253 this.getMenu().toggle( false );
257 * Respond to save query item change. Mainly this is done to update the label in case
258 * a query item has been edited
260 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
262 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSavedQueriesItemUpdate = function ( item
) {
263 if ( this.matchingQuery
=== item
) {
264 // This means we just edited the item that is currently matched
265 this.savedQueryTitle
.setLabel( item
.getLabel() );
270 * Respond to menu toggle
272 * @param {boolean} isVisible Menu is visible
274 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
276 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onMenuToggle
.call( this );
279 mw
.hook( 'RcFilters.popup.open' ).fire();
281 if ( !this.getMenu().getSelectedItem() ) {
282 // If there are no selected items, scroll menu to top
283 // This has to be in a setTimeout so the menu has time
284 // to be positioned and fixed
285 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
289 this.selectTag( null );
291 // Clear input if the only thing in the input is the prefix
293 this.input
.getValue().trim() === this.model
.getViewTrigger( this.model
.getCurrentView() )
296 this.input
.setValue( '' );
299 // Log filter grouping
300 this.controller
.trackFilterGroupings( 'filtermenu' );
303 this.input
.setIcon( isVisible
? 'search' : 'menu' );
309 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
311 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
314 this.scrollToTop( this.$element
);
320 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.doInputEscape = function () {
322 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.doInputEscape
.call( this );
325 this.input
.$input
.blur();
331 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
333 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
335 this.emptyFilterMessage
.toggle( this.isEmpty() );
339 * Respond to model initialize event
341 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
342 this.setSavedQueryVisibility();
346 * Respond to model update event
348 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelUpdate = function () {
349 this.updateElementsForView();
353 * Update the elements in the widget to the current view
355 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.updateElementsForView = function () {
356 var view
= this.model
.getCurrentView(),
357 inputValue
= this.input
.getValue().trim(),
358 inputView
= this.model
.getViewByTrigger( inputValue
.substr( 0, 1 ) );
360 if ( inputView
!== 'default' ) {
361 // We have a prefix already, remove it
362 inputValue
= inputValue
.substr( 1 );
365 if ( inputView
!== view
) {
366 // Add the correct prefix
367 inputValue
= this.model
.getViewTrigger( view
) + inputValue
;
371 this.input
.setValue( inputValue
);
375 * Set the visibility of the saved query button
377 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.setSavedQueryVisibility = function () {
378 if ( this.areSavedQueriesEnabled
) {
379 this.matchingQuery
= this.controller
.findQueryMatchingCurrentState();
381 this.savedQueryTitle
.setLabel(
382 this.matchingQuery
? this.matchingQuery
.getLabel() : ''
384 this.savedQueryTitle
.toggle( !!this.matchingQuery
);
385 this.saveQueryButton
.toggle(
390 if ( this.matchingQuery
) {
397 * Respond to model itemUpdate event
399 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
401 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
402 if ( item
.getGroupModel().isHidden() ) {
409 this.model
.isHighlightEnabled() &&
410 item
.isHighlightSupported() &&
411 item
.getHighlightColor()
414 this.addTag( item
.getName(), item
.getLabel() );
416 this.removeTagByData( item
.getName() );
419 this.setSavedQueryVisibility();
421 // Re-evaluate reset state
422 this.reevaluateResetRestoreState();
428 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
430 this.model
.getItemByName( data
) &&
431 !this.isDuplicateData( data
)
438 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
439 this.controller
.toggleFilterSelect( item
.model
.getName() );
441 // Select the tag if it exists, or reset selection otherwise
442 this.selectTag( this.getItemFromData( item
.model
.getName() ) );
448 * Respond to highlightChange event
450 * @param {boolean} isHighlightEnabled Highlight is enabled
452 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
453 var highlightedItems
= this.model
.getHighlightedItems();
455 if ( isHighlightEnabled
) {
456 // Add capsule widgets
457 highlightedItems
.forEach( function ( filterItem
) {
458 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
461 // Remove capsule widgets if they're not selected
462 highlightedItems
.forEach( function ( filterItem
) {
463 if ( !filterItem
.isSelected() ) {
464 this.removeTagByData( filterItem
.getName() );
473 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
475 menuOption
= this.menu
.getItemFromModel( tagItem
.getModel() ),
476 oldInputValue
= this.input
.getValue().trim();
478 this.menu
.setUserSelecting( true );
481 this.input
.setValue( '' );
484 this.controller
.switchView( tagItem
.getView() );
487 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
489 this.menu
.selectItem( menuOption
);
490 this.selectTag( tagItem
);
492 // Scroll to the item
493 if ( this.model
.removeViewTriggers( oldInputValue
) ) {
494 // We're binding a 'once' to the itemVisibilityChange event
495 // so this happens when the menu is ready after the items
496 // are visible again, in case this is done right after the
497 // user filtered the results
499 'itemVisibilityChange',
501 widget
.scrollToTop( menuOption
.$element
);
502 widget
.menu
.setUserSelecting( false );
506 this.scrollToTop( menuOption
.$element
);
507 this.menu
.setUserSelecting( false );
513 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
514 * If no items are given, reset selection from all.
516 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
517 * omit to deselect all
519 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
520 var i
, len
, selected
;
522 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
523 selected
= this.items
[ i
] === item
;
524 if ( this.items
[ i
].isSelected() !== selected
) {
525 this.items
[ i
].toggleSelected( selected
);
532 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
534 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
536 this.controller
.clearFilter( tagItem
.getName() );
542 * Respond to click event on the reset button
544 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
545 if ( this.model
.areCurrentFiltersEmpty() ) {
546 // Reset to default filters
547 this.controller
.resetToDefaults();
549 // Reset to have no filters
550 this.controller
.emptyFilters();
555 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
557 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
558 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
559 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
560 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
562 this.resetButton
.setIcon(
563 currFiltersAreEmpty
? 'history' : 'trash'
566 this.resetButton
.setLabel(
567 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
569 this.resetButton
.setTitle(
570 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
573 this.resetButton
.toggle( !hideResetButton
);
574 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
580 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
581 return new mw
.rcfilters
.ui
.MenuSelectWidget(
585 filterFromInput
: true
593 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
594 var filterItem
= this.model
.getItemByName( data
);
597 return new mw
.rcfilters
.ui
.FilterTagItemWidget(
601 $overlay
: this.$overlay
607 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.emphasize = function () {
609 !this.$handle
.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
612 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
613 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
615 setTimeout( function () {
617 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
619 setTimeout( function () {
621 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
622 }.bind( this ), 1000 );
623 }.bind( this ), 500 );
628 * Scroll the element to top within its container
631 * @param {jQuery} $element Element to position
632 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
633 * much space (in pixels) above the widget.
635 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
) {
636 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
637 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
638 containerScrollTop
= $( container
).is( 'body, html' ) ? 0 : $( container
).scrollTop();
641 $( container
).animate( {
642 scrollTop
: containerScrollTop
+ pos
.top
- ( marginFromTop
|| 0 )