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