3 * List displaying all filter groups
5 * @extends OO.ui.Widget
6 * @mixins OO.ui.mixin.PendingElement
9 * @param {mw.rcfilters.Controller} controller Controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
11 * @param {Object} config Configuration object
12 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
14 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
= function MwRcfiltersUiFilterTagMultiselectWidget( controller
, model
, config
) {
15 var title
= new OO
.ui
.LabelWidget( {
16 label
: mw
.msg( 'rcfilters-activefilters' ),
17 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
19 $contentWrapper
= $( '<div>' )
20 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
22 config
= config
|| {};
24 this.controller
= controller
;
26 this.$overlay
= config
.$overlay
|| this.$element
;
29 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.call( this, $.extend( true, {
30 label
: mw
.msg( 'rcfilters-filterlist-title' ),
31 placeholder
: mw
.msg( 'rcfilters-empty-filter' ),
32 inputPosition
: 'outline',
33 allowArbitrary
: false,
34 allowDisplayInvalidTags
: false,
35 allowReordering
: false,
36 $overlay
: this.$overlay
,
38 hideWhenOutOfView
: false,
43 new OO
.ui
.ButtonWidget( {
46 flags
: [ 'progressive' ],
47 label
: mw
.msg( 'rcfilters-filterlist-feedbacklink' ),
48 href
: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
54 placeholder
: mw
.msg( 'rcfilters-search-placeholder' )
58 this.resetButton
= new OO
.ui
.ButtonWidget( {
60 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
63 this.emptyFilterMessage
= new OO
.ui
.LabelWidget( {
64 label
: mw
.msg( 'rcfilters-empty-filter' ),
65 classes
: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
67 this.$content
.append( this.emptyFilterMessage
.$element
);
70 this.resetButton
.connect( this, { click
: 'onResetButtonClick' } );
71 // Stop propagation for mousedown, so that the widget doesn't
72 // trigger the focus on the input and scrolls up when we click the reset button
73 this.resetButton
.$element
.on( 'mousedown', function ( e
) { e
.stopPropagation(); } );
74 this.model
.connect( this, {
75 initialize
: 'onModelInitialize',
76 itemUpdate
: 'onModelItemUpdate',
77 highlightChange
: 'onModelHighlightChange'
79 this.menu
.connect( this, { toggle
: 'onMenuToggle' } );
82 $contentWrapper
.append(
85 .addClass( 'mw-rcfilters-ui-table' )
87 // The filter list and button should appear side by side regardless of how
88 // wide the button is; the button also changes its width depending
89 // on language and its state, so the safest way to present both side
90 // by side is with a table layout
92 .addClass( 'mw-rcfilters-ui-row' )
95 .addClass( 'mw-rcfilters-ui-cell' )
96 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' ),
98 .addClass( 'mw-rcfilters-ui-cell' )
99 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
100 .append( this.resetButton
.$element
)
106 this.$handle
.append( $contentWrapper
);
107 this.emptyFilterMessage
.toggle( this.isEmpty() );
110 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
112 this.populateFromModel();
113 this.reevaluateResetRestoreState();
118 OO
.inheritClass( mw
.rcfilters
.ui
.FilterTagMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
123 * Respond to menu toggle
125 * @param {boolean} isVisible Menu is visible
127 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuToggle = function ( isVisible
) {
129 mw
.hook( 'RcFilters.popup.open' ).fire( this.getMenu().getSelectedItem() );
131 if ( !this.getMenu().getSelectedItem() ) {
132 // If there are no selected items, scroll menu to top
133 // This has to be in a setTimeout so the menu has time
134 // to be positioned and fixed
135 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
139 this.getMenu().selectItem( null );
140 this.selectTag( null );
147 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onInputFocus = function () {
149 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onInputFocus
.call( this );
152 this.scrollToTop( this.$element
);
158 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onChangeTags = function () {
160 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onChangeTags
.call( this );
162 this.emptyFilterMessage
.toggle( this.isEmpty() );
166 * Respond to model initialize event
168 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelInitialize = function () {
169 this.populateFromModel();
173 * Respond to model itemUpdate event
175 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
177 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelItemUpdate = function ( item
) {
181 this.model
.isHighlightEnabled() &&
182 item
.isHighlightSupported() &&
183 item
.getHighlightColor()
186 this.addTag( item
.getName(), item
.getLabel() );
188 this.removeTagByData( item
.getName() );
191 // Re-evaluate reset state
192 this.reevaluateResetRestoreState();
198 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.isAllowedData = function ( data
) {
200 this.menu
.getItemFromData( data
) &&
201 !this.isDuplicateData( data
)
208 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onMenuChoose = function ( item
) {
209 this.controller
.toggleFilterSelect( item
.model
.getName() );
211 // Select the tag if it exists, or reset selection otherwise
212 this.selectTag( this.getItemFromData( item
.model
.getName() ) );
218 * Respond to highlightChange event
220 * @param {boolean} isHighlightEnabled Highlight is enabled
222 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onModelHighlightChange = function ( isHighlightEnabled
) {
223 var highlightedItems
= this.model
.getHighlightedItems();
225 if ( isHighlightEnabled
) {
226 // Add capsule widgets
227 highlightedItems
.forEach( function ( filterItem
) {
228 this.addTag( filterItem
.getName(), filterItem
.getLabel() );
231 // Remove capsule widgets if they're not selected
232 highlightedItems
.forEach( function ( filterItem
) {
233 if ( !filterItem
.isSelected() ) {
234 this.removeTagByData( filterItem
.getName() );
243 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagSelect = function ( tagItem
) {
245 menuOption
= this.menu
.getItemFromData( tagItem
.getData() ),
246 oldInputValue
= this.input
.getValue();
249 this.input
.setValue( '' );
252 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagSelect
.call( this, tagItem
);
254 this.menu
.selectItem( menuOption
);
255 this.selectTag( tagItem
);
257 // Scroll to the item
258 if ( oldInputValue
) {
259 // We're binding a 'once' to the itemVisibilityChange event
260 // so this happens when the menu is ready after the items
261 // are visible again, in case this is done right after the
262 // user filtered the results
264 'itemVisibilityChange',
265 function () { widget
.scrollToTop( menuOption
.$element
); }
268 this.scrollToTop( menuOption
.$element
);
273 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
274 * If no items are given, reset selection from all.
276 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
277 * omit to deselect all
279 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.selectTag = function ( item
) {
280 var i
, len
, selected
;
282 for ( i
= 0, len
= this.items
.length
; i
< len
; i
++ ) {
283 selected
= this.items
[ i
] === item
;
284 if ( this.items
[ i
].isSelected() !== selected
) {
285 this.items
[ i
].toggleSelected( selected
);
292 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onTagRemove = function ( tagItem
) {
294 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.parent
.prototype.onTagRemove
.call( this, tagItem
);
296 this.controller
.clearFilter( tagItem
.getName() );
302 * Respond to click event on the reset button
304 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.onResetButtonClick = function () {
305 if ( this.model
.areCurrentFiltersEmpty() ) {
306 // Reset to default filters
307 this.controller
.resetToDefaults();
309 // Reset to have no filters
310 this.controller
.emptyFilters();
315 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
317 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.reevaluateResetRestoreState = function () {
318 var defaultsAreEmpty
= this.model
.areDefaultFiltersEmpty(),
319 currFiltersAreEmpty
= this.model
.areCurrentFiltersEmpty(),
320 hideResetButton
= currFiltersAreEmpty
&& defaultsAreEmpty
;
322 this.resetButton
.setIcon(
323 currFiltersAreEmpty
? 'history' : 'trash'
326 this.resetButton
.setLabel(
327 currFiltersAreEmpty
? mw
.msg( 'rcfilters-restore-default-filters' ) : ''
329 this.resetButton
.setTitle(
330 currFiltersAreEmpty
? null : mw
.msg( 'rcfilters-clear-all-filters' )
333 this.resetButton
.toggle( !hideResetButton
);
334 this.emptyFilterMessage
.toggle( currFiltersAreEmpty
);
340 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createMenuWidget = function ( menuConfig
) {
341 return new mw
.rcfilters
.ui
.FloatingMenuSelectWidget(
345 filterFromInput
: true
351 * Populate the menu from the model
353 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.populateFromModel = function () {
358 this.getMenu().clearItems();
360 $.each( this.model
.getFilterGroups(), function ( groupName
, groupModel
) {
363 new mw
.rcfilters
.ui
.FilterMenuSectionOptionWidget(
367 $overlay
: widget
.$overlay
373 widget
.model
.getGroupFilters( groupName
).forEach( function ( filterItem
) {
375 new mw
.rcfilters
.ui
.FilterMenuOptionWidget(
379 $overlay
: widget
.$overlay
386 // Add all items to the menu
387 this.getMenu().addItems( items
);
393 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.createTagItemWidget = function ( data
) {
394 var filterItem
= this.model
.getItemByName( data
);
397 return new mw
.rcfilters
.ui
.FilterTagItemWidget(
401 $overlay
: this.$overlay
408 * Scroll the element to top within its container
411 * @param {jQuery} $element Element to position
412 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
413 * much space (in pixels) above the widget.
415 mw
.rcfilters
.ui
.FilterTagMultiselectWidget
.prototype.scrollToTop = function ( $element
, marginFromTop
) {
416 var container
= OO
.ui
.Element
.static.getClosestScrollableContainer( $element
[ 0 ], 'y' ),
417 pos
= OO
.ui
.Element
.static.getRelativePosition( $element
, $( container
) ),
418 containerScrollTop
= $( container
).is( 'body, html' ) ? 0 : $( container
).scrollTop();
421 $( container
).animate( {
422 scrollTop
: containerScrollTop
+ pos
.top
- ( marginFromTop
|| 0 )