1 var ViewSwitchWidget
= require( './ViewSwitchWidget.js' ),
2 SaveFiltersPopupButtonWidget
= require( './SaveFiltersPopupButtonWidget.js' ),
3 MenuSelectWidget
= require( './MenuSelectWidget.js' ),
4 FilterTagItemWidget
= require( './FilterTagItemWidget.js' ),
5 FilterTagMultiselectWidget
;
8 * List displaying all filter groups
10 * @class mw.rcfilters.ui.FilterTagMultiselectWidget
11 * @extends OO.ui.MenuTagMultiselectWidget
12 * @mixins OO.ui.mixin.PendingElement
15 * @param {mw.rcfilters.Controller} controller Controller
16 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
17 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
18 * @param {Object} config Configuration object
19 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
20 * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
21 * system. If not given, falls back to this widget's $element
22 * @cfg {boolean} [collapsed] Filter area is collapsed
24 FilterTagMultiselectWidget
= function MwRcfiltersUiFilterTagMultiselectWidget( controller
, model
, savedQueriesModel
, config
) {
26 title
= new OO
.ui
.LabelWidget( {
27 label
: mw
.msg( 'rcfilters-activefilters' ),
28 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
30 $contentWrapper
= $( '<div>' )
31 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
33 config
= config
|| {};
35 this.controller
= controller
;
37 this.queriesModel
= savedQueriesModel
;
38 this.$overlay
= config
.$overlay
|| this.$element
;
39 this.$wrapper
= config
.$wrapper
|| this.$element
;
40 this.matchingQuery
= null;
41 this.currentView
= this.model
.getCurrentView();
42 this.collapsed
= false;
45 FilterTagMultiselectWidget
.parent
.call( this, $.extend( true, {
46 label
: mw
.msg( 'rcfilters-filterlist-title' ),
47 placeholder
: mw
.msg( 'rcfilters-empty-filter' ),
48 inputPosition
: 'outline',
49 allowArbitrary
: false,
50 allowDisplayInvalidTags
: false,
51 allowReordering
: false,
52 $overlay
: this.$overlay
,
54 // Our filtering is done through the model
55 filterFromInput
: false,
56 hideWhenOutOfView
: false,
63 // View select menu, appears on default view only
64 $element
: $( '<div>' )
65 .append( new ViewSwitchWidget( this.controller
, this.model
).$element
),
70 // Feedback footer, appears on all views
71 $element
: $( '<div>' )
73 new OO
.ui
.ButtonWidget( {
76 flags
: [ 'progressive' ],
77 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
78 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
86 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
90 this.savedQueryTitle
= new OO
.ui
.LabelWidget( {
92 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
95 this.resetButton
= new OO
.ui
.ButtonWidget( {
97 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
100 this.hideShowButton
= new OO
.ui
.ButtonWidget( {
102 flags
: [ 'progressive' ],
103 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-hideshowButton' ]
105 this.toggleCollapsed( !!config
.collapsed
);
107 if ( !mw
.user
.isAnon() ) {
108 this.saveQueryButton
= new SaveFiltersPopupButtonWidget(
112 $overlay
: this.$overlay
116 this.saveQueryButton
.$element
.on( 'mousedown', function ( e
) {
120 this.saveQueryButton
.connect( this, {
121 click
: 'onSaveQueryButtonClick',
122 saveCurrent
: 'setSavedQueryVisibility'
124 this.queriesModel
.connect( this, {
125 itemUpdate
: 'onSavedQueriesItemUpdate',
126 initialize
: 'onSavedQueriesInitialize',
127 default: 'reevaluateResetRestoreState'
131 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
132 label
: mw
.msg( 'rcfilters-empty-filter' ),
133 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
135 this.$content
.append( this.emptyFilterMessage
.$element
);
138 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
139 this.hideShowButton
.connect( this, { click
: 'onHideShowButtonClick' } );
140 // Stop propagation for mousedown, so that the widget doesn't
141 // trigger the focus on the input and scrolls up when we click the reset button
142 this.resetButton
.$element
.on( 'mousedown', function ( e
) {
145 this.hideShowButton
.$element
.on( 'mousedown', function ( e
) {
148 this.model
.connect( this, {
149 initialize
: 'onModelInitialize',
150 update
: 'onModelUpdate',
151 searchChange
: 'onModelSearchChange',
152 itemUpdate
: 'onModelItemUpdate',
153 highlightChange
: 'onModelHighlightChange'
155 this.input
.connect( this, { change
: 'onInputChange' } );
157 // The filter list and button should appear side by side regardless of how
158 // wide the button is; the button also changes its width depending
159 // on language and its state, so the safest way to present both side
160 // by side is with a table layout
161 rcFiltersRow
= $( '<div>' )
162 .addClass( 'mw-rcfilters-ui-row' )
165 .addClass( 'mw-rcfilters-ui-cell' )
166 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
169 if ( !mw
.user
.isAnon() ) {
172 .addClass( 'mw-rcfilters-ui-cell' )
173 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
174 .append( this.saveQueryButton
.$element
)
178 // Add a selector at the right of the input
179 this.viewsSelectWidget
= new OO
.ui
.ButtonSelectWidget( {
180 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
182 new OO
.ui
.ButtonOptionWidget( {
186 label
: mw
.msg( 'namespaces' ),
187 title
: mw
.msg( 'rcfilters-view-namespaces-tooltip' )
189 new OO
.ui
.ButtonOptionWidget( {
193 label
: mw
.msg( 'tags-title' ),
194 title
: mw
.msg( 'rcfilters-view-tags-tooltip' )
199 // Rearrange the UI so the select widget is at the right of the input
200 this.$element
.append(
202 .addClass( 'mw-rcfilters-ui-table' )
205 .addClass( 'mw-rcfilters-ui-row' )
206 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views' )
209 .addClass( 'mw-rcfilters-ui-cell' )
210 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
211 .append( this.input
.$element
),
213 .addClass( 'mw-rcfilters-ui-cell' )
214 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
215 .append( this.viewsSelectWidget
.$element
)
221 this.viewsSelectWidget
.connect( this, { choose
: 'onViewsSelectWidgetChoose' } );
225 .addClass( 'mw-rcfilters-ui-cell' )
226 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
227 .append( this.resetButton
.$element
)
231 $contentWrapper
.append(
233 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top' )
236 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-title' )
237 .append( title
.$element
),
239 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-queryName' )
240 .append( this.savedQueryTitle
.$element
),
242 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-top-hideshow' )
244 this.hideShowButton
.$element
248 .addClass( 'mw-rcfilters-ui-table' )
249 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-filters' )
250 .append( rcFiltersRow
)
254 this.$handle
.append( $contentWrapper
);
255 this.emptyFilterMessage
.toggle( this.isEmpty() );
256 this.savedQueryTitle
.toggle( false );
259 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
261 this.reevaluateResetRestoreState();
266 OO
.inheritClass( FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
271 * Override parent method to avoid unnecessary resize events.
273 FilterTagMultiselectWidget
.prototype.updateIfHeightChanged = function () { };
276 * Respond to view select widget choose event
278 * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget
280 FilterTagMultiselectWidget
.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget
) {
281 this.controller
.switchView( buttonOptionWidget
.getData() );
282 this.viewsSelectWidget
.selectItem( null );
287 * Respond to model search change event
289 * @param {string} value Search value
291 FilterTagMultiselectWidget
.prototype.onModelSearchChange = function ( value
) {
292 this.input
.setValue( value
);
296 * Respond to input change event
298 * @param {string} value Value of the input
300 FilterTagMultiselectWidget
.prototype.onInputChange = function ( value
) {
301 this.controller
.setSearch( value
);
305 * Respond to query button click
307 FilterTagMultiselectWidget
.prototype.onSaveQueryButtonClick = function () {
308 this.getMenu().toggle( false );
312 * Respond to save query model initialization
314 FilterTagMultiselectWidget
.prototype.onSavedQueriesInitialize = function () {
315 this.setSavedQueryVisibility();
319 * Respond to save query item change. Mainly this is done to update the label in case
320 * a query item has been edited
322 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
324 FilterTagMultiselectWidget
.prototype.onSavedQueriesItemUpdate = function ( item
) {
325 if ( this.matchingQuery
=== item
) {
326 // This means we just edited the item that is currently matched
327 this.savedQueryTitle
.setLabel( item
.getLabel() );
332 * Respond to menu toggle
334 * @param {boolean} isVisible Menu is visible
336 FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
338 FilterTagMultiselectWidget
.parent
.prototype.onMenuToggle
.call( this );
343 mw
.hook( 'RcFilters.popup.open' ).fire();
345 if ( !this.getMenu().findSelectedItem() ) {
346 // If there are no selected items, scroll menu to top
347 // This has to be in a setTimeout so the menu has time
348 // to be positioned and fixed
351 this.getMenu().scrollToTop();
357 this.selectTag( null );
360 this.controller
.setSearch( '' );
362 // Log filter grouping
363 this.controller
.trackFilterGroupings( 'filtermenu' );
368 this.input
.setIcon( isVisible
? 'search' : 'menu' );
374 FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
376 FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
378 // Only scroll to top of the viewport if:
379 // - The widget is more than 20px from the top
380 // - The widget is not above the top of the viewport (do not scroll downwards)
381 // (This isn't represented because >20 is, anyways and always, bigger than 0)
382 this.scrollToTop( this.$element
, 0, { min
: 20, max
: Infinity
} );
388 FilterTagMultiselectWidget
.prototype.doInputEscape = function () {
390 FilterTagMultiselectWidget
.parent
.prototype.doInputEscape
.call( this );
393 this.input
.$input
.trigger( 'blur' );
399 FilterTagMultiselectWidget
.prototype.onMouseDown = function ( e
) {
400 if ( !this.collapsed
&& !this.isDisabled() && e
.which
=== OO
.ui
.MouseButtons
.LEFT
) {
410 FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
411 // If initialized, call parent method.
412 if ( this.controller
.isInitialized() ) {
413 FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
416 this.emptyFilterMessage
.toggle( this.isEmpty() );
420 * Respond to model initialize event
422 FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
423 this.setSavedQueryVisibility();
427 * Respond to model update event
429 FilterTagMultiselectWidget
.prototype.onModelUpdate = function () {
430 this.updateElementsForView();
434 * Update the elements in the widget to the current view
436 FilterTagMultiselectWidget
.prototype.updateElementsForView = function () {
437 var view
= this.model
.getCurrentView(),
438 inputValue
= this.input
.getValue().trim(),
439 inputView
= this.model
.getViewByTrigger( inputValue
.substr( 0, 1 ) );
441 if ( inputView
!== 'default' ) {
442 // We have a prefix already, remove it
443 inputValue
= inputValue
.substr( 1 );
446 if ( inputView
!== view
) {
447 // Add the correct prefix
448 inputValue
= this.model
.getViewTrigger( view
) + inputValue
;
452 this.input
.setValue( inputValue
);
454 if ( this.currentView
!== view
) {
455 this.scrollToTop( this.$element
);
456 this.currentView
= view
;
461 * Set the visibility of the saved query button
463 FilterTagMultiselectWidget
.prototype.setSavedQueryVisibility = function () {
464 if ( mw
.user
.isAnon() ) {
468 this.matchingQuery
= this.controller
.findQueryMatchingCurrentState();
470 this.savedQueryTitle
.setLabel(
471 this.matchingQuery
? this.matchingQuery
.getLabel() : ''
473 this.savedQueryTitle
.toggle( !!this.matchingQuery
);
474 this.saveQueryButton
.setDisabled( !!this.matchingQuery
);
475 this.saveQueryButton
.setTitle( !this.matchingQuery
?
476 mw
.msg( 'rcfilters-savedqueries-add-new-title' ) :
477 mw
.msg( 'rcfilters-savedqueries-already-saved' ) );
479 if ( this.matchingQuery
) {
485 * Respond to model itemUpdate event
486 * fixme: when a new state is applied to the model this function is called 60+ times in a row
488 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
490 FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
491 if ( !item
.getGroupModel().isHidden() ) {
495 this.model
.isHighlightEnabled() &&
496 item
.getHighlightColor()
499 this.addTag( item
.getName(), item
.getLabel() );
501 // Only attempt to remove the tag if we can find an item for it (T198140, T198231)
502 if ( this.findItemFromData( item
.getName() ) !== null ) {
503 this.removeTagByData( item
.getName() );
508 this.setSavedQueryVisibility();
510 // Re-evaluate reset state
511 this.reevaluateResetRestoreState();
517 FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
519 this.model
.getItemByName( data
) &&
520 !this.isDuplicateData( data
)
527 FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
528 this.controller
.toggleFilterSelect( item
.model
.getName() );
530 // Select the tag if it exists, or reset selection otherwise
531 this.selectTag( this.findItemFromData( item
.model
.getName() ) );
537 * Respond to highlightChange event
539 * @param {boolean} isHighlightEnabled Highlight is enabled
541 FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
542 var highlightedItems
= this.model
.getHighlightedItems();
544 if ( isHighlightEnabled
) {
545 // Add capsule widgets
546 highlightedItems
.forEach( function ( filterItem
) {
547 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
550 // Remove capsule widgets if they're not selected
551 highlightedItems
.forEach( function ( filterItem
) {
552 if ( !filterItem
.isSelected() ) {
553 // Only attempt to remove the tag if we can find an item for it (T198140, T198231)
554 if ( this.findItemFromData( filterItem
.getName() ) !== null ) {
555 this.removeTagByData( filterItem
.getName() );
561 this.setSavedQueryVisibility();
567 FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
568 var menuOption
= this.menu
.getItemFromModel( tagItem
.getModel() );
570 this.menu
.setUserSelecting( true );
572 FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
575 this.controller
.resetSearchForView( tagItem
.getView() );
577 this.selectTag( tagItem
);
578 this.scrollToTop( menuOption
.$element
);
580 this.menu
.setUserSelecting( false );
584 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
585 * If no items are given, reset selection from all.
587 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
588 * omit to deselect all
590 FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
591 var i
, len
, selected
;
593 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
594 selected
= this.items
[ i
] === item
;
595 if ( this.items
[ i
].isSelected() !== selected
) {
596 this.items
[ i
].toggleSelected( selected
);
603 FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
605 FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
607 this.controller
.clearFilter( tagItem
.getName() );
613 * Respond to click event on the reset button
615 FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
616 if ( this.model
.areVisibleFiltersEmpty() ) {
617 // Reset to default filters
618 this.controller
.resetToDefaults();
620 // Reset to have no filters
621 this.controller
.emptyFilters();
626 * Respond to hide/show button click
628 FilterTagMultiselectWidget
.prototype.onHideShowButtonClick = function () {
629 this.toggleCollapsed();
633 * Toggle the collapsed state of the filters widget
635 * @param {boolean} isCollapsed Widget is collapsed
637 FilterTagMultiselectWidget
.prototype.toggleCollapsed = function ( isCollapsed
) {
638 isCollapsed
= isCollapsed
=== undefined ? !this.collapsed
: !!isCollapsed
;
640 this.collapsed
= isCollapsed
;
643 // If we are collapsing, close the menu, in case it was open
644 // We should make sure the menu closes before the rest of the elements
645 // are hidden, otherwise there is an unknown error in jQuery as ooui
646 // sets and unsets properties on the input (which is hidden at that point)
647 this.menu
.toggle( false );
649 this.input
.setDisabled( isCollapsed
);
650 this.hideShowButton
.setLabel( mw
.msg(
651 isCollapsed
? 'rcfilters-activefilters-show' : 'rcfilters-activefilters-hide'
653 this.hideShowButton
.setTitle( mw
.msg(
654 isCollapsed
? 'rcfilters-activefilters-show-tooltip' : 'rcfilters-activefilters-hide-tooltip'
657 // Toggle the wrapper class, so we have min height values correctly throughout
658 this.$wrapper
.toggleClass( 'mw-rcfilters-collapsed', isCollapsed
);
661 this.controller
.updateCollapsedState( isCollapsed
);
665 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
667 FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
668 var defaultsAreEmpty
= this.controller
.areDefaultsEmpty(),
669 currFiltersAreEmpty
= this.model
.areVisibleFiltersEmpty(),
670 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
672 this.resetButton
.setIcon(
673 currFiltersAreEmpty
? 'history' : 'trash'
676 this.resetButton
.setLabel(
677 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
679 this.resetButton
.setTitle(
680 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
683 this.resetButton
.toggle( !hideResetButton
);
684 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
690 FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
691 return new MenuSelectWidget(
701 FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
702 var filterItem
= this.model
.getItemByName( data
);
705 return new FilterTagItemWidget(
708 this.model
.getInvertModel(),
711 $overlay
: this.$overlay
717 FilterTagMultiselectWidget
.prototype.emphasize = function () {
719 !this.$handle
.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
722 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
723 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
725 setTimeout( function () {
727 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
729 setTimeout( function () {
731 .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
732 }.bind( this ), 1000 );
733 }.bind( this ), 500 );
738 * Scroll the element to top within its container
741 * @param {jQuery} $element Element to position
742 * @param {number} [marginFromTop=0] When scrolling the entire widget to the top, leave this
743 * much space (in pixels) above the widget.
744 * @param {Object} [threshold] Minimum distance from the top of the element to scroll at all
745 * @param {number} [threshold.min] Minimum distance above the element
746 * @param {number} [threshold.max] Minimum distance below the element
748 FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
, threshold
) {
749 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
750 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
751 containerScrollTop
= $( container
).scrollTop(),
752 effectiveScrollTop
= $( container
).is( 'body, html' ) ? 0 : containerScrollTop
,
753 newScrollTop
= effectiveScrollTop
+ pos
.top
- ( marginFromTop
|| 0 );
757 threshold
=== undefined ||
760 threshold
.min
=== undefined ||
761 newScrollTop
- containerScrollTop
>= threshold
.min
764 threshold
.max
=== undefined ||
765 newScrollTop
- containerScrollTop
<= threshold
.max
769 $( container
).animate( {
770 scrollTop
: newScrollTop
775 module
.exports
= FilterTagMultiselectWidget
;