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