RCFilters: Clean up focus handling in capsule widget
[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
1 ( function ( mw, $ ) {
2 /**
3 * Filter-specific CapsuleMultiselectWidget
4 *
5 * @extends OO.ui.CapsuleMultiselectWidget
6 *
7 * @constructor
8 * @param {OO.ui.InputWidget} filterInput A filter input that focuses the capsule widget
9 * @param {Object} config Configuration object
10 */
11 mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( filterInput, config ) {
12 // Parent
13 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.parent.call( this, $.extend( {
14 $autoCloseIgnore: filterInput.$element
15 }, config ) );
16
17 this.filterInput = filterInput;
18
19 this.$content.prepend(
20 $( '<div>' )
21 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
22 .text( mw.msg( 'rcfilters-activefilters' ) )
23 );
24
25 // Events
26 // Add the filterInput as trigger
27 this.filterInput.$input
28 .on( 'focus', this.focus.bind( this ) );
29
30 this.$element
31 .addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );
32 };
33
34 /* Initialization */
35
36 OO.inheritClass( mw.rcfilters.ui.FilterCapsuleMultiselectWidget, OO.ui.CapsuleMultiselectWidget );
37
38 /* Events */
39
40 /**
41 * @event remove
42 * @param {string[]} filters Array of names of removed filters
43 *
44 * Filters were removed
45 */
46
47 /* Methods */
48
49 /**
50 * @inheritdoc
51 */
52 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.focus = function () {
53 // Override this method; we don't want to focus on the popup, and we
54 // don't want to bind the size to the handle.
55 if ( !this.isDisabled() ) {
56 this.popup.toggle( true );
57 this.filterInput.$input.get( 0 ).focus();
58 }
59 return this;
60 };
61
62 /**
63 * @inheritdoc
64 */
65 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onFocusForPopup = function () {
66 // HACK can be removed once I21b8cff4048 is merged in oojs-ui
67 this.focus();
68 };
69
70 /**
71 * @inheritdoc
72 */
73 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.removeItems = function ( items ) {
74 // Parent
75 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.parent.prototype.removeItems.call( this, items );
76
77 this.emit( 'remove', items.map( function ( item ) { return item.getData(); } ) );
78 };
79
80 /**
81 * @inheritdoc
82 */
83 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onKeyDown = function () {};
84
85 /**
86 * @inheritdoc
87 */
88 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.onPopupFocusOut = function () {};
89
90 /**
91 * @inheritdoc
92 */
93 mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.clearInput = function () {
94 if ( this.filterInput ) {
95 this.filterInput.setValue( '' );
96 }
97 this.menu.toggle( false );
98 this.menu.selectItem();
99 this.menu.highlightItem();
100 };
101 }( mediaWiki, jQuery ) );