Merge "RCFilters: Don't call ChangeTags::tagUsageStatistics() for now"
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterTagMultiselectWidget.js
1 ( function ( mw ) {
2 /**
3 * List displaying all filter groups
4 *
5 * @extends OO.ui.MenuTagMultiselectWidget
6 * @mixins OO.ui.mixin.PendingElement
7 *
8 * @constructor
9 * @param {mw.rcfilters.Controller} controller Controller
10 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
11 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
12 * @param {Object} config Configuration object
13 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
14 */
15 mw.rcfilters.ui.FilterTagMultiselectWidget = function MwRcfiltersUiFilterTagMultiselectWidget( controller, model, savedQueriesModel, config ) {
16 var rcFiltersRow,
17 areSavedQueriesEnabled = mw.config.get( 'wgStructuredChangeFiltersEnableSaving' ),
18 title = new OO.ui.LabelWidget( {
19 label: mw.msg( 'rcfilters-activefilters' ),
20 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-title' ]
21 } ),
22 $contentWrapper = $( '<div>' )
23 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper' );
24
25 config = config || {};
26
27 this.controller = controller;
28 this.model = model;
29 this.queriesModel = savedQueriesModel;
30 this.$overlay = config.$overlay || this.$element;
31 this.matchingQuery = null;
32 this.areSavedQueriesEnabled = areSavedQueriesEnabled;
33
34 // Parent
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,
43 menu: {
44 hideWhenOutOfView: false,
45 hideOnChoose: false,
46 width: 650,
47 footers: [
48 {
49 name: 'viewSelect',
50 disabled: !mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ),
51 sticky: false,
52 // View select menu, appears on default view only
53 $element: $( '<div>' )
54 .append( new mw.rcfilters.ui.ViewSwitchWidget( this.controller, this.model ).$element ),
55 views: [ 'default' ]
56 },
57 {
58 name: 'feedback',
59 // Feedback footer, appears on all views
60 $element: $( '<div>' )
61 .append(
62 new OO.ui.ButtonWidget( {
63 framed: false,
64 icon: 'feedback',
65 flags: [ 'progressive' ],
66 label: mw.msg( 'rcfilters-filterlist-feedbacklink' ),
67 href: 'https://www.mediawiki.org/wiki/Help_talk:New_filters_for_edit_review'
68 } ).$element
69 )
70 }
71 ]
72 },
73 input: {
74 icon: 'menu',
75 placeholder: mw.msg( 'rcfilters-search-placeholder' )
76 }
77 }, config ) );
78
79 this.savedQueryTitle = new OO.ui.LabelWidget( {
80 label: '',
81 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-wrapper-content-savedQueryTitle' ]
82 } );
83
84 this.resetButton = new OO.ui.ButtonWidget( {
85 framed: false,
86 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
87 } );
88
89 if ( areSavedQueriesEnabled ) {
90 this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
91 this.controller,
92 this.queriesModel
93 );
94
95 this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
96
97 this.saveQueryButton.connect( this, {
98 click: 'onSaveQueryButtonClick',
99 saveCurrent: 'setSavedQueryVisibility'
100 } );
101 }
102
103 this.emptyFilterMessage = new OO.ui.LabelWidget( {
104 label: mw.msg( 'rcfilters-empty-filter' ),
105 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-emptyFilters' ]
106 } );
107 this.$content.append( this.emptyFilterMessage.$element );
108
109 // Events
110 this.resetButton.connect( this, { click: 'onResetButtonClick' } );
111 // Stop propagation for mousedown, so that the widget doesn't
112 // trigger the focus on the input and scrolls up when we click the reset button
113 this.resetButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
114 this.model.connect( this, {
115 initialize: 'onModelInitialize',
116 update: 'onModelUpdate',
117 itemUpdate: 'onModelItemUpdate',
118 highlightChange: 'onModelHighlightChange'
119 } );
120 this.input.connect( this, { change: 'onInputChange' } );
121 this.queriesModel.connect( this, { itemUpdate: 'onSavedQueriesItemUpdate' } );
122
123 // The filter list and button should appear side by side regardless of how
124 // wide the button is; the button also changes its width depending
125 // on language and its state, so the safest way to present both side
126 // by side is with a table layout
127 rcFiltersRow = $( '<div>' )
128 .addClass( 'mw-rcfilters-ui-row' )
129 .append(
130 this.$content
131 .addClass( 'mw-rcfilters-ui-cell' )
132 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
133 );
134
135 if ( areSavedQueriesEnabled ) {
136 rcFiltersRow.append(
137 $( '<div>' )
138 .addClass( 'mw-rcfilters-ui-cell' )
139 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
140 .append( this.saveQueryButton.$element )
141 );
142 }
143
144 if ( mw.config.get( 'wgStructuredChangeFiltersEnableExperimentalViews' ) ) {
145 // Add a selector at the right of the input
146 this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
147 classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
148 items: [
149 new OO.ui.ButtonOptionWidget( {
150 framed: false,
151 data: 'namespaces',
152 icon: 'article',
153 title: mw.msg( 'rcfilters-view-namespaces-tooltip' )
154 } ),
155 new OO.ui.ButtonOptionWidget( {
156 framed: false,
157 data: 'tags',
158 icon: 'tag',
159 title: mw.msg( 'rcfilters-view-tags-tooltip' )
160 } )
161 ]
162 } );
163
164 // Rearrange the UI so the select widget is at the right of the input
165 this.$element.append(
166 $( '<div>' )
167 .addClass( 'mw-rcfilters-ui-table' )
168 .append(
169 $( '<div>' )
170 .addClass( 'mw-rcfilters-ui-row' )
171 .append(
172 $( '<div>' )
173 .addClass( 'mw-rcfilters-ui-cell' )
174 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-input' )
175 .append( this.input.$element ),
176 $( '<div>' )
177 .addClass( 'mw-rcfilters-ui-cell' )
178 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select' )
179 .append( this.viewsSelectWidget.$element )
180 )
181 )
182 );
183
184 // Event
185 this.viewsSelectWidget.connect( this, { choose: 'onViewsSelectWidgetChoose' } );
186 }
187
188 rcFiltersRow.append(
189 $( '<div>' )
190 .addClass( 'mw-rcfilters-ui-cell' )
191 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-reset' )
192 .append( this.resetButton.$element )
193 );
194
195 // Build the content
196 $contentWrapper.append(
197 title.$element,
198 this.savedQueryTitle.$element,
199 $( '<div>' )
200 .addClass( 'mw-rcfilters-ui-table' )
201 .append(
202 rcFiltersRow
203 )
204 );
205
206 // Initialize
207 this.$handle.append( $contentWrapper );
208 this.emptyFilterMessage.toggle( this.isEmpty() );
209 this.savedQueryTitle.toggle( false );
210
211 this.$element
212 .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget' );
213
214 this.reevaluateResetRestoreState();
215 };
216
217 /* Initialization */
218
219 OO.inheritClass( mw.rcfilters.ui.FilterTagMultiselectWidget, OO.ui.MenuTagMultiselectWidget );
220
221 /* Methods */
222
223 /**
224 * Respond to view select widget choose event
225 *
226 * @param {OO.ui.ButtonOptionWidget} buttonOptionWidget Chosen widget
227 */
228 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onViewsSelectWidgetChoose = function ( buttonOptionWidget ) {
229 this.controller.switchView( buttonOptionWidget.getData() );
230 this.viewsSelectWidget.selectItem( null );
231 this.focus();
232 };
233
234 /**
235 * Respond to input change event
236 *
237 * @param {string} value Value of the input
238 */
239 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputChange = function ( value ) {
240 var view = this.model.getViewByTrigger( value.substr( 0, 1 ) );
241
242 this.controller.switchView( view );
243 };
244 /**
245 * Respond to query button click
246 */
247 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSaveQueryButtonClick = function () {
248 this.getMenu().toggle( false );
249 };
250
251 /**
252 * Respond to save query item change. Mainly this is done to update the label in case
253 * a query item has been edited
254 *
255 * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
256 */
257 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSavedQueriesItemUpdate = function ( item ) {
258 if ( this.matchingQuery === item ) {
259 // This means we just edited the item that is currently matched
260 this.savedQueryTitle.setLabel( item.getLabel() );
261 }
262 };
263
264 /**
265 * Respond to menu toggle
266 *
267 * @param {boolean} isVisible Menu is visible
268 */
269 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuToggle = function ( isVisible ) {
270 // Parent
271 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onMenuToggle.call( this );
272
273 if ( isVisible ) {
274 mw.hook( 'RcFilters.popup.open' ).fire();
275
276 if ( !this.getMenu().getSelectedItem() ) {
277 // If there are no selected items, scroll menu to top
278 // This has to be in a setTimeout so the menu has time
279 // to be positioned and fixed
280 setTimeout( function () { this.getMenu().scrollToTop(); }.bind( this ), 0 );
281 }
282 } else {
283 // Clear selection
284 this.selectTag( null );
285
286 // Clear input if the only thing in the input is the prefix
287 if (
288 this.input.getValue() === this.model.getViewTrigger( this.model.getCurrentView() )
289 ) {
290 // Clear the input
291 this.input.setValue( '' );
292 }
293 }
294
295 this.input.setIcon( isVisible ? 'search' : 'menu' );
296 };
297
298 /**
299 * @inheritdoc
300 */
301 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onInputFocus = function () {
302 // Parent
303 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onInputFocus.call( this );
304
305 // Scroll to top
306 this.scrollToTop( this.$element );
307 };
308
309 /**
310 * @inheritdoc
311 */
312 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.doInputEscape = function () {
313 // Parent
314 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.doInputEscape.call( this );
315
316 // Blur the input
317 this.input.$input.blur();
318 };
319
320 /**
321 * @inheridoc
322 */
323 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onChangeTags = function () {
324 // Parent method
325 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onChangeTags.call( this );
326
327 this.emptyFilterMessage.toggle( this.isEmpty() );
328 };
329
330 /**
331 * Respond to model initialize event
332 */
333 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelInitialize = function () {
334 this.setSavedQueryVisibility();
335 };
336
337 /**
338 * Respond to model update event
339 */
340 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelUpdate = function () {
341 this.updateElementsForView();
342 };
343
344 /**
345 * Update the elements in the widget to the current view
346 */
347 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.updateElementsForView = function () {
348 var view = this.model.getCurrentView(),
349 inputValue = this.input.getValue(),
350 inputView = this.model.getViewByTrigger( inputValue.substr( 0, 1 ) );
351
352 if ( inputView !== 'default' ) {
353 // We have a prefix already, remove it
354 inputValue = inputValue.substr( 1 );
355 }
356
357 if ( inputView !== view ) {
358 // Add the correct prefix
359 inputValue = this.model.getViewTrigger( view ) + inputValue;
360 }
361
362 // Update input
363 this.input.setValue( inputValue );
364 };
365
366 /**
367 * Set the visibility of the saved query button
368 */
369 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
370 if ( this.areSavedQueriesEnabled ) {
371 this.matchingQuery = this.controller.findQueryMatchingCurrentState();
372
373 this.savedQueryTitle.setLabel(
374 this.matchingQuery ? this.matchingQuery.getLabel() : ''
375 );
376 this.savedQueryTitle.toggle( !!this.matchingQuery );
377 this.saveQueryButton.toggle(
378 !this.isEmpty() &&
379 !this.matchingQuery
380 );
381 }
382 };
383
384 /**
385 * Respond to model itemUpdate event
386 *
387 * @param {mw.rcfilters.dm.FilterItem} item Filter item model
388 */
389 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelItemUpdate = function ( item ) {
390 if (
391 item.isSelected() ||
392 (
393 this.model.isHighlightEnabled() &&
394 item.isHighlightSupported() &&
395 item.getHighlightColor()
396 )
397 ) {
398 this.addTag( item.getName(), item.getLabel() );
399 } else {
400 this.removeTagByData( item.getName() );
401 }
402
403 this.setSavedQueryVisibility();
404
405 // Re-evaluate reset state
406 this.reevaluateResetRestoreState();
407 };
408
409 /**
410 * @inheritdoc
411 */
412 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.isAllowedData = function ( data ) {
413 return (
414 this.model.getItemByName( data ) &&
415 !this.isDuplicateData( data )
416 );
417 };
418
419 /**
420 * @inheritdoc
421 */
422 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onMenuChoose = function ( item ) {
423 this.controller.toggleFilterSelect( item.model.getName() );
424
425 // Select the tag if it exists, or reset selection otherwise
426 this.selectTag( this.getItemFromData( item.model.getName() ) );
427
428 this.focus();
429 };
430
431 /**
432 * Respond to highlightChange event
433 *
434 * @param {boolean} isHighlightEnabled Highlight is enabled
435 */
436 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelHighlightChange = function ( isHighlightEnabled ) {
437 var highlightedItems = this.model.getHighlightedItems();
438
439 if ( isHighlightEnabled ) {
440 // Add capsule widgets
441 highlightedItems.forEach( function ( filterItem ) {
442 this.addTag( filterItem.getName(), filterItem.getLabel() );
443 }.bind( this ) );
444 } else {
445 // Remove capsule widgets if they're not selected
446 highlightedItems.forEach( function ( filterItem ) {
447 if ( !filterItem.isSelected() ) {
448 this.removeTagByData( filterItem.getName() );
449 }
450 }.bind( this ) );
451 }
452 };
453
454 /**
455 * @inheritdoc
456 */
457 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagSelect = function ( tagItem ) {
458 var widget = this,
459 menuOption = this.menu.getItemFromModel( tagItem.getModel() ),
460 oldInputValue = this.input.getValue();
461
462 this.menu.setUserSelecting( true );
463
464 // Reset input
465 this.input.setValue( '' );
466
467 // Switch view
468 this.controller.switchView( tagItem.getView() );
469
470 // Parent method
471 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagSelect.call( this, tagItem );
472
473 this.menu.selectItem( menuOption );
474 this.selectTag( tagItem );
475
476 // Scroll to the item
477 if ( this.model.removeViewTriggers( oldInputValue ) ) {
478 // We're binding a 'once' to the itemVisibilityChange event
479 // so this happens when the menu is ready after the items
480 // are visible again, in case this is done right after the
481 // user filtered the results
482 this.getMenu().once(
483 'itemVisibilityChange',
484 function () {
485 widget.scrollToTop( menuOption.$element );
486 widget.menu.setUserSelecting( false );
487 }
488 );
489 } else {
490 this.scrollToTop( menuOption.$element );
491 this.menu.setUserSelecting( false );
492 }
493
494 };
495
496 /**
497 * Select a tag by reference. This is what OO.ui.SelectWidget is doing.
498 * If no items are given, reset selection from all.
499 *
500 * @param {mw.rcfilters.ui.FilterTagItemWidget} [item] Tag to select,
501 * omit to deselect all
502 */
503 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.selectTag = function ( item ) {
504 var i, len, selected;
505
506 for ( i = 0, len = this.items.length; i < len; i++ ) {
507 selected = this.items[ i ] === item;
508 if ( this.items[ i ].isSelected() !== selected ) {
509 this.items[ i ].toggleSelected( selected );
510 }
511 }
512 };
513 /**
514 * @inheritdoc
515 */
516 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onTagRemove = function ( tagItem ) {
517 // Parent method
518 mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onTagRemove.call( this, tagItem );
519
520 this.controller.clearFilter( tagItem.getName() );
521
522 tagItem.destroy();
523 };
524
525 /**
526 * Respond to click event on the reset button
527 */
528 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onResetButtonClick = function () {
529 if ( this.model.areCurrentFiltersEmpty() ) {
530 // Reset to default filters
531 this.controller.resetToDefaults();
532 } else {
533 // Reset to have no filters
534 this.controller.emptyFilters();
535 }
536 };
537
538 /**
539 * Reevaluate the restore state for the widget between setting to defaults and clearing all filters
540 */
541 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.reevaluateResetRestoreState = function () {
542 var defaultsAreEmpty = this.model.areDefaultFiltersEmpty(),
543 currFiltersAreEmpty = this.model.areCurrentFiltersEmpty(),
544 hideResetButton = currFiltersAreEmpty && defaultsAreEmpty;
545
546 this.resetButton.setIcon(
547 currFiltersAreEmpty ? 'history' : 'trash'
548 );
549
550 this.resetButton.setLabel(
551 currFiltersAreEmpty ? mw.msg( 'rcfilters-restore-default-filters' ) : ''
552 );
553 this.resetButton.setTitle(
554 currFiltersAreEmpty ? null : mw.msg( 'rcfilters-clear-all-filters' )
555 );
556
557 this.resetButton.toggle( !hideResetButton );
558 this.emptyFilterMessage.toggle( currFiltersAreEmpty );
559 };
560
561 /**
562 * @inheritdoc
563 */
564 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.createMenuWidget = function ( menuConfig ) {
565 return new mw.rcfilters.ui.MenuSelectWidget(
566 this.controller,
567 this.model,
568 $.extend( {
569 filterFromInput: true
570 }, menuConfig )
571 );
572 };
573
574 /**
575 * @inheritdoc
576 */
577 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.createTagItemWidget = function ( data ) {
578 var filterItem = this.model.getItemByName( data );
579
580 if ( filterItem ) {
581 return new mw.rcfilters.ui.FilterTagItemWidget(
582 this.controller,
583 filterItem,
584 {
585 $overlay: this.$overlay
586 }
587 );
588 }
589 };
590
591 /**
592 * Scroll the element to top within its container
593 *
594 * @private
595 * @param {jQuery} $element Element to position
596 * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
597 * much space (in pixels) above the widget.
598 */
599 mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.scrollToTop = function ( $element, marginFromTop ) {
600 var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
601 pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
602 containerScrollTop = $( container ).is( 'body, html' ) ? 0 : $( container ).scrollTop();
603
604 // Scroll to item
605 $( container ).animate( {
606 scrollTop: containerScrollTop + pos.top - ( marginFromTop || 0 )
607 } );
608 };
609 }( mediaWiki ) );