2 * MediaWiki Widgets - UsersMultiselectWidget class.
4 * @copyright 2017 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
10 * UsersMultiselectWidget can be used to input list of users in a single
13 * If used inside HTML form the results will be sent as the list of
14 * newline-separated usernames.
17 * @extends OO.ui.MenuTagMultiselectWidget
20 * @param {Object} [config] Configuration options
21 * @cfg {mw.Api} [api] Instance of mw.Api (or subclass thereof) to use for queries
22 * @cfg {number} [limit=10] Number of results to show in autocomplete menu
23 * @cfg {string} [name] Name of input to submit results (when used in HTML forms)
25 mw
.widgets
.UsersMultiselectWidget
= function MwWidgetsUsersMultiselectWidget( config
) {
26 // Config initialization
30 // Because of using autocomplete (constantly changing menu), we need to
31 // allow adding usernames, which do not present in the menu.
36 mw
.widgets
.UsersMultiselectWidget
.parent
.call( this, $.extend( {}, config
, {} ) );
39 OO
.ui
.mixin
.PendingElement
.call( this, $.extend( {}, config
, { $pending
: this.$handle
} ) );
42 this.limit
= config
.limit
;
44 if ( 'name' in config
) {
45 // If used inside HTML form, then create hidden input, which will store
47 this.hiddenInput
= $( '<input>' )
48 .attr( 'type', 'hidden' )
49 .attr( 'name', config
.name
)
50 .appendTo( this.$element
);
52 // Update with preset values
53 this.updateHiddenInput();
56 this.menu
= this.getMenu();
59 // When list of selected usernames changes, update hidden input
61 change
: 'onMultiselectChange'
65 this.api
= config
.api
|| new mw
.Api();
70 OO
.inheritClass( mw
.widgets
.UsersMultiselectWidget
, OO
.ui
.MenuTagMultiselectWidget
);
71 OO
.mixinClass( mw
.widgets
.UsersMultiselectWidget
, OO
.ui
.mixin
.PendingElement
);
76 * Get currently selected usernames
78 * @return {string[]} usernames
80 mw
.widgets
.UsersMultiselectWidget
.prototype.getSelectedUsernames = function () {
81 return this.getValue();
85 * Update autocomplete menu with items
89 mw
.widgets
.UsersMultiselectWidget
.prototype.updateMenuItems = function () {
90 var inputValue
= this.input
.getValue();
92 if ( inputValue
=== this.inputValue
) {
93 // Do not restart api query if nothing has changed in the input
96 this.inputValue
= inputValue
;
99 this.api
.abort(); // Abort all unfinished api requests
101 if ( inputValue
.length
> 0 ) {
107 // Prefix of list=allusers is case sensitive. Normalise first
108 // character to uppercase so that "fo" may yield "Foo".
109 auprefix
: inputValue
[ 0 ].toUpperCase() + inputValue
.slice( 1 ),
111 } ).done( function ( response
) {
112 var suggestions
= response
.query
.allusers
,
113 selected
= this.getSelectedUsernames();
115 // Remove usernames, which are already selected from suggestions
116 suggestions
= suggestions
.map( function ( user
) {
117 if ( selected
.indexOf( user
.name
) === -1 ) {
118 return new OO
.ui
.MenuOptionWidget( {
123 } ).filter( function ( item
) {
124 return item
!== undefined;
127 // Remove all items from menu add fill it with new
128 this.menu
.clearItems();
129 this.menu
.addItems( suggestions
);
130 // Make the menu visible; it might not be if it was previously empty
131 this.menu
.toggle( true );
134 }.bind( this ) ).fail( this.popPending
.bind( this ) );
136 this.menu
.clearItems();
140 mw
.widgets
.UsersMultiselectWidget
.prototype.onInputChange = function () {
141 mw
.widgets
.UsersMultiselectWidget
.parent
.prototype.onInputChange
.apply( this, arguments
);
143 this.updateMenuItems();
147 * If used inside HTML form, then update hiddenInput with list o
148 * newline-separated usernames.
152 mw
.widgets
.UsersMultiselectWidget
.prototype.updateHiddenInput = function () {
153 if ( 'hiddenInput' in this ) {
154 this.hiddenInput
.val( this.getSelectedUsernames().join( '\n' ) );
155 // Hidden inputs do not trigger onChange.
156 // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/hidden
157 this.hiddenInput
.trigger( 'change' );
162 * React to the 'change' event.
164 * Updates the hidden input and clears the text from the text box.
166 mw
.widgets
.UsersMultiselectWidget
.prototype.onMultiselectChange = function () {
167 this.updateHiddenInput();
168 this.input
.setValue( '' );
171 }( jQuery
, mediaWiki
) );