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 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.currentView
= this.model
.getCurrentView();
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 // Our filtering is done through the model
45 filterFromInput
: false,
46 hideWhenOutOfView
: false,
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 ( !mw
.user
.isAnon() ) {
91 this.saveQueryButton
= new mw
.rcfilters
.ui
.SaveFiltersPopupButtonWidget(
95 $overlay
: this.$overlay
99 this.saveQueryButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
101 this.saveQueryButton
.connect( this, {
102 click
: 'onSaveQueryButtonClick',
103 saveCurrent
: 'setSavedQueryVisibility'
105 this.queriesModel
.connect( this, {
106 itemUpdate
: 'onSavedQueriesItemUpdate',
107 initialize
: 'onSavedQueriesInitialize',
108 'default': 'reevaluateResetRestoreState'
112 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
113 label
: mw
.msg( 'rcfilters-empty-filter' ),
114 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
116 this.$content
.append( this.emptyFilterMessage
.$element
);
119 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
120 // Stop propagation for mousedown, so that the widget doesn't
121 // trigger the focus on the input and scrolls up when we click the reset button
122 this.resetButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
123 this.model
.connect( this, {
124 initialize
: 'onModelInitialize',
125 update
: 'onModelUpdate',
126 searchChange
: 'onModelSearchChange',
127 itemUpdate
: 'onModelItemUpdate',
128 highlightChange
: 'onModelHighlightChange'
130 this.input
.connect( this, { change
: 'onInputChange' } );
132 // The filter list and button should appear side by side regardless of how
133 // wide the button is; the button also changes its width depending
134 // on language and its state, so the safest way to present both side
135 // by side is with a table layout
136 rcFiltersRow
= $( '<div>' )
137 .addClass( 'mw-rcfilters-ui-row' )
140 .addClass( 'mw-rcfilters-ui-cell' )
141 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
144 if ( !mw
.user
.isAnon() ) {
147 .addClass( 'mw-rcfilters-ui-cell' )
148 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
149 .append( this.saveQueryButton
.$element
)
153 // Add a selector at the right of the input
154 this.viewsSelectWidget
= new OO
.ui
.ButtonSelectWidget( {
155 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
157 new OO
.ui
.ButtonOptionWidget( {
161 label
: mw
.msg( 'namespaces' ),
162 title
: mw
.msg( 'rcfilters-view-namespaces-tooltip' )
164 new OO
.ui
.ButtonOptionWidget( {
168 label
: mw
.msg( 'tags-title' ),
169 title
: mw
.msg( 'rcfilters-view-tags-tooltip' )
174 // Rearrange the UI so the select widget is at the right of the input
175 this.$element
.append(
177 .addClass( 'mw-rcfilters-ui-table' )
180 .addClass( 'mw-rcfilters-ui-row' )
183 .addClass( 'mw-rcfilters-ui-cell' )
184 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
185 .append( this.input
.$element
),
187 .addClass( 'mw-rcfilters-ui-cell' )
188 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
189 .append( this.viewsSelectWidget
.$element
)
195 this.viewsSelectWidget
.connect( this, { choose
: 'onViewsSelectWidgetChoose' } );
199 .addClass( 'mw-rcfilters-ui-cell' )
200 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
201 .append( this.resetButton
.$element
)
205 $contentWrapper
.append(
207 this.savedQueryTitle
.$element
,
209 .addClass( 'mw-rcfilters-ui-table' )
216 this.$handle
.append( $contentWrapper
);
217 this.emptyFilterMessage
.toggle( this.isEmpty() );
218 this.savedQueryTitle
.toggle( false );
221 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
223 this.reevaluateResetRestoreState();
228 OO
.inheritClass( mw
.rcfilters
.ui
.FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
233 * Respond to view select widget choose event
235 * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget
237 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget
) {
238 this.controller
.switchView( buttonOptionWidget
.getData() );
239 this.viewsSelectWidget
.selectItem( null );
244 * Respond to model search change event
246 * @param {string} value Search value
248 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelSearchChange = function ( value
) {
249 this.input
.setValue( value
);
253 * Respond to input change event
255 * @param {string} value Value of the input
257 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputChange = function ( value
) {
258 this.controller
.setSearch( value
);
262 * Respond to query button click
264 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSaveQueryButtonClick = function () {
265 this.getMenu().toggle( false );
269 * Respond to save query model initialization
271 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSavedQueriesInitialize = function () {
272 this.setSavedQueryVisibility();
276 * Respond to save query item change. Mainly this is done to update the label in case
277 * a query item has been edited
279 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
281 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onSavedQueriesItemUpdate = function ( item
) {
282 if ( this.matchingQuery
=== item
) {
283 // This means we just edited the item that is currently matched
284 this.savedQueryTitle
.setLabel( item
.getLabel() );
289 * Respond to menu toggle
291 * @param {boolean} isVisible Menu is visible
293 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
295 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onMenuToggle
.call( this );
300 mw
.hook( 'RcFilters.popup.open' ).fire();
302 if ( !this.getMenu().findSelectedItem() ) {
303 // If there are no selected items, scroll menu to top
304 // This has to be in a setTimeout so the menu has time
305 // to be positioned and fixed
306 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
312 this.selectTag( null );
315 this.controller
.setSearch( '' );
317 // Log filter grouping
318 this.controller
.trackFilterGroupings( 'filtermenu' );
321 this.input
.setIcon( isVisible
? 'search' : 'menu' );
327 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
329 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
331 // Only scroll to top of the viewport if:
332 // - The widget is more than 20px from the top
333 // - The widget is not above the top of the viewport (do not scroll downwards)
334 // (This isn't represented because >20 is, anyways and always, bigger than 0)
335 this.scrollToTop( this.$element
, 0, { min
: 20, max
: Infinity
} );
341 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.doInputEscape = function () {
343 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.doInputEscape
.call( this );
346 this.input
.$input
.blur();
352 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMouseDown = function ( e
) {
353 if ( !this.isDisabled() && e
.which
=== OO
.ui
.MouseButtons
.LEFT
) {
363 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
365 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
367 this.emptyFilterMessage
.toggle( this.isEmpty() );
371 * Respond to model initialize event
373 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
374 this.setSavedQueryVisibility();
378 * Respond to model update event
380 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelUpdate = function () {
381 this.updateElementsForView();
385 * Update the elements in the widget to the current view
387 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.updateElementsForView = function () {
388 var view
= this.model
.getCurrentView(),
389 inputValue
= this.input
.getValue().trim(),
390 inputView
= this.model
.getViewByTrigger( inputValue
.substr( 0, 1 ) );
392 if ( inputView
!== 'default' ) {
393 // We have a prefix already, remove it
394 inputValue
= inputValue
.substr( 1 );
397 if ( inputView
!== view
) {
398 // Add the correct prefix
399 inputValue
= this.model
.getViewTrigger( view
) + inputValue
;
403 this.input
.setValue( inputValue
);
405 if ( this.currentView
!== view
) {
406 this.scrollToTop( this.$element
);
407 this.currentView
= view
;
412 * Set the visibility of the saved query button
414 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.setSavedQueryVisibility = function () {
415 if ( mw
.user
.isAnon() ) {
419 this.matchingQuery
= this.controller
.findQueryMatchingCurrentState();
421 this.savedQueryTitle
.setLabel(
422 this.matchingQuery
? this.matchingQuery
.getLabel() : ''
424 this.savedQueryTitle
.toggle( !!this.matchingQuery
);
425 this.saveQueryButton
.setDisabled( !!this.matchingQuery
);
426 this.saveQueryButton
.setTitle( !this.matchingQuery
?
427 mw
.msg( 'rcfilters-savedqueries-add-new-title' ) :
428 mw
.msg( 'rcfilters-savedqueries-already-saved' ) );
430 if ( this.matchingQuery
) {
436 * Respond to model itemUpdate event
437 * fixme: when a new state is applied to the model this function is called 60+ times in a row
439 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
441 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
442 if ( !item
.getGroupModel().isHidden() ) {
446 this.model
.isHighlightEnabled() &&
447 item
.getHighlightColor()
450 this.addTag( item
.getName(), item
.getLabel() );
452 this.removeTagByData( item
.getName() );
456 this.setSavedQueryVisibility();
458 // Re-evaluate reset state
459 this.reevaluateResetRestoreState();
465 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
467 this.model
.getItemByName( data
) &&
468 !this.isDuplicateData( data
)
475 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
476 this.controller
.toggleFilterSelect( item
.model
.getName() );
478 // Select the tag if it exists, or reset selection otherwise
479 this.selectTag( this.findItemFromData( item
.model
.getName() ) );
485 * Respond to highlightChange event
487 * @param {boolean} isHighlightEnabled Highlight is enabled
489 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
490 var highlightedItems
= this.model
.getHighlightedItems();
492 if ( isHighlightEnabled
) {
493 // Add capsule widgets
494 highlightedItems
.forEach( function ( filterItem
) {
495 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
498 // Remove capsule widgets if they're not selected
499 highlightedItems
.forEach( function ( filterItem
) {
500 if ( !filterItem
.isSelected() ) {
501 this.removeTagByData( filterItem
.getName() );
506 this.setSavedQueryVisibility();
512 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
513 var menuOption
= this.menu
.getItemFromModel( tagItem
.getModel() );
515 this.menu
.setUserSelecting( true );
517 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
520 this.controller
.resetSearchForView( tagItem
.getView() );
522 this.selectTag( tagItem
);
523 this.scrollToTop( menuOption
.$element
);
525 this.menu
.setUserSelecting( false );
529 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
530 * If no items are given, reset selection from all.
532 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
533 * omit to deselect all
535 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
536 var i
, len
, selected
;
538 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
539 selected
= this.items
[ i
] === item
;
540 if ( this.items
[ i
].isSelected() !== selected
) {
541 this.items
[ i
].toggleSelected( selected
);
548 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
550 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
552 this.controller
.clearFilter( tagItem
.getName() );
558 * Respond to click event on the reset button
560 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
561 if ( this.model
.areVisibleFiltersEmpty() ) {
562 // Reset to default filters
563 this.controller
.resetToDefaults();
565 // Reset to have no filters
566 this.controller
.emptyFilters();
571 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
573 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
574 var defaultsAreEmpty
= this.controller
.areDefaultsEmpty(),
575 currFiltersAreEmpty
= this.model
.areVisibleFiltersEmpty(),
576 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
578 this.resetButton
.setIcon(
579 currFiltersAreEmpty
? 'history' : 'trash'
582 this.resetButton
.setLabel(
583 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
585 this.resetButton
.setTitle(
586 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
589 this.resetButton
.toggle( !hideResetButton
);
590 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
596 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
597 return new mw
.rcfilters
.ui
.MenuSelectWidget(
607 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
608 var filterItem
= this.model
.getItemByName( data
);
611 return new mw
.rcfilters
.ui
.FilterTagItemWidget(
614 this.model
.getInvertModel(),
617 $overlay
: this.$overlay
623 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.emphasize = function () {
625 !this.$handle
.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
628 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
629 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
631 setTimeout( function () {
633 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
635 setTimeout( function () {
637 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
638 }.bind( this ), 1000 );
639 }.bind( this ), 500 );
644 * Scroll the element to top within its container
647 * @param {jQuery} $element Element to position
648 * @param {number} [marginFromTop=0] When scrolling the entire widget to the top, leave this
649 * much space (in pixels) above the widget.
650 * @param {Object} [threshold] Minimum distance from the top of the element to scroll at all
651 * @param {number} [threshold.min] Minimum distance above the element
652 * @param {number} [threshold.max] Minimum distance below the element
654 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
, threshold
) {
655 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
656 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
657 containerScrollTop
= $( container
).scrollTop(),
658 effectiveScrollTop
= $( container
).is( 'body, html' ) ? 0 : containerScrollTop
,
659 newScrollTop
= effectiveScrollTop
+ pos
.top
- ( marginFromTop
|| 0 );
663 threshold
=== undefined ||
666 threshold
.min
=== undefined ||
667 newScrollTop
- containerScrollTop
>= threshold
.min
670 threshold
.max
=== undefined ||
671 newScrollTop
- containerScrollTop
<= threshold
.max
675 $( container
).animate( {
676 scrollTop
: newScrollTop