resources/src/mediawiki.rcfilters/dm/mw.rcfilters.dm.FiltersViewModel.js

   1 ( function ( mw, $ ) {
   2         /**
   3          * View model for the filters selection and display
   4          *
   5          * @mixins OO.EventEmitter
   6          * @mixins OO.EmitterList
   7          *
   8          * @constructor
   9          */
  10         mw.rcfilters.dm.FiltersViewModel = function MwRcfiltersDmFiltersViewModel() {
  11                 // Mixin constructor
  12                 OO.EventEmitter.call( this );
  13                 OO.EmitterList.call( this );
  14
  15                 this.groups = {};
  16                 this.defaultParams = {};
  17                 this.defaultFiltersEmpty = null;
  18
  19                 // Events
  20                 this.aggregate( { update: 'filterItemUpdate' } );
  21                 this.connect( this, { filterItemUpdate: [ 'emit', 'itemUpdate' ] } );
  22         };
  23
  24         /* Initialization */
  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 );
  28
  29         /* Events */
  30
  31         /**
  32          * @event initialize
  33          *
  34          * Filter list is initialized
  35          */
  36
  37         /**
  38          * @event itemUpdate
  39          * @param {mw.rcfilters.dm.FilterItem} item Filter item updated
  40          *
  41          * Filter item has changed
  42          */
  43
  44         /* Methods */
  45
  46         /**
  47          * Re-assess the states of filter items based on the interactions between them
  48          *
  49          * @param {mw.rcfilters.dm.FilterItem} [item] Changed item. If not given, the
  50          *  method will go over the state of all items
  51          */
  52         mw.rcfilters.dm.FiltersViewModel.prototype.reassessFilterInteractions = function ( item ) {
  53                 var allSelected,
  54                         model = this,
  55                         iterationItems = item !== undefined ? [ item ] : this.getItems();
  56
  57                 iterationItems.forEach( function ( checkedItem ) {
  58                         var allCheckedItems = checkedItem.getSubset().concat( [ checkedItem.getName() ] ),
  59                                 groupModel = checkedItem.getGroupModel();
  60
  61                         // Check for subsets (included filters) plus the item itself:
  62                         allCheckedItems.forEach( function ( filterItemName ) {
  63                                 var itemInSubset = model.getItemByName( filterItemName );
  64
  65                                 itemInSubset.toggleIncluded(
  66                                         // If any of itemInSubset's supersets are selected, this item
  67                                         // is included
  68                                         itemInSubset.getSuperset().some( function ( supersetName ) {
  69                                                 return ( model.getItemByName( supersetName ).isSelected() );
  70                                         } )
  71                                 );
  72                         } );
  73
  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 );
  79                                 } );
  80                         }
  81                 } );
  82         };
  83
  84         /**
  85          * Set filters and preserve a group relationship based on
  86          * the definition given by an object
  87          *
  88          * @param {Object} filters Filter group definition
  89          */
  90         mw.rcfilters.dm.FiltersViewModel.prototype.initializeFilters = function ( filters ) {
  91                 var i, filterItem, selectedFilterNames,
  92                         model = this,
  93                         items = [],
  94                         addArrayElementsUnique = function ( arr, elements ) {
  95                                 elements = Array.isArray( elements ) ? elements : [ elements ];
  96
  97                                 elements.forEach( function ( element ) {
  98                                         if ( arr.indexOf( element ) === -1 ) {
  99                                                 arr.push( element );
 100                                         }
 101                                 } );
 102
 103                                 return arr;
 104                         },
 105                         conflictMap = {},
 106                         supersetMap = {};
 107
 108                 // Reset
 109                 this.clearItems();
 110                 this.groups = {};
 111
 112                 $.each( filters, function ( group, data ) {
 113                         if ( !model.groups[ group ] ) {
 114                                 model.groups[ group ] = new mw.rcfilters.dm.FilterGroup( group, {
 115                                         type: data.type,
 116                                         title: data.title,
 117                                         separator: data.separator,
 118                                         fullCoverage: !!data.fullCoverage
 119                                 } );
 120                         }
 121
 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 ], {
 125                                         group: group,
 126                                         label: data.filters[ i ].label,
 127                                         description: data.filters[ i ].description,
 128                                         subset: data.filters[ i ].subset
 129                                 } );
 130
 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 ],
 140                                                         filterItem.getName()
 141                                                 );
 142                                         } );
 143                                 }
 144
 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
 155                                         );
 156
 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 ],
 162                                                         filterItem.getName()
 163                                                 );
 164                                         } );
 165                                 }
 166
 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 );
 171                                 } else if (
 172                                         data.type === 'string_options' &&
 173                                         data.filters[ i ].default
 174                                 ) {
 175                                         selectedFilterNames.push( data.filters[ i ].name );
 176                                 }
 177
 178                                 model.groups[ group ].addItems( filterItem );
 179                                 items.push( filterItem );
 180                         }
 181
 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
 185                                 // of selected items
 186                                 model.defaultParams[ group ] = model.sanitizeStringOptionGroup( group, selectedFilterNames ).join( model.groups[ group ].getSeparator() );
 187                         }
 188                 } );
 189
 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() ] );
 195
 196                         // Apply the superset map
 197                         filterItem.setSuperset( supersetMap[ filterItem.getName() ] );
 198                 } );
 199
 200                 // Add items to the model
 201                 this.addItems( items );
 202
 203                 this.emit( 'initialize' );
 204         };
 205
 206         /**
 207          * Get the names of all available filters
 208          *
 209          * @return {string[]} An array of filter names
 210          */
 211         mw.rcfilters.dm.FiltersViewModel.prototype.getFilterNames = function () {
 212                 return this.getItems().map( function ( item ) { return item.getName(); } );
 213         };
 214
 215         /**
 216          * Get the object that defines groups by their name.
 217          *
 218          * @return {Object} Filter groups
 219          */
 220         mw.rcfilters.dm.FiltersViewModel.prototype.getFilterGroups = function () {
 221                 return this.groups;
 222         };
 223
 224         /**
 225          * Get the value of a specific parameter
 226          *
 227          * @param {string} name Parameter name
 228          * @return {number|string} Parameter value
 229          */
 230         mw.rcfilters.dm.FiltersViewModel.prototype.getParamValue = function ( name ) {
 231                 return this.parameters[ name ];
 232         };
 233
 234         /**
 235          * Get the current selected state of the filters
 236          *
 237          * @return {Object} Filters selected state
 238          */
 239         mw.rcfilters.dm.FiltersViewModel.prototype.getSelectedState = function () {
 240                 var i,
 241                         items = this.getItems(),
 242                         result = {};
 243
 244                 for ( i = 0; i < items.length; i++ ) {
 245                         result[ items[ i ].getName() ] = items[ i ].isSelected();
 246                 }
 247
 248                 return result;
 249         };
 250
 251         /**
 252          * Get the current full state of the filters
 253          *
 254          * @return {Object} Filters full state
 255          */
 256         mw.rcfilters.dm.FiltersViewModel.prototype.getFullState = function () {
 257                 var i,
 258                         items = this.getItems(),
 259                         result = {};
 260
 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()
 266                         };
 267                 }
 268
 269                 return result;
 270         };
 271
 272         /**
 273          * Get the default parameters object
 274          *
 275          * @return {Object} Default parameter values
 276          */
 277         mw.rcfilters.dm.FiltersViewModel.prototype.getDefaultParams = function () {
 278                 return this.defaultParams;
 279         };
 280
 281         /**
 282          * Set all filter states to default values
 283          */
 284         mw.rcfilters.dm.FiltersViewModel.prototype.setFiltersToDefaults = function () {
 285                 var defaultFilterStates = this.getFiltersFromParameters( this.getDefaultParams() );
 286
 287                 this.updateFilters( defaultFilterStates );
 288         };
 289
 290         /**
 291          * Analyze the groups and their filters and output an object representing
 292          * the state of the parameters they represent.
 293          *
 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
 298          */
 299         mw.rcfilters.dm.FiltersViewModel.prototype.getParametersFromFilters = function ( filterGroups ) {
 300                 var i, filterItems, anySelected, values,
 301                         result = {},
 302                         groupItems = filterGroups || this.getFilterGroups();
 303
 304                 $.each( groupItems, function ( group, model ) {
 305                         filterItems = model.getItems();
 306
 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
 310                                 // all false
 311                                 anySelected = filterItems.some( function ( filterItem ) {
 312                                         return filterItem.isSelected();
 313                                 } );
 314
 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;
 319                                 }
 320                         } else if ( model.getType() === 'string_options' ) {
 321                                 values = [];
 322                                 for ( i = 0; i < filterItems.length; i++ ) {
 323                                         if ( filterItems[ i ].isSelected() ) {
 324                                                 values.push( filterItems[ i ].getName() );
 325                                         }
 326                                 }
 327
 328                                 if ( values.length === 0 || values.length === filterItems.length ) {
 329                                         result[ group ] = 'all';
 330                                 } else {
 331                                         result[ group ] = values.join( model.getSeparator() );
 332                                 }
 333                         }
 334                 } );
 335
 336                 return result;
 337         };
 338
 339         /**
 340          * Sanitize value group of a string_option groups type
 341          * Remove duplicates and make sure to only use valid
 342          * values.
 343          *
 344          * @private
 345          * @param {string} groupName Group name
 346          * @param {string[]} valueArray Array of values
 347          * @return {string[]} Array of valid values
 348          */
 349         mw.rcfilters.dm.FiltersViewModel.prototype.sanitizeStringOptionGroup = function( groupName, valueArray ) {
 350                 var result = [],
 351                         validNames = this.getGroupFilters( groupName ).map( function ( filterItem ) {
 352                                 return filterItem.getName();
 353                         } );
 354
 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
 359                         // Result: param=all
 360                         return [ 'all' ];
 361                 }
 362
 363                 // Get rid of any dupe and invalid parameter, only output
 364                 // valid ones
 365                 // Example: param=valid1,valid2,invalid1,valid1
 366                 // Result: param=valid1,valid2
 367                 valueArray.forEach( function ( value ) {
 368                         if (
 369                                 validNames.indexOf( value ) > -1 &&
 370                                 result.indexOf( value ) === -1
 371                         ) {
 372                                 result.push( value );
 373                         }
 374                 } );
 375
 376                 return result;
 377         };
 378
 379         /**
 380          * Check whether the current filter state is set to all false.
 381          *
 382          * @return {boolean} Current filters are all empty
 383          */
 384         mw.rcfilters.dm.FiltersViewModel.prototype.areCurrentFiltersEmpty = function () {
 385                 var currFilters = this.getSelectedState();
 386
 387                 return Object.keys( currFilters ).every( function ( filterName ) {
 388                         return !currFilters[ filterName ];
 389                 } );
 390         };
 391
 392         /**
 393          * Check whether the default values of the filters are all false.
 394          *
 395          * @return {boolean} Default filters are all false
 396          */
 397         mw.rcfilters.dm.FiltersViewModel.prototype.areDefaultFiltersEmpty = function () {
 398                 var defaultFilters;
 399
 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 ];
 406                         } );
 407                 }
 408
 409                 return this.defaultFiltersEmpty;
 410         };
 411
 412         /**
 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.
 415          *
 416          * @param {Object} params Parameters query object
 417          * @return {Object} Filter state object
 418          */
 419         mw.rcfilters.dm.FiltersViewModel.prototype.getFiltersFromParameters = function ( params ) {
 420                 var i, filterItem,
 421                         groupMap = {},
 422                         model = this,
 423                         base = this.getDefaultParams(),
 424                         result = {};
 425
 426                 params = $.extend( {}, base, params );
 427
 428                 $.each( params, function ( paramName, paramValue ) {
 429                         // Find the filter item
 430                         filterItem = model.getItemByName( paramName );
 431                         // Ignore if no filter item exists
 432                         if ( filterItem ) {
 433                                 groupMap[ filterItem.getGroupName() ] = groupMap[ filterItem.getGroupName() ] || {};
 434
 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 )
 439                                 );
 440
 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() };
 448                         }
 449                 } );
 450
 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;
 456
 457                         if ( model.groups[ group ].getType() === 'send_unselected_if_any' ) {
 458                                 for ( i = 0; i < allItemsInGroup.length; i++ ) {
 459                                         filterItem = allItemsInGroup[ i ];
 460
 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
 468                                                 false;
 469                                 }
 470                         } else if ( model.groups[ group ].getType() === 'string_options' ) {
 471                                 paramValues = model.sanitizeStringOptionGroup( group, params[ group ].split( model.groups[ group ].getSeparator() ) );
 472
 473                                 for ( i = 0; i < allItemsInGroup.length; i++ ) {
 474                                         filterItem = allItemsInGroup[ i ];
 475
 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()
 481                                                 ) ?
 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
 484                                                 false :
 485                                                 // Otherwise, the filter is selected only if it appears in the parameter values
 486                                                 paramValues.indexOf( filterItem.getName() ) > -1;
 487                                 }
 488                         }
 489                 } );
 490                 return result;
 491         };
 492
 493         /**
 494          * Get the item that matches the given name
 495          *
 496          * @param {string} name Filter name
 497          * @return {mw.rcfilters.dm.FilterItem} Filter item
 498          */
 499         mw.rcfilters.dm.FiltersViewModel.prototype.getItemByName = function ( name ) {
 500                 return this.getItems().filter( function ( item ) {
 501                         return name === item.getName();
 502                 } )[ 0 ];
 503         };
 504
 505         /**
 506          * Set all filters to false or empty/all
 507          * This is equivalent to display all.
 508          */
 509         mw.rcfilters.dm.FiltersViewModel.prototype.emptyAllFilters = function () {
 510                 var filters = {};
 511
 512                 this.getItems().forEach( function ( filterItem ) {
 513                         filters[ filterItem.getName() ] = false;
 514                 } );
 515
 516                 // Update filters
 517                 this.updateFilters( filters );
 518         };
 519
 520         /**
 521          * Toggle selected state of items by their names
 522          *
 523          * @param {Object} filterDef Filter definitions
 524          */
 525         mw.rcfilters.dm.FiltersViewModel.prototype.updateFilters = function ( filterDef ) {
 526                 var name, filterItem;
 527
 528                 for ( name in filterDef ) {
 529                         filterItem = this.getItemByName( name );
 530                         filterItem.toggleSelected( filterDef[ name ] );
 531                 }
 532         };
 533
 534         /**
 535          * Get a group model from its name
 536          *
 537          * @param {string} groupName Group name
 538          * @return {mw.rcfilters.dm.FilterGroup} Group model
 539          */
 540         mw.rcfilters.dm.FiltersViewModel.prototype.getGroup = function ( groupName ) {
 541                 return this.groups[ groupName ];
 542         };
 543
 544         /**
 545          * Get all filters within a specified group by its name
 546          *
 547          * @param {string} groupName Group name
 548          * @return {mw.rcfilters.dm.FilterItem[]} Filters belonging to this group
 549          */
 550         mw.rcfilters.dm.FiltersViewModel.prototype.getGroupFilters = function ( groupName ) {
 551                 return ( this.getGroup( groupName ) && this.getGroup( groupName ).getItems() ) || [];
 552         };
 553
 554         /**
 555          * Find items whose labels match the given string
 556          *
 557          * @param {string} query Search string
 558          * @return {Object} An object of items to show
 559          *  arranged by their group names
 560          */
 561         mw.rcfilters.dm.FiltersViewModel.prototype.findMatches = function ( query ) {
 562                 var i,
 563                         groupTitle,
 564                         result = {},
 565                         items = this.getItems();
 566
 567                 // Normalize so we can search strings regardless of case
 568                 query = query.toLowerCase();
 569
 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 ] );
 575                         }
 576                 }
 577
 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();
 582                                 if (
 583                                         items[ i ].getLabel().toLowerCase().indexOf( query ) > -1 ||
 584                                         items[ i ].getDescription().toLowerCase().indexOf( query ) > -1 ||
 585                                         groupTitle.toLowerCase().indexOf( query ) > -1
 586                                 ) {
 587                                         result[ items[ i ].getGroupName() ] = result[ items[ i ].getGroupName() ] || [];
 588                                         result[ items[ i ].getGroupName() ].push( items[ i ] );
 589                                 }
 590                         }
 591                 }
 592
 593                 return result;
 594         };
 595
 596 }( mediaWiki, jQuery ) );