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 hideWhenOutOfView: false,
51 // View select menu, appears on default view only
52 $element: $( '<div>' )
53 .append( new mw.rcfilters.ui.ViewSwitchWidget( this.controller, this.model ).$element ),
58 // Feedback footer, appears on all views
59 $element: $( '<div>' )
61 new OO.ui.ButtonWidget( {
64 flags: [ 'progressive' ],
65 label: mw.msg( 'rcfilters-filterlist-feedbacklink' ),
66 href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
74 placeholder: mw.msg( 'rcfilters-search-placeholder' )
78 this.savedQueryTitle = new OO.ui.LabelWidget( {
80 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
83 this.resetButton = new OO.ui.ButtonWidget( {
85 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
88 if ( !mw.user.isAnon() ) {
89 this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
94 this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
96 this.saveQueryButton.connect( this, {
97 click: 'onSaveQueryButtonClick',
98 saveCurrent: 'setSavedQueryVisibility'
100 this.queriesModel.connect( this, {
101 itemUpdate: 'onSavedQueriesItemUpdate',
102 initialize: 'onSavedQueriesInitialize',
103 'default': 'reevaluateResetRestoreState'
107 this.emptyFilterMessage = new OO.ui.LabelWidget( {
108 label: mw.msg( 'rcfilters-empty-filter' ),
109 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
111 this.$content.append( this.emptyFilterMessage.$element );
114 this.resetButton.connect( this, { click: 'onResetButtonClick' } );
115 // Stop propagation for mousedown, so that the widget doesn't
116 // trigger the focus on the input and scrolls up when we click the reset button
117 this.resetButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
118 this.model.connect( this, {
119 initialize: 'onModelInitialize',
120 update: 'onModelUpdate',
121 itemUpdate: 'onModelItemUpdate',
122 highlightChange: 'onModelHighlightChange'
124 this.input.connect( this, { change: 'onInputChange' } );
126 // The filter list and button should appear side by side regardless of how
127 // wide the button is; the button also changes its width depending
128 // on language and its state, so the safest way to present both side
129 // by side is with a table layout
130 rcFiltersRow = $( '<div>' )
131 .addClass( 'mw-rcfilters-ui-row' )
134 .addClass( 'mw-rcfilters-ui-cell' )
135 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
138 if ( !mw.user.isAnon() ) {
141 .addClass( 'mw-rcfilters-ui-cell' )
142 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
143 .append( this.saveQueryButton.$element )
147 // Add a selector at the right of the input
148 this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
149 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
151 new OO.ui.ButtonOptionWidget( {
155 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget-label' ],
156 label: mw.msg( 'rcfilters-view-advanced-filters-label' )
158 new OO.ui.ButtonOptionWidget( {
162 title: mw.msg( 'rcfilters-view-namespaces-tooltip' )
164 new OO.ui.ButtonOptionWidget( {
168 title: mw.msg( 'rcfilters-view-tags-tooltip' )
173 // Rearrange the UI so the select widget is at the right of the input
174 this.$element.append(
176 .addClass( 'mw-rcfilters-ui-table' )
179 .addClass( 'mw-rcfilters-ui-row' )
182 .addClass( 'mw-rcfilters-ui-cell' )
183 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
184 .append( this.input.$element ),
186 .addClass( 'mw-rcfilters-ui-cell' )
187 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
188 .append( this.viewsSelectWidget.$element )
194 this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
198 .addClass( 'mw-rcfilters-ui-cell' )
199 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
200 .append( this.resetButton.$element )
204 $contentWrapper.append(
206 this.savedQueryTitle.$element,
208 .addClass( 'mw-rcfilters-ui-table' )
215 this.$handle.append( $contentWrapper );
216 this.emptyFilterMessage.toggle( this.isEmpty() );
217 this.savedQueryTitle.toggle( false );
220 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
222 this.reevaluateResetRestoreState();
227 OO.inheritClass( mw.rcfilters.ui.FilterTagMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
232 * Respond to view select widget choose event
234 * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget
236 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget ) {
237 this.controller.switchView( buttonOptionWidget.getData() );
238 this.viewsSelectWidget.selectItem( null );
243 * Respond to input change event
245 * @param {string} value Value of the input
247 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputChange = function ( value ) {
250 value = value.trim();
252 view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
254 this.controller.switchView( view );
257 * Respond to query button click
259 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSaveQueryButtonClick = function () {
260 this.getMenu().toggle( false );
264 * Respond to save query model initialization
266 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSavedQueriesInitialize = function () {
267 this.setSavedQueryVisibility();
271 * Respond to save query item change. Mainly this is done to update the label in case
272 * a query item has been edited
274 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
276 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSavedQueriesItemUpdate = function ( item ) {
277 if ( this.matchingQuery === item ) {
278 // This means we just edited the item that is currently matched
279 this.savedQueryTitle.setLabel( item.getLabel() );
284 * Respond to menu toggle
286 * @param {boolean} isVisible Menu is visible
288 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
290 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onMenuToggle.call( this );
293 mw.hook( 'RcFilters.popup.open' ).fire();
295 if ( !this.getMenu().getSelectedItem() ) {
296 // If there are no selected items, scroll menu to top
297 // This has to be in a setTimeout so the menu has time
298 // to be positioned and fixed
299 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
303 this.selectTag( null );
305 // Clear input if the only thing in the input is the prefix
307 this.input.getValue().trim() === this.model.getViewTrigger( this.model.getCurrentView() )
310 this.input.setValue( '' );
313 // Log filter grouping
314 this.controller.trackFilterGroupings( 'filtermenu' );
317 this.input.setIcon( isVisible ? 'search' : 'menu' );
323 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputFocus = function () {
325 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onInputFocus.call( this );
327 // Only scroll to top of the viewport if:
328 // - The widget is more than 20px from the top
329 // - The widget is not above the top of the viewport (do not scroll downwards)
330 // (This isn't represented because >20 is, anyways and always, bigger than 0)
331 this.scrollToTop( this.$element, 0, { min: 20, max: Infinity } );
337 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.doInputEscape = function () {
339 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.doInputEscape.call( this );
342 this.input.$input.blur();
348 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onChangeTags = function () {
350 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onChangeTags.call( this );
352 this.emptyFilterMessage.toggle( this.isEmpty() );
356 * Respond to model initialize event
358 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelInitialize = function () {
359 this.setSavedQueryVisibility();
363 * Respond to model update event
365 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelUpdate = function () {
366 this.updateElementsForView();
370 * Update the elements in the widget to the current view
372 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.updateElementsForView = function () {
373 var view = this.model.getCurrentView(),
374 inputValue = this.input.getValue().trim(),
375 inputView = this.model.getViewByTrigger( inputValue.substr( 0, 1 ) );
377 if ( inputView !== 'default' ) {
378 // We have a prefix already, remove it
379 inputValue = inputValue.substr( 1 );
382 if ( inputView !== view ) {
383 // Add the correct prefix
384 inputValue = this.model.getViewTrigger( view ) + inputValue;
388 this.input.setValue( inputValue );
390 if ( this.currentView !== view ) {
391 this.scrollToTop( this.$element );
392 this.currentView = view;
397 * Set the visibility of the saved query button
399 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
400 if ( mw.user.isAnon() ) {
404 this.matchingQuery = this.controller.findQueryMatchingCurrentState();
406 this.savedQueryTitle.setLabel(
407 this.matchingQuery ? this.matchingQuery.getLabel() : ''
409 this.savedQueryTitle.toggle( !!this.matchingQuery );
410 this.saveQueryButton.toggle( !this.matchingQuery );
412 if ( this.matchingQuery ) {
418 * Respond to model itemUpdate event
420 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
422 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelItemUpdate = function ( item ) {
423 if ( item.getGroupModel().isHidden() ) {
430 this.model.isHighlightEnabled() &&
431 item.isHighlightSupported() &&
432 item.getHighlightColor()
435 this.addTag( item.getName(), item.getLabel() );
437 this.removeTagByData( item.getName() );
440 this.setSavedQueryVisibility();
442 // Re-evaluate reset state
443 this.reevaluateResetRestoreState();
449 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.isAllowedData = function ( data ) {
451 this.model.getItemByName( data ) &&
452 !this.isDuplicateData( data )
459 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuChoose = function ( item ) {
460 this.controller.toggleFilterSelect( item.model.getName() );
462 // Select the tag if it exists, or reset selection otherwise
463 this.selectTag( this.getItemFromData( item.model.getName() ) );
469 * Respond to highlightChange event
471 * @param {boolean} isHighlightEnabled Highlight is enabled
473 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelHighlightChange = function ( isHighlightEnabled ) {
474 var highlightedItems = this.model.getHighlightedItems();
476 if ( isHighlightEnabled ) {
477 // Add capsule widgets
478 highlightedItems.forEach( function ( filterItem ) {
479 this.addTag( filterItem.getName(), filterItem.getLabel() );
482 // Remove capsule widgets if they're not selected
483 highlightedItems.forEach( function ( filterItem ) {
484 if ( !filterItem.isSelected() ) {
485 this.removeTagByData( filterItem.getName() );
494 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
496 menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
497 oldInputValue = this.input.getValue().trim();
499 this.menu.setUserSelecting( true );
502 this.input.setValue( '' );
505 this.controller.switchView( tagItem.getView() );
508 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagSelect.call( this, tagItem );
510 this.menu.selectItem( menuOption );
511 this.selectTag( tagItem );
513 // Scroll to the item
514 if ( this.model.removeViewTriggers( oldInputValue ) ) {
515 // We're binding a 'once' to the itemVisibilityChange event
516 // so this happens when the menu is ready after the items
517 // are visible again, in case this is done right after the
518 // user filtered the results
520 'itemVisibilityChange',
522 widget.scrollToTop( menuOption.$element );
523 widget.menu.setUserSelecting( false );
527 this.scrollToTop( menuOption.$element );
528 this.menu.setUserSelecting( false );
534 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
535 * If no items are given, reset selection from all.
537 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
538 * omit to deselect all
540 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.selectTag = function ( item ) {
541 var i, len, selected;
543 for ( i = 0, len = this.items.length; i < len; i++ ) {
544 selected = this.items[ i ] === item;
545 if ( this.items[ i ].isSelected() !== selected ) {
546 this.items[ i ].toggleSelected( selected );
553 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagRemove = function ( tagItem ) {
555 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagRemove.call( this, tagItem );
557 this.controller.clearFilter( tagItem.getName() );
563 * Respond to click event on the reset button
565 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onResetButtonClick = function () {
566 if ( this.model.areCurrentFiltersEmpty() ) {
567 // Reset to default filters
568 this.controller.resetToDefaults();
570 // Reset to have no filters
571 this.controller.emptyFilters();
576 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
578 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.reevaluateResetRestoreState = function () {
579 var defaultsAreEmpty = this.controller.areDefaultsEmpty(),
580 currFiltersAreEmpty = this.model.areCurrentFiltersEmpty(),
581 hideResetButton = currFiltersAreEmpty && defaultsAreEmpty;
583 this.resetButton.setIcon(
584 currFiltersAreEmpty ? 'history' : 'trash'
587 this.resetButton.setLabel(
588 currFiltersAreEmpty ? mw.msg( 'rcfilters-restore-default-filters' ) : ''
590 this.resetButton.setTitle(
591 currFiltersAreEmpty ? null : mw.msg( 'rcfilters-clear-all-filters' )
594 this.resetButton.toggle( !hideResetButton );
595 this.emptyFilterMessage.toggle( currFiltersAreEmpty );
601 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.createMenuWidget = function ( menuConfig ) {
602 return new mw.rcfilters.ui.MenuSelectWidget(
606 filterFromInput: true
614 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.createTagItemWidget = function ( data ) {
615 var filterItem = this.model.getItemByName( data );
618 return new mw.rcfilters.ui.FilterTagItemWidget(
622 $overlay: this.$overlay
628 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.emphasize = function () {
630 !this.$handle.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
633 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
634 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
636 setTimeout( function () {
638 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
640 setTimeout( function () {
642 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
643 }.bind( this ), 1000 );
644 }.bind( this ), 500 );
649 * Scroll the element to top within its container
652 * @param {jQuery} $element Element to position
653 * @param {number} [marginFromTop=0] When scrolling the entire widget to the top, leave this
654 * much space (in pixels) above the widget.
655 * @param {Object} [threshold] Minimum distance from the top of the element to scroll at all
656 * @param {number} [threshold.min] Minimum distance above the element
657 * @param {number} [threshold.max] Minimum distance below the element
659 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.scrollToTop = function ( $element, marginFromTop, threshold ) {
660 var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
661 pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
662 containerScrollTop = $( container ).scrollTop(),
663 effectiveScrollTop = $( container ).is( 'body, html' ) ? 0 : containerScrollTop,
664 newScrollTop = effectiveScrollTop + pos.top - ( marginFromTop || 0 );
668 threshold === undefined ||
671 threshold.min === undefined ||
672 newScrollTop - containerScrollTop >= threshold.min
675 threshold.max === undefined ||
676 newScrollTop - containerScrollTop <= threshold.max
680 $( container ).animate( {
681 scrollTop: newScrollTop