2 * MediaWiki Widgets - CategorySelector class.
4 * @copyright 2011-2015 MediaWiki Widgets Team and others; see AUTHORS.txt
5 * @license The MIT License (MIT); see LICENSE.txt
11 * Category selector widget. Displays an OO.ui.CapsuleMultiSelectWidget
12 * and autocompletes with available categories.
14 * var selector = new mw.widgets.CategorySelector( {
16 * mw.widgets.CategorySelector.SearchType.OpenSearch,
17 * mw.widgets.CategorySelector.SearchType.InternalSearch
21 * $( '#content' ).append( selector.$element );
23 * selector.setSearchType( [ mw.widgets.CategorySelector.SearchType.SubCategories ] );
26 * @class mw.widgets.CategorySelector
28 * @extends OO.ui.CapsuleMultiSelectWidget
31 * @param {Object} [config] Configuration options
32 * @cfg {number} [limit=10] Maximum number of results to load
33 * @cfg {mw.widgets.CategorySelector.SearchType[]} [searchTypes=[mw.widgets.CategorySelector.SearchType.OpenSearch]]
34 * Default search API to use when searching.
36 function CategorySelector( config
) {
37 // Config initialization
40 searchTypes
: [ CategorySelector
.SearchType
.OpenSearch
]
42 this.limit
= config
.limit
;
43 this.searchTypes
= config
.searchTypes
;
44 this.validateSearchTypes();
47 mw
.widgets
.CategorySelector
.parent
.call( this, $.extend( true, {}, config
, {
49 filterFromInput
: false
51 // This allows the user to both select non-existent categories, and prevents the selector from
52 // being wiped from #onMenuItemsChange when we change the available options in the dropdown
56 // Event handler to call the autocomplete methods
57 this.$input
.on( 'change input cut paste', OO
.ui
.debounce( this.updateMenuItems
.bind( this ), 100 ) );
60 this.catNsId
= mw
.config
.get( 'wgNamespaceIds' ).category
;
61 this.api
= new mw
.Api();
67 OO
.inheritClass( CategorySelector
, OO
.ui
.CapsuleMultiSelectWidget
);
68 CSP
= CategorySelector
.prototype;
73 * Gets new items based on the input by calling
74 * {@link #getNewMenuItems getNewItems} and updates the menu
75 * after removing duplicates based on the data value.
80 CSP
.updateMenuItems = function () {
81 this.getMenu().clearItems();
82 this.getNewMenuItems( this.$input
.val() ).then( function ( items
) {
83 var existingItems
, filteredItems
,
84 menu
= this.getMenu();
86 // Array of strings of the data of OO.ui.MenuOptionsWidgets
87 existingItems
= menu
.getItems().map( function ( item
) {
91 // Remove if items' data already exists
92 filteredItems
= items
.filter( function ( item
) {
93 return existingItems
.indexOf( item
) === -1;
96 // Map to an array of OO.ui.MenuOptionWidgets
97 filteredItems
= filteredItems
.map( function ( item
) {
98 return new OO
.ui
.MenuOptionWidget( {
104 menu
.addItems( filteredItems
).toggle( true );
109 * Searches for categories based on the input.
113 * @param {string} input The input used to prefix search categories
114 * @return {jQuery.Promise} Resolves with an array of categories
116 CSP
.getNewMenuItems = function ( input
) {
119 deferred
= new $.Deferred();
121 for ( i
= 0; i
< this.searchTypes
.length
; i
++ ) {
122 promises
.push( this.searchCategories( input
, this.searchTypes
[ i
] ) );
125 $.when
.apply( $, promises
).done( function () {
126 var categories
, categoryNames
,
128 dataSets
= Array
.prototype.slice
.apply( arguments
);
130 // Collect values from all results
131 allData
= allData
.concat
.apply( allData
, dataSets
);
134 categories
= allData
.filter( function ( value
, index
, self
) {
135 return self
.indexOf( value
) === index
;
139 categoryNames
= categories
.map( function ( name
) {
140 return mw
.Title
.newFromText( name
, this.catNsId
).getMainText();
143 deferred
.resolve( categoryNames
);
147 return deferred
.promise();
151 * Validates the values in `this.searchType`.
156 CSP
.validateSearchTypes = function () {
157 var validSearchTypes
= false,
158 searchTypeEnumCount
= Object
.keys( CategorySelector
.SearchType
).length
;
160 // Check if all values are in the SearchType enum
161 validSearchTypes
= this.searchTypes
.every( function ( searchType
) {
162 return searchType
> -1 && searchType
< searchTypeEnumCount
;
165 if ( validSearchTypes
=== false ) {
166 throw new Error( 'Unknown searchType in searchTypes' );
169 // If the searchTypes has CategorySelector.SearchType.SubCategories
170 // it can be the only search type.
171 if ( this.searchTypes
.indexOf( CategorySelector
.SearchType
.SubCategories
) > -1 &&
172 this.searchTypes
.length
> 1
174 throw new Error( 'Can\'t have additional search types with CategorySelector.SearchType.SubCategories' );
177 // If the searchTypes has CategorySelector.SearchType.ParentCategories
178 // it can be the only search type.
179 if ( this.searchTypes
.indexOf( CategorySelector
.SearchType
.ParentCategories
) > -1 &&
180 this.searchTypes
.length
> 1
182 throw new Error( 'Can\'t have additional search types with CategorySelector.SearchType.ParentCategories' );
189 * Sets and validates the value of `this.searchType`.
191 * @param {mw.widgets.CategorySelector.SearchType[]} searchTypes
193 CSP
.setSearchTypes = function ( searchTypes
) {
194 this.searchTypes
= searchTypes
;
195 this.validateSearchTypes();
199 * Searches categories based on input and searchType.
203 * @param {string} input The input used to prefix search categories
204 * @param {mw.widgets.CategorySelector.SearchType} searchType
205 * @return {jQuery.Promise} Resolves with an array of categories
207 CSP
.searchCategories = function ( input
, searchType
) {
208 var deferred
= new $.Deferred();
210 switch ( searchType
) {
211 case CategorySelector
.SearchType
.OpenSearch
:
213 action
: 'opensearch',
214 namespace: this.catNsId
,
217 } ).done( function ( res
) {
218 var categories
= res
[ 1 ];
219 deferred
.resolve( categories
);
223 case CategorySelector
.SearchType
.InternalSearch
:
227 apnamespace
: this.catNsId
,
231 } ).done( function ( res
) {
232 var categories
= res
.query
.allpages
.map( function ( page
) {
235 deferred
.resolve( categories
);
239 case CategorySelector
.SearchType
.Exists
:
240 if ( input
.indexOf( '|' ) > -1 ) {
241 deferred
.resolve( [] );
248 titles
: 'Category:' + input
249 } ).done( function ( res
) {
253 for ( page
in res
.query
.pages
) {
254 if ( parseInt( page
, 10 ) > -1 ) {
255 categories
.push( res
.query
.pages
[ page
].title
);
259 deferred
.resolve( categories
);
263 case CategorySelector
.SearchType
.SubCategories
:
264 if ( input
.indexOf( '|' ) > -1 ) {
265 deferred
.resolve( [] );
271 list
: 'categorymembers',
274 cmtitle
: 'Category:' + input
275 } ).done( function ( res
) {
276 var categories
= res
.query
.categorymembers
.map( function ( category
) {
277 return category
.title
;
279 deferred
.resolve( categories
);
283 case CategorySelector
.SearchType
.ParentCategories
:
284 if ( input
.indexOf( '|' ) > -1 ) {
285 deferred
.resolve( [] );
293 titles
: 'Category:' + input
294 } ).done( function ( res
) {
298 for ( page
in res
.query
.pages
) {
299 if ( parseInt( page
, 10 ) > -1 ) {
300 if ( $.isArray( res
.query
.pages
[ page
].categories
) ) {
301 categories
.push
.apply( categories
, res
.query
.pages
[ page
].categories
.map( function ( category
) {
302 return category
.title
;
308 deferred
.resolve( categories
);
313 throw new Error( 'Unknown searchType' );
316 return deferred
.promise();
320 * @enum mw.widgets.CategorySelector.SearchType
321 * Types of search available.
323 CategorySelector
.SearchType
= {
324 /** Search using action=opensearch */
327 /** Search using action=query */
330 /** Search for existing categories with the exact title */
333 /** Search only subcategories */
336 /** Search only parent categories */
340 mw
.widgets
.CategorySelector
= CategorySelector
;
341 }( jQuery
, mediaWiki
) );