resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js

   1 ( function ( mw, $ ) {
   2         /**
   3          * List displaying all filter groups
   4          *
   5          * @extends OO.ui.Widget
   6          * @mixins OO.ui.mixin.GroupWidget
   7          * @mixins OO.ui.mixin.LabelElement
   8          *
   9          * @constructor
  10          * @param {mw.rcfilters.Controller} controller Controller
  11          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  12          * @param {Object} config Configuration object
  13          */
  14         mw.rcfilters.ui.FiltersListWidget = function MwRcfiltersUiFiltersListWidget( controller, model, config ) {
  15                 config = config || {};
  16
  17                 // Parent
  18                 mw.rcfilters.ui.FiltersListWidget.parent.call( this, config );
  19                 // Mixin constructors
  20                 OO.ui.mixin.GroupWidget.call( this, config );
  21                 OO.ui.mixin.LabelElement.call( this, $.extend( {}, config, {
  22                         $label: $( '<div>' )
  23                                 .addClass( 'mw-rcfilters-ui-filtersListWidget-title' )
  24                 } ) );
  25
  26                 this.controller = controller;
  27                 this.model = model;
  28
  29                 this.noResultsLabel = new OO.ui.LabelWidget( {
  30                         label: mw.msg( 'rcfilters-filterlist-noresults' ),
  31                         classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
  32                 } );
  33
  34                 // Events
  35                 this.model.connect( this, {
  36                         initialize: 'onModelInitialize'
  37                 } );
  38
  39                 // Initialize
  40                 this.showNoResultsMessage( false );
  41                 this.$element
  42                         .addClass( 'mw-rcfilters-ui-filtersListWidget' )
  43                         .append(
  44                                 this.$label,
  45                                 this.$group
  46                                         .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
  47                                 this.noResultsLabel.$element
  48                         );
  49         };
  50
  51         /* Initialization */
  52
  53         OO.inheritClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.Widget );
  54         OO.mixinClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.mixin.GroupWidget );
  55         OO.mixinClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.mixin.LabelElement );
  56
  57         /* Methods */
  58
  59         /**
  60          * Respond to initialize event from the model
  61          */
  62         mw.rcfilters.ui.FiltersListWidget.prototype.onModelInitialize = function () {
  63                 var widget = this;
  64
  65                 // Reset
  66                 this.clearItems();
  67
  68                 this.addItems(
  69                         Object.keys( this.model.getFilterGroups() ).map( function ( groupName ) {
  70                                 return new mw.rcfilters.ui.FilterGroupWidget(
  71                                         widget.controller,
  72                                         widget.model.getGroup( groupName )
  73                                 );
  74                         } )
  75                 );
  76         };
  77
  78         /**
  79          * Switch between showing the 'no results' message for filtering results or the result list.
  80          *
  81          * @param {boolean} showNoResults Show no results message
  82          */
  83         mw.rcfilters.ui.FiltersListWidget.prototype.showNoResultsMessage = function ( showNoResults ) {
  84                 this.noResultsLabel.toggle( !!showNoResults );
  85                 this.$group.toggleClass( 'oo-ui-element-hidden', !!showNoResults );
  86         };
  87
  88         /**
  89          * Show only the items matching with the models in the given list
  90          *
  91          * @param {Object} groupItems An object of items to show
  92          *  arranged by their group names
  93          */
  94         mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
  95                 var i, j, groupName, itemWidgets,
  96                         groupWidgets = this.getItems(),
  97                         hasItemWithName = function ( itemArr, name ) {
  98                                 return !!itemArr.filter( function ( item ) {
  99                                         return item.getName() === name;
 100                                 } ).length;
 101                         };
 102
 103                 if ( $.isEmptyObject( groupItems ) ) {
 104                         // No results. Hide everything, show only 'no results'
 105                         // message
 106                         this.showNoResultsMessage( true );
 107                         return;
 108                 }
 109
 110                 this.showNoResultsMessage( false );
 111                 for ( i = 0; i < groupWidgets.length; i++ ) {
 112                         groupName = groupWidgets[ i ].getName();
 113
 114                         // If this group widget is in the filtered results,
 115                         // show it - otherwise, hide it
 116                         groupWidgets[ i ].toggle( !!groupItems[ groupName ] );
 117
 118                         if ( !groupItems[ groupName ] ) {
 119                                 // Continue to next group
 120                                 continue;
 121                         }
 122
 123                         // We have items to show
 124                         itemWidgets = groupWidgets[ i ].getItems();
 125                         for ( j = 0; j < itemWidgets.length; j++ ) {
 126                                 // Only show items that are in the filtered list
 127                                 itemWidgets[ j ].toggle(
 128                                         hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() )
 129                                 );
 130                         }
 131                 }
 132         };
 133 }( mediaWiki, jQuery ) );