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

   1 ( function ( mw ) {
   2         /**
   3          * A floating menu widget for the filter list
   4          *
   5          * @extends OO.ui.MenuSelectWidget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller Controller
   9          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  10          * @param {Object} [config] Configuration object
  11          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  12          * @cfg {Object[]} [footers] An array of objects defining the footers for
  13          *  this menu, with a definition whether they appear per specific views.
  14          *  The expected structure is:
  15          *  [
  16          *     {
  17          *        name: {string} A unique name for the footer object
  18          *        $element: {jQuery} A jQuery object for the content of the footer
  19          *        views: {string[]} Optional. An array stating which views this footer is
  20          *               active on. Use null or omit to display this on all views.
  21          *     }
  22          *  ]
  23          */
  24         mw.rcfilters.ui.MenuSelectWidget = function MwRcfiltersUiMenuSelectWidget( controller, model, config ) {
  25                 var header;
  26
  27                 config = config || {};
  28
  29                 this.controller = controller;
  30                 this.model = model;
  31                 this.currentView = '';
  32                 this.views = {};
  33
  34                 this.inputValue = '';
  35                 this.$overlay = config.$overlay || this.$element;
  36                 this.$body = $( '<div>' )
  37                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
  38                 this.footers = [];
  39
  40                 // Parent
  41                 mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
  42                         $autoCloseIgnore: this.$overlay,
  43                         width: 650
  44                 }, config ) );
  45                 this.setGroupElement(
  46                         $( '<div>' )
  47                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
  48                 );
  49                 this.setClippableElement( this.$body );
  50                 this.setClippableContainer( this.$element );
  51
  52                 header = new mw.rcfilters.ui.FilterMenuHeaderWidget(
  53                         this.controller,
  54                         this.model,
  55                         {
  56                                 $overlay: this.$overlay
  57                         }
  58                 );
  59
  60                 this.noResults = new OO.ui.LabelWidget( {
  61                         label: mw.msg( 'rcfilters-filterlist-noresults' ),
  62                         classes: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
  63                 } );
  64
  65                 // Events
  66                 this.model.connect( this, {
  67                         update: 'onModelUpdate',
  68                         initialize: 'onModelInitialize'
  69                 } );
  70
  71                 // Initialization
  72                 this.$element
  73                         .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
  74                         .append( header.$element )
  75                         .append(
  76                                 this.$body
  77                                         .append( this.$group, this.noResults.$element )
  78                         );
  79
  80                 // Append all footers; we will control their visibility
  81                 // based on view
  82                 config.footers = config.footers || [];
  83                 config.footers.forEach( function ( footerData ) {
  84                         var adjustedData = {
  85                                 // Wrap the element with our own footer wrapper
  86                                 $element: $( '<div>' )
  87                                         .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
  88                                         .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer-' + footerData.name )
  89                                         .append( footerData.$element ),
  90                                 views: footerData.views
  91                         };
  92
  93                         this.footers.push( adjustedData );
  94                         this.$element.append( adjustedData.$element );
  95                 }.bind( this ) );
  96
  97                 // Switch to the correct view
  98                 this.switchView( this.model.getCurrentView() );
  99         };
 100
 101         /* Initialize */
 102
 103         OO.inheritClass( mw.rcfilters.ui.MenuSelectWidget, OO.ui.MenuSelectWidget );
 104
 105         /* Events */
 106
 107         /**
 108          * @event itemVisibilityChange
 109          *
 110          * Item visibility has changed
 111          */
 112
 113         /* Methods */
 114
 115         /**
 116          * Respond to model update event
 117          */
 118         mw.rcfilters.ui.MenuSelectWidget.prototype.onModelUpdate = function () {
 119                 // Change view
 120                 this.switchView( this.model.getCurrentView() );
 121         };
 122
 123         /**
 124          * Respond to model initialize event. Populate the menu from the model
 125          */
 126         mw.rcfilters.ui.MenuSelectWidget.prototype.onModelInitialize = function () {
 127                 var widget = this,
 128                         viewGroupCount = {},
 129                         groups = this.model.getFilterGroups();
 130
 131                 // Reset
 132                 this.clearItems();
 133
 134                 // Count groups per view
 135                 $.each( groups, function ( groupName, groupModel ) {
 136                         viewGroupCount[ groupModel.getView() ] = viewGroupCount[ groupModel.getView() ] || 0;
 137                         viewGroupCount[ groupModel.getView() ]++;
 138                 } );
 139
 140                 $.each( groups, function ( groupName, groupModel ) {
 141                         var currentItems = [],
 142                                 view = groupModel.getView();
 143
 144                         if ( viewGroupCount[ view ] > 1 ) {
 145                                 // Only add a section header if there is more than
 146                                 // one group
 147                                 currentItems.push(
 148                                         // Group section
 149                                         new mw.rcfilters.ui.FilterMenuSectionOptionWidget(
 150                                                 widget.controller,
 151                                                 groupModel,
 152                                                 {
 153                                                         $overlay: widget.$overlay
 154                                                 }
 155                                         )
 156                                 );
 157                         }
 158
 159                         // Add items
 160                         widget.model.getGroupFilters( groupName ).forEach( function ( filterItem ) {
 161                                 currentItems.push(
 162                                         new mw.rcfilters.ui.FilterMenuOptionWidget(
 163                                                 widget.controller,
 164                                                 filterItem,
 165                                                 {
 166                                                         $overlay: widget.$overlay
 167                                                 }
 168                                         )
 169                                 );
 170                         } );
 171
 172                         // Cache the items per view, so we can switch between them
 173                         // without rebuilding the widgets each time
 174                         widget.views[ view ] = widget.views[ view ] || [];
 175                         widget.views[ view ] = widget.views[ view ].concat( currentItems );
 176                 } );
 177
 178                 this.switchView( this.model.getCurrentView() );
 179         };
 180
 181         /**
 182          * Switch view
 183          *
 184          * @param {string} [viewName] View name. If not given, default is used.
 185          */
 186         mw.rcfilters.ui.MenuSelectWidget.prototype.switchView = function ( viewName ) {
 187                 viewName = viewName || 'default';
 188
 189                 if ( this.views[ viewName ] && this.currentView !== viewName ) {
 190                         this.clearItems();
 191                         this.addItems( this.views[ viewName ] );
 192                         this.updateFooterVisibility( viewName );
 193
 194                         this.$element
 195                                 .data( 'view', viewName )
 196                                 .removeClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + this.currentView )
 197                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + viewName );
 198
 199                         this.currentView = viewName;
 200                         this.clip();
 201                 }
 202         };
 203
 204         /**
 205          * Go over the available footers and decide which should be visible
 206          * for this view
 207          *
 208          * @param {string} [currentView] Current view
 209          */
 210         mw.rcfilters.ui.MenuSelectWidget.prototype.updateFooterVisibility = function ( currentView ) {
 211                 currentView = currentView || this.model.getCurrentView();
 212
 213                 this.footers.forEach( function ( data ) {
 214                         data.$element.toggle(
 215                                 // This footer should only be shown if it is configured
 216                                 // for all views or for this specific view
 217                                 !data.views || data.views.length === 0 || data.views.indexOf( currentView ) > -1
 218                         );
 219                 } );
 220         };
 221
 222         /**
 223          * @fires itemVisibilityChange
 224          * @inheritdoc
 225          */
 226         mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
 227                 var i,
 228                         itemWasSelected = false,
 229                         inputVal = this.$input.val(),
 230                         items = this.getItems();
 231
 232                 // Since the method hides/shows items, we don't want to
 233                 // call it unless the input actually changed
 234                 if ( this.inputValue !== inputVal ) {
 235                         // Parent method
 236                         mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
 237
 238                         // Select the first item in the list
 239                         for ( i = 0; i < items.length; i++ ) {
 240                                 if (
 241                                         !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
 242                                         items[ i ].isVisible()
 243                                 ) {
 244                                         itemWasSelected = true;
 245                                         this.selectItem( items[ i ] );
 246                                         break;
 247                                 }
 248                         }
 249
 250                         if ( !itemWasSelected ) {
 251                                 this.selectItem( null );
 252                         }
 253
 254                         // Cache value
 255                         this.inputValue = inputVal;
 256
 257                         this.emit( 'itemVisibilityChange' );
 258                 }
 259         };
 260
 261         /**
 262          * Get the option widget that matches the model given
 263          *
 264          * @param {mw.rcfilters.dm.ItemModel} model Item model
 265          * @return {mw.rcfilters.ui.ItemMenuOptionWidget} Option widget
 266          */
 267         mw.rcfilters.ui.MenuSelectWidget.prototype.getItemFromModel = function ( model ) {
 268                 return this.views[ model.getGroupModel().getView() ].filter( function ( item ) {
 269                         return item.getName() === model.getName();
 270                 } )[ 0 ];
 271         };
 272
 273         /**
 274          * Override the item matcher to use the model's match process
 275          *
 276          * @inheritdoc
 277          */
 278         mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
 279                 var results = this.model.findMatches( s, true );
 280
 281                 return function ( item ) {
 282                         return results.indexOf( item.getModel() ) > -1;
 283                 };
 284         };
 285
 286         /**
 287          * @inheritdoc
 288          */
 289         mw.rcfilters.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) {
 290                 var nextItem,
 291                         currentItem = this.getHighlightedItem() || this.getSelectedItem();
 292
 293                 // Call parent
 294                 mw.rcfilters.ui.MenuSelectWidget.parent.prototype.onKeyDown.call( this, e );
 295
 296                 // We want to select the item on arrow movement
 297                 // rather than just highlight it, like the menu
 298                 // does by default
 299                 if ( !this.isDisabled() && this.isVisible() ) {
 300                         switch ( e.keyCode ) {
 301                                 case OO.ui.Keys.UP:
 302                                 case OO.ui.Keys.LEFT:
 303                                         // Get the next item
 304                                         nextItem = this.getRelativeSelectableItem( currentItem, -1 );
 305                                         break;
 306                                 case OO.ui.Keys.DOWN:
 307                                 case OO.ui.Keys.RIGHT:
 308                                         // Get the next item
 309                                         nextItem = this.getRelativeSelectableItem( currentItem, 1 );
 310                                         break;
 311                         }
 312
 313                         nextItem = nextItem && nextItem.constructor.static.selectable ?
 314                                 nextItem : null;
 315
 316                         // Select the next item
 317                         this.selectItem( nextItem );
 318                 }
 319         };
 320
 321         /**
 322          * Scroll to the top of the menu
 323          */
 324         mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () {
 325                 this.$body.scrollTop( 0 );
 326         };
 327 }( mediaWiki ) );