3 * View model for the filters selection and display
5 * @mixins OO.EventEmitter
6 * @mixins OO.EmitterList
10 mw
.rcfilters
.dm
.FiltersViewModel
= function MwRcfiltersDmFiltersViewModel() {
12 OO
.EventEmitter
.call( this );
13 OO
.EmitterList
.call( this );
16 this.defaultParams
= {};
17 this.defaultFiltersEmpty
= null;
20 this.aggregate( { update
: 'filterItemUpdate' } );
21 this.connect( this, { filterItemUpdate
: [ 'emit', 'itemUpdate' ] } );
25 OO
.initClass( mw
.rcfilters
.dm
.FiltersViewModel
);
26 OO
.mixinClass( mw
.rcfilters
.dm
.FiltersViewModel
, OO
.EventEmitter
);
27 OO
.mixinClass( mw
.rcfilters
.dm
.FiltersViewModel
, OO
.EmitterList
);
34 * Filter list is initialized
39 * @param {mw.rcfilters.dm.FilterItem} item Filter item updated
41 * Filter item has changed
47 * Re-assess the states of filter items based on the interactions between them
49 * @param {mw.rcfilters.dm.FilterItem} [item] Changed item. If not given, the
50 * method will go over the state of all items
52 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.reassessFilterInteractions = function ( item
) {
55 iterationItems
= item
!== undefined ? [ item
] : this.getItems();
57 iterationItems
.forEach( function ( checkedItem
) {
58 var allCheckedItems
= checkedItem
.getSubset().concat( [ checkedItem
.getName() ] ),
59 groupModel
= checkedItem
.getGroupModel();
61 // Check for subsets (included filters) plus the item itself:
62 allCheckedItems
.forEach( function ( filterItemName
) {
63 var itemInSubset
= model
.getItemByName( filterItemName
);
65 itemInSubset
.toggleIncluded(
66 // If any of itemInSubset's supersets are selected, this item
68 itemInSubset
.getSuperset().some( function ( supersetName
) {
69 return ( model
.getItemByName( supersetName
).isSelected() );
74 // Update coverage for the changed group
75 if ( groupModel
.isFullCoverage() ) {
76 allSelected
= groupModel
.areAllSelected();
77 groupModel
.getItems().forEach( function ( filterItem
) {
78 filterItem
.toggleFullyCovered( allSelected
);
85 * Set filters and preserve a group relationship based on
86 * the definition given by an object
88 * @param {Object} filters Filter group definition
90 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.initializeFilters = function ( filters
) {
91 var i
, filterItem
, selectedFilterNames
,
94 addArrayElementsUnique = function ( arr
, elements
) {
95 elements
= Array
.isArray( elements
) ? elements
: [ elements
];
97 elements
.forEach( function ( element
) {
98 if ( arr
.indexOf( element
) === -1 ) {
112 $.each( filters
, function ( group
, data
) {
113 if ( !model
.groups
[ group
] ) {
114 model
.groups
[ group
] = new mw
.rcfilters
.dm
.FilterGroup( group
, {
117 separator
: data
.separator
,
118 fullCoverage
: !!data
.fullCoverage
122 selectedFilterNames
= [];
123 for ( i
= 0; i
< data
.filters
.length
; i
++ ) {
124 filterItem
= new mw
.rcfilters
.dm
.FilterItem( data
.filters
[ i
].name
, model
.groups
[ group
], {
126 label
: data
.filters
[ i
].label
,
127 description
: data
.filters
[ i
].description
,
128 subset
: data
.filters
[ i
].subset
131 // For convenience, we should store each filter's "supersets" -- these are
132 // the filters that have that item in their subset list. This will just
133 // make it easier to go through whether the item has any other items
134 // that affect it (and are selected) at any given time
135 if ( data
.filters
[ i
].subset
) {
136 data
.filters
[ i
].subset
.forEach( function ( subsetFilterName
) { // eslint-disable-line no-loop-func
137 supersetMap
[ subsetFilterName
] = supersetMap
[ subsetFilterName
] || [];
138 addArrayElementsUnique(
139 supersetMap
[ subsetFilterName
],
145 // Conflicts are bi-directional, which means FilterA can define having
146 // a conflict with FilterB, and this conflict should appear in **both**
147 // filter definitions.
148 // We need to remap all the 'conflicts' so they reflect the entire state
149 // in either direction regardless of which filter defined the other as conflicting.
150 if ( data
.filters
[ i
].conflicts
) {
151 conflictMap
[ filterItem
.getName() ] = conflictMap
[ filterItem
.getName() ] || [];
152 addArrayElementsUnique(
153 conflictMap
[ filterItem
.getName() ],
154 data
.filters
[ i
].conflicts
157 data
.filters
[ i
].conflicts
.forEach( function ( conflictingFilterName
) { // eslint-disable-line no-loop-func
158 // Add this filter to the conflicts of each of the filters in its list
159 conflictMap
[ conflictingFilterName
] = conflictMap
[ conflictingFilterName
] || [];
160 addArrayElementsUnique(
161 conflictMap
[ conflictingFilterName
],
167 if ( data
.type
=== 'send_unselected_if_any' ) {
168 // Store the default parameter state
169 // For this group type, parameter values are direct
170 model
.defaultParams
[ data
.filters
[ i
].name
] = Number( !!data
.filters
[ i
].default );
172 data
.type
=== 'string_options' &&
173 data
.filters
[ i
].default
175 selectedFilterNames
.push( data
.filters
[ i
].name
);
178 model
.groups
[ group
].addItems( filterItem
);
179 items
.push( filterItem
);
182 if ( data
.type
=== 'string_options' ) {
183 // Store the default parameter group state
184 // For this group, the parameter is group name and value is the names
186 model
.defaultParams
[ group
] = model
.sanitizeStringOptionGroup( group
, selectedFilterNames
).join( model
.groups
[ group
].getSeparator() );
190 items
.forEach( function ( filterItem
) {
191 // Apply conflict map to the items
192 // Now that we mapped all items and conflicts bi-directionally
193 // we need to apply the definition to each filter again
194 filterItem
.setConflicts( conflictMap
[ filterItem
.getName() ] );
196 // Apply the superset map
197 filterItem
.setSuperset( supersetMap
[ filterItem
.getName() ] );
200 // Add items to the model
201 this.addItems( items
);
203 this.emit( 'initialize' );
207 * Get the names of all available filters
209 * @return {string[]} An array of filter names
211 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getFilterNames = function () {
212 return this.getItems().map( function ( item
) { return item
.getName(); } );
216 * Get the object that defines groups by their name.
218 * @return {Object} Filter groups
220 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getFilterGroups = function () {
225 * Get the value of a specific parameter
227 * @param {string} name Parameter name
228 * @return {number|string} Parameter value
230 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getParamValue = function ( name
) {
231 return this.parameters
[ name
];
235 * Get the current selected state of the filters
237 * @return {Object} Filters selected state
239 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getSelectedState = function () {
241 items
= this.getItems(),
244 for ( i
= 0; i
< items
.length
; i
++ ) {
245 result
[ items
[ i
].getName() ] = items
[ i
].isSelected();
252 * Get the current full state of the filters
254 * @return {Object} Filters full state
256 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getFullState = function () {
258 items
= this.getItems(),
261 for ( i
= 0; i
< items
.length
; i
++ ) {
262 result
[ items
[ i
].getName() ] = {
263 selected
: items
[ i
].isSelected(),
264 conflicted
: items
[ i
].isConflicted(),
265 included
: items
[ i
].isIncluded()
273 * Get the default parameters object
275 * @return {Object} Default parameter values
277 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getDefaultParams = function () {
278 return this.defaultParams
;
282 * Set all filter states to default values
284 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.setFiltersToDefaults = function () {
285 var defaultFilterStates
= this.getFiltersFromParameters( this.getDefaultParams() );
287 this.updateFilters( defaultFilterStates
);
291 * Analyze the groups and their filters and output an object representing
292 * the state of the parameters they represent.
294 * @param {Object} [filterGroups] An object defining the filter groups to
295 * translate to parameters. Its structure must follow that of this.groups
296 * see #getFilterGroups
297 * @return {Object} Parameter state object
299 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getParametersFromFilters = function ( filterGroups
) {
300 var i
, filterItems
, anySelected
, values
,
302 groupItems
= filterGroups
|| this.getFilterGroups();
304 $.each( groupItems
, function ( group
, model
) {
305 filterItems
= model
.getItems();
307 if ( model
.getType() === 'send_unselected_if_any' ) {
308 // First, check if any of the items are selected at all.
309 // If none is selected, we're treating it as if they are
311 anySelected
= filterItems
.some( function ( filterItem
) {
312 return filterItem
.isSelected();
315 // Go over the items and define the correct values
316 for ( i
= 0; i
< filterItems
.length
; i
++ ) {
317 result
[ filterItems
[ i
].getName() ] = anySelected
?
318 Number( !filterItems
[ i
].isSelected() ) : 0;
320 } else if ( model
.getType() === 'string_options' ) {
322 for ( i
= 0; i
< filterItems
.length
; i
++ ) {
323 if ( filterItems
[ i
].isSelected() ) {
324 values
.push( filterItems
[ i
].getName() );
328 if ( values
.length
=== 0 || values
.length
=== filterItems
.length
) {
329 result
[ group
] = 'all';
331 result
[ group
] = values
.join( model
.getSeparator() );
340 * Sanitize value group of a string_option groups type
341 * Remove duplicates and make sure to only use valid
345 * @param {string} groupName Group name
346 * @param {string[]} valueArray Array of values
347 * @return {string[]} Array of valid values
349 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.sanitizeStringOptionGroup = function( groupName
, valueArray
) {
351 validNames
= this.getGroupFilters( groupName
).map( function ( filterItem
) {
352 return filterItem
.getName();
355 if ( valueArray
.indexOf( 'all' ) > -1 ) {
356 // If anywhere in the values there's 'all', we
357 // treat it as if only 'all' was selected.
358 // Example: param=valid1,valid2,all
363 // Get rid of any dupe and invalid parameter, only output
365 // Example: param=valid1,valid2,invalid1,valid1
366 // Result: param=valid1,valid2
367 valueArray
.forEach( function ( value
) {
369 validNames
.indexOf( value
) > -1 &&
370 result
.indexOf( value
) === -1
372 result
.push( value
);
380 * Check whether the current filter state is set to all false.
382 * @return {boolean} Current filters are all empty
384 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.areCurrentFiltersEmpty = function () {
385 var currFilters
= this.getSelectedState();
387 return Object
.keys( currFilters
).every( function ( filterName
) {
388 return !currFilters
[ filterName
];
393 * Check whether the default values of the filters are all false.
395 * @return {boolean} Default filters are all false
397 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.areDefaultFiltersEmpty = function () {
400 if ( this.defaultFiltersEmpty
!== null ) {
401 // We only need to do this test once,
402 // because defaults are set once per session
403 defaultFilters
= this.getFiltersFromParameters();
404 this.defaultFiltersEmpty
= Object
.keys( defaultFilters
).every( function ( filterName
) {
405 return !defaultFilters
[ filterName
];
409 return this.defaultFiltersEmpty
;
413 * This is the opposite of the #getParametersFromFilters method; this goes over
414 * the given parameters and translates into a selected/unselected value in the filters.
416 * @param {Object} params Parameters query object
417 * @return {Object} Filter state object
419 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getFiltersFromParameters = function ( params
) {
423 base
= this.getDefaultParams(),
426 params
= $.extend( {}, base
, params
);
428 $.each( params
, function ( paramName
, paramValue
) {
429 // Find the filter item
430 filterItem
= model
.getItemByName( paramName
);
431 // Ignore if no filter item exists
433 groupMap
[ filterItem
.getGroupName() ] = groupMap
[ filterItem
.getGroupName() ] || {};
435 // Mark the group if it has any items that are selected
436 groupMap
[ filterItem
.getGroupName() ].hasSelected
= (
437 groupMap
[ filterItem
.getGroupName() ].hasSelected
||
438 !!Number( paramValue
)
441 // Add the relevant filter into the group map
442 groupMap
[ filterItem
.getGroupName() ].filters
= groupMap
[ filterItem
.getGroupName() ].filters
|| [];
443 groupMap
[ filterItem
.getGroupName() ].filters
.push( filterItem
);
444 } else if ( model
.groups
.hasOwnProperty( paramName
) ) {
445 // This parameter represents a group (values are the filters)
446 // this is equivalent to checking if the group is 'string_options'
447 groupMap
[ paramName
] = { filters
: model
.groups
[ paramName
].getItems() };
451 // Now that we know the groups' selection states, we need to go over
452 // the filters in the groups and mark their selected states appropriately
453 $.each( groupMap
, function ( group
, data
) {
454 var paramValues
, filterItem
,
455 allItemsInGroup
= data
.filters
;
457 if ( model
.groups
[ group
].getType() === 'send_unselected_if_any' ) {
458 for ( i
= 0; i
< allItemsInGroup
.length
; i
++ ) {
459 filterItem
= allItemsInGroup
[ i
];
461 result
[ filterItem
.getName() ] = data
.hasSelected
?
462 // Flip the definition between the parameter
463 // state and the filter state
464 // This is what the 'toggleSelected' value of the filter is
465 !Number( params
[ filterItem
.getName() ] ) :
466 // Otherwise, there are no selected items in the
467 // group, which means the state is false
470 } else if ( model
.groups
[ group
].getType() === 'string_options' ) {
471 paramValues
= model
.sanitizeStringOptionGroup( group
, params
[ group
].split( model
.groups
[ group
].getSeparator() ) );
473 for ( i
= 0; i
< allItemsInGroup
.length
; i
++ ) {
474 filterItem
= allItemsInGroup
[ i
];
476 result
[ filterItem
.getName() ] = (
477 // If it is the word 'all'
478 paramValues
.length
=== 1 && paramValues
[ 0 ] === 'all' ||
479 // All values are written
480 paramValues
.length
=== model
.groups
[ group
].getItemCount()
482 // All true (either because all values are written or the term 'all' is written)
483 // is the same as all filters set to false
485 // Otherwise, the filter is selected only if it appears in the parameter values
486 paramValues
.indexOf( filterItem
.getName() ) > -1;
494 * Get the item that matches the given name
496 * @param {string} name Filter name
497 * @return {mw.rcfilters.dm.FilterItem} Filter item
499 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getItemByName = function ( name
) {
500 return this.getItems().filter( function ( item
) {
501 return name
=== item
.getName();
506 * Set all filters to false or empty/all
507 * This is equivalent to display all.
509 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.emptyAllFilters = function () {
512 this.getItems().forEach( function ( filterItem
) {
513 filters
[ filterItem
.getName() ] = false;
517 this.updateFilters( filters
);
521 * Toggle selected state of items by their names
523 * @param {Object} filterDef Filter definitions
525 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.updateFilters = function ( filterDef
) {
526 var name
, filterItem
;
528 for ( name
in filterDef
) {
529 filterItem
= this.getItemByName( name
);
530 filterItem
.toggleSelected( filterDef
[ name
] );
535 * Get a group model from its name
537 * @param {string} groupName Group name
538 * @return {mw.rcfilters.dm.FilterGroup} Group model
540 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getGroup = function ( groupName
) {
541 return this.groups
[ groupName
];
545 * Get all filters within a specified group by its name
547 * @param {string} groupName Group name
548 * @return {mw.rcfilters.dm.FilterItem[]} Filters belonging to this group
550 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.getGroupFilters = function ( groupName
) {
551 return ( this.getGroup( groupName
) && this.getGroup( groupName
).getItems() ) || [];
555 * Find items whose labels match the given string
557 * @param {string} query Search string
558 * @return {Object} An object of items to show
559 * arranged by their group names
561 mw
.rcfilters
.dm
.FiltersViewModel
.prototype.findMatches = function ( query
) {
565 items
= this.getItems();
567 // Normalize so we can search strings regardless of case
568 query
= query
.toLowerCase();
570 // item label starting with the query string
571 for ( i
= 0; i
< items
.length
; i
++ ) {
572 if ( items
[ i
].getLabel().toLowerCase().indexOf( query
) === 0 ) {
573 result
[ items
[ i
].getGroupName() ] = result
[ items
[ i
].getGroupName() ] || [];
574 result
[ items
[ i
].getGroupName() ].push( items
[ i
] );
578 if ( $.isEmptyObject( result
) ) {
579 // item containing the query string in their label, description, or group title
580 for ( i
= 0; i
< items
.length
; i
++ ) {
581 groupTitle
= items
[ i
].getGroupModel().getTitle();
583 items
[ i
].getLabel().toLowerCase().indexOf( query
) > -1 ||
584 items
[ i
].getDescription().toLowerCase().indexOf( query
) > -1 ||
585 groupTitle
.toLowerCase().indexOf( query
) > -1
587 result
[ items
[ i
].getGroupName() ] = result
[ items
[ i
].getGroupName() ] || [];
588 result
[ items
[ i
].getGroupName() ].push( items
[ i
] );
596 }( mediaWiki
, jQuery
) );