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                 this.$overlay = config.$overlay || this.$element;
  29                 this.groups = {};
  30                 this.selected = null;
  31
  32                 this.highlightButton = new OO.ui.ButtonWidget( {
  33                         label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
  34                         classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
  35                 } );
  36
  37                 this.$label.append( this.highlightButton.$element );
  38
  39                 this.noResultsLabel = new OO.ui.LabelWidget( {
  40                         label: mw.msg( 'rcfilters-filterlist-noresults' ),
  41                         classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
  42                 } );
  43
  44                 // Events
  45                 this.highlightButton.connect( this, { click: 'onHighlightButtonClick' } );
  46                 this.model.connect( this, {
  47                         initialize: 'onModelInitialize',
  48                         highlightChange: 'onHighlightChange'
  49                 } );
  50
  51                 // Initialize
  52                 this.showNoResultsMessage( false );
  53                 this.$element
  54                         .addClass( 'mw-rcfilters-ui-filtersListWidget' )
  55                         .append(
  56                                 this.$label,
  57                                 this.$group
  58                                         .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
  59                                 this.noResultsLabel.$element
  60                         );
  61         };
  62
  63         /* Initialization */
  64
  65         OO.inheritClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.Widget );
  66         OO.mixinClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.mixin.GroupWidget );
  67         OO.mixinClass( mw.rcfilters.ui.FiltersListWidget, OO.ui.mixin.LabelElement );
  68
  69         /* Methods */
  70
  71         /**
  72          * Respond to initialize event from the model
  73          */
  74         mw.rcfilters.ui.FiltersListWidget.prototype.onModelInitialize = function () {
  75                 var widget = this;
  76
  77                 // Reset
  78                 this.clearItems();
  79                 this.groups = {};
  80
  81                 this.addItems(
  82                         Object.keys( this.model.getFilterGroups() ).map( function ( groupName ) {
  83                                 var groupWidget = new mw.rcfilters.ui.FilterGroupWidget(
  84                                         widget.controller,
  85                                         widget.model.getGroup( groupName ),
  86                                         {
  87                                                 $overlay: widget.$overlay
  88                                         }
  89                                 );
  90
  91                                 widget.groups[ groupName ] = groupWidget;
  92                                 return groupWidget;
  93                         } )
  94                 );
  95         };
  96
  97         mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
  98                 this.highlightButton.setActive( highlightEnabled );
  99         };
 100
 101         /**
 102          * Respond to highlight button click
 103          */
 104         mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightButtonClick = function () {
 105                 this.controller.toggleHighlight();
 106         };
 107
 108         /**
 109          * Find the filter item widget that corresponds to the item name
 110          *
 111          * @param {string} itemName Filter name
 112          * @return {mw.rcfilters.ui.FilterItemWidget} Filter widget
 113          */
 114         mw.rcfilters.ui.FiltersListWidget.prototype.getItemWidget = function ( itemName ) {
 115                 var filterItem = this.model.getItemByName( itemName ),
 116                         // Find the group
 117                         groupWidget = this.groups[ filterItem.getGroupName() ];
 118
 119                 // Find the item inside the group
 120                 return groupWidget.getItemWidget( itemName );
 121         };
 122
 123         /**
 124          * Mark an item widget as selected
 125          *
 126          * @param {string} itemName Filter name
 127          */
 128         mw.rcfilters.ui.FiltersListWidget.prototype.select = function ( itemName ) {
 129                 var filterWidget;
 130
 131                 if ( this.selected !== itemName ) {
 132                         // Unselect previous
 133                         if ( this.selected ) {
 134                                 filterWidget = this.getItemWidget( this.selected );
 135                                 filterWidget.toggleSelected( false );
 136                         }
 137
 138                         // Select new one
 139                         this.selected = itemName;
 140                         if ( this.selected ) {
 141                                 filterWidget = this.getItemWidget( this.selected );
 142                                 filterWidget.toggleSelected( true );
 143                         }
 144                 }
 145         };
 146
 147         /**
 148          * Reset selection and remove selected states from all items
 149          */
 150         mw.rcfilters.ui.FiltersListWidget.prototype.resetSelection = function () {
 151                 if ( this.selected !== null ) {
 152                         this.selected = null;
 153                         this.getItems().forEach( function ( groupWidget ) {
 154                                 groupWidget.getItems().forEach( function ( filterItemWidget ) {
 155                                         filterItemWidget.toggleSelected( false );
 156                                 } );
 157                         } );
 158                 }
 159         };
 160
 161         /**
 162          * Switch between showing the 'no results' message for filtering results or the result list.
 163          *
 164          * @param {boolean} showNoResults Show no results message
 165          */
 166         mw.rcfilters.ui.FiltersListWidget.prototype.showNoResultsMessage = function ( showNoResults ) {
 167                 this.noResultsLabel.toggle( !!showNoResults );
 168                 this.$group.toggleClass( 'oo-ui-element-hidden', !!showNoResults );
 169         };
 170
 171         /**
 172          * Show only the items matching with the models in the given list
 173          *
 174          * @param {Object} groupItems An object of items to show
 175          *  arranged by their group names
 176          */
 177         mw.rcfilters.ui.FiltersListWidget.prototype.filter = function ( groupItems ) {
 178                 var i, j, groupName, itemWidgets,
 179                         groupWidgets = this.getItems(),
 180                         hasItemWithName = function ( itemArr, name ) {
 181                                 return !!itemArr.filter( function ( item ) {
 182                                         return item.getName() === name;
 183                                 } ).length;
 184                         };
 185
 186                 if ( $.isEmptyObject( groupItems ) ) {
 187                         // No results. Hide everything, show only 'no results'
 188                         // message
 189                         this.showNoResultsMessage( true );
 190                         return;
 191                 }
 192
 193                 this.showNoResultsMessage( false );
 194                 for ( i = 0; i < groupWidgets.length; i++ ) {
 195                         groupName = groupWidgets[ i ].getName();
 196
 197                         // If this group widget is in the filtered results,
 198                         // show it - otherwise, hide it
 199                         groupWidgets[ i ].toggle( !!groupItems[ groupName ] );
 200
 201                         if ( !groupItems[ groupName ] ) {
 202                                 // Continue to next group
 203                                 continue;
 204                         }
 205
 206                         // We have items to show
 207                         itemWidgets = groupWidgets[ i ].getItems();
 208                         for ( j = 0; j < itemWidgets.length; j++ ) {
 209                                 // Only show items that are in the filtered list
 210                                 itemWidgets[ j ].toggle(
 211                                         hasItemWithName( groupItems[ groupName ], itemWidgets[ j ].getName() )
 212                                 );
 213                         }
 214                 }
 215         };
 216 }( mediaWiki, jQuery ) );