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 i, group, groupWidget,
  64                         itemWidgets = [],
  65                         groupWidgets = [],
  66                         groups = this.model.getFilterGroups();
  67
  68                 // Reset
  69                 this.clearItems();
  70
  71                 for ( group in groups ) {
  72                         groupWidget = new mw.rcfilters.ui.FilterGroupWidget( group, {
  73                                 label: groups[ group ].title
  74                         } );
  75                         groupWidgets.push( groupWidget );
  76
  77                         itemWidgets = [];
  78                         if ( groups[ group ].filters ) {
  79                                 for ( i = 0; i < groups[ group ].filters.length; i++ ) {
  80                                         itemWidgets.push(
  81                                                 new mw.rcfilters.ui.FilterItemWidget(
  82                                                         this.controller,
  83                                                         groups[ group ].filters[ i ],
  84                                                         {
  85                                                                 label: groups[ group ].filters[ i ].getLabel(),
  86                                                                 description: groups[ group ].filters[ i ].getDescription()
  87                                                         }
  88                                                 )
  89                                         );
  90                                 }
  91
  92                                 groupWidget.addItems( itemWidgets );
  93                         }
  94                 }
  95
  96                 this.addItems( groupWidgets );
  97         };
  98
  99         /**
 100          * Switch between showing the 'no results' message for filtering results or the result list.
 101          *
 102          * @param {boolean} showNoResults Show no results message
 103          */
 104         mw.rcfilters.ui.FiltersListWidget.prototype.showNoResultsMessage = function ( showNoResults ) {
 105                 this.noResultsLabel.toggle( !!showNoResults );
 106                 this.$group.toggleClass( 'oo-ui-element-hidden', !!showNoResults );
 107         };
 108
 109         /**
 110          * Show only the items matching with the models in the given list
 111          *
 112          * @param {Object} groupItems An object of items to show
 113          *  arranged by their group names
 114          */
 115         mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
 116                 var i, j, groupName, itemWidgets,
 117                         groupWidgets = this.getItems(),
 118                         hasItemWithName = function ( itemArr, name ) {
 119                                 return !!itemArr.filter( function ( item ) {
 120                                         return item.getName() === name;
 121                                 } ).length;
 122                         };
 123
 124                 if ( $.isEmptyObject( groupItems ) ) {
 125                         // No results. Hide everything, show only 'no results'
 126                         // message
 127                         this.showNoResultsMessage( true );
 128                         return;
 129                 }
 130
 131                 this.showNoResultsMessage( false );
 132                 for ( i = 0; i < groupWidgets.length; i++ ) {
 133                         groupName = groupWidgets[ i ].getName();
 134
 135                         // If this group widget is in the filtered results,
 136                         // show it - otherwise, hide it
 137                         groupWidgets[ i ].toggle( !!groupItems[ groupName ] );
 138
 139                         if ( !groupItems[ groupName ] ) {
 140                                 // Continue to next group
 141                                 continue;
 142                         }
 143
 144                         // We have items to show
 145                         itemWidgets = groupWidgets[ i ].getItems();
 146                         for ( j = 0; j < itemWidgets.length; j++ ) {
 147                                 // Only show items that are in the filtered list
 148                                 itemWidgets[ j ].toggle(
 149                                         hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() )
 150                                 );
 151                         }
 152                 }
 153         };
 154 }( mediaWiki, jQuery ) );