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                 this.userSelecting = false;
  34
  35                 this.menuInitialized = false;
  36                 this.inputValue = '';
  37                 this.$overlay = config.$overlay || this.$element;
  38                 this.$body = $( '<div>' ).addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
  39                 this.footers = [];
  40
  41                 // Parent
  42                 mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
  43                         $autoCloseIgnore: this.$overlay,
  44                         width: 650
  45                 }, config ) );
  46                 this.setGroupElement(
  47                         $( '<div>' )
  48                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
  49                 );
  50                 this.setClippableElement( this.$body );
  51                 this.setClippableContainer( this.$element );
  52
  53                 header = new mw.rcfilters.ui.FilterMenuHeaderWidget(
  54                         this.controller,
  55                         this.model,
  56                         {
  57                                 $overlay: this.$overlay
  58                         }
  59                 );
  60
  61                 this.noResults = new OO.ui.LabelWidget( {
  62                         label: mw.msg( 'rcfilters-filterlist-noresults' ),
  63                         classes: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
  64                 } );
  65
  66                 // Events
  67                 this.model.connect( this, {
  68                         update: 'onModelUpdate',
  69                         initialize: 'onModelInitialize'
  70                 } );
  71
  72                 // Initialization
  73                 this.$element
  74                         .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
  75                         .append( header.$element )
  76                         .append(
  77                                 this.$body
  78                                         .append( this.$group, this.noResults.$element )
  79                         );
  80
  81                 // Append all footers; we will control their visibility
  82                 // based on view
  83                 config.footers = config.footers || [];
  84                 config.footers.forEach( function ( footerData ) {
  85                         var isSticky = footerData.sticky === undefined ? true : !!footerData.sticky,
  86                                 adjustedData = {
  87                                         // Wrap the element with our own footer wrapper
  88                                         $element: $( '<div>' )
  89                                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
  90                                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer-' + footerData.name )
  91                                                 .append( footerData.$element ),
  92                                         views: footerData.views
  93                                 };
  94
  95                         if ( !footerData.disabled ) {
  96                                 this.footers.push( adjustedData );
  97
  98                                 if ( isSticky ) {
  99                                         this.$element.append( adjustedData.$element );
 100                                 } else {
 101                                         this.$body.append( adjustedData.$element );
 102                                 }
 103                         }
 104                 }.bind( this ) );
 105
 106                 // Switch to the correct view
 107                 this.switchView( this.model.getCurrentView() );
 108         };
 109
 110         /* Initialize */
 111
 112         OO.inheritClass( mw.rcfilters.ui.MenuSelectWidget, OO.ui.MenuSelectWidget );
 113
 114         /* Events */
 115
 116         /**
 117          * @event itemVisibilityChange
 118          *
 119          * Item visibility has changed
 120          */
 121
 122         /* Methods */
 123
 124         /**
 125          * Respond to model update event
 126          */
 127         mw.rcfilters.ui.MenuSelectWidget.prototype.onModelUpdate = function () {
 128                 // Change view
 129                 this.switchView( this.model.getCurrentView() );
 130         };
 131
 132         /**
 133          * @inheritdoc
 134          */
 135         mw.rcfilters.ui.MenuSelectWidget.prototype.toggle = function ( show ) {
 136                 this.lazyMenuCreation();
 137                 mw.rcfilters.ui.MenuSelectWidget.parent.prototype.toggle.call( this, show );
 138                 // Always open this menu downwards. FilterTagMultiselectWidget scrolls it into view.
 139                 this.setVerticalPosition( 'below' );
 140         };
 141
 142         /**
 143          * lazy creation of the menu
 144          */
 145         mw.rcfilters.ui.MenuSelectWidget.prototype.lazyMenuCreation = function () {
 146                 var widget = this,
 147                         viewGroupCount = {},
 148                         groups = this.model.getFilterGroups();
 149
 150                 if ( this.menuInitialized ) {
 151                         return;
 152                 }
 153
 154                 this.menuInitialized = true;
 155                 // Reset
 156                 this.clearItems();
 157
 158                 // Count groups per view
 159                 $.each( groups, function ( groupName, groupModel ) {
 160                         if ( !groupModel.isHidden() ) {
 161                                 viewGroupCount[ groupModel.getView() ] = viewGroupCount[ groupModel.getView() ] || 0;
 162                                 viewGroupCount[ groupModel.getView() ]++;
 163                         }
 164                 } );
 165
 166                 $.each( groups, function ( groupName, groupModel ) {
 167                         var currentItems = [],
 168                                 view = groupModel.getView();
 169
 170                         if ( !groupModel.isHidden() ) {
 171                                 if ( viewGroupCount[ view ] > 1 ) {
 172                                         // Only add a section header if there is more than
 173                                         // one group
 174                                         currentItems.push(
 175                                                 // Group section
 176                                                 new mw.rcfilters.ui.FilterMenuSectionOptionWidget(
 177                                                         widget.controller,
 178                                                         groupModel,
 179                                                         {
 180                                                                 $overlay: widget.$overlay
 181                                                         }
 182                                                 )
 183                                         );
 184                                 }
 185
 186                                 // Add items
 187                                 widget.model.getGroupFilters( groupName ).forEach( function ( filterItem ) {
 188                                         currentItems.push(
 189                                                 new mw.rcfilters.ui.FilterMenuOptionWidget(
 190                                                         widget.controller,
 191                                                         widget.model,
 192                                                         widget.model.getInvertModel(),
 193                                                         filterItem,
 194                                                         {
 195                                                                 $overlay: widget.$overlay
 196                                                         }
 197                                                 )
 198                                         );
 199                                 } );
 200
 201                                 // Cache the items per view, so we can switch between them
 202                                 // without rebuilding the widgets each time
 203                                 widget.views[ view ] = widget.views[ view ] || [];
 204                                 widget.views[ view ] = widget.views[ view ].concat( currentItems );
 205                         }
 206                 } );
 207
 208                 this.switchView( this.model.getCurrentView() );
 209         };
 210
 211         /**
 212          * Respond to model initialize event. Populate the menu from the model
 213          */
 214         mw.rcfilters.ui.MenuSelectWidget.prototype.onModelInitialize = function () {
 215                 this.menuInitialized = false;
 216         };
 217
 218         /**
 219          * Switch view
 220          *
 221          * @param {string} [viewName] View name. If not given, default is used.
 222          */
 223         mw.rcfilters.ui.MenuSelectWidget.prototype.switchView = function ( viewName ) {
 224                 viewName = viewName || 'default';
 225
 226                 if ( this.views[ viewName ] && this.currentView !== viewName ) {
 227                         this.clearItems();
 228                         this.addItems( this.views[ viewName ] );
 229                         this.updateFooterVisibility( viewName );
 230
 231                         this.$element
 232                                 .data( 'view', viewName )
 233                                 .removeClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + this.currentView )
 234                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-view-' + viewName );
 235
 236                         this.currentView = viewName;
 237                         this.scrollToTop();
 238                         this.clip();
 239                 }
 240         };
 241
 242         /**
 243          * Go over the available footers and decide which should be visible
 244          * for this view
 245          *
 246          * @param {string} [currentView] Current view
 247          */
 248         mw.rcfilters.ui.MenuSelectWidget.prototype.updateFooterVisibility = function ( currentView ) {
 249                 currentView = currentView || this.model.getCurrentView();
 250
 251                 this.footers.forEach( function ( data ) {
 252                         data.$element.toggle(
 253                                 // This footer should only be shown if it is configured
 254                                 // for all views or for this specific view
 255                                 !data.views || data.views.length === 0 || data.views.indexOf( currentView ) > -1
 256                         );
 257                 } );
 258         };
 259
 260         /**
 261          * @fires itemVisibilityChange
 262          * @inheritdoc
 263          */
 264         mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
 265                 var i,
 266                         itemWasSelected = false,
 267                         inputVal = this.$input.val(),
 268                         items = this.getItems();
 269
 270                 // Since the method hides/shows items, we don't want to
 271                 // call it unless the input actually changed
 272                 if (
 273                         !this.userSelecting &&
 274                         this.inputValue !== inputVal
 275                 ) {
 276                         // Parent method
 277                         mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
 278
 279                         // Select the first item in the list
 280                         for ( i = 0; i < items.length; i++ ) {
 281                                 if (
 282                                         !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
 283                                         items[ i ].isVisible()
 284                                 ) {
 285                                         itemWasSelected = true;
 286                                         this.selectItem( items[ i ] );
 287                                         break;
 288                                 }
 289                         }
 290
 291                         if ( !itemWasSelected ) {
 292                                 this.selectItem( null );
 293                         }
 294
 295                         // Cache value
 296                         this.inputValue = inputVal;
 297
 298                         this.emit( 'itemVisibilityChange' );
 299                 }
 300
 301                 this.noResults.toggle( !this.getItems().some( function ( item ) {
 302                         return item.isVisible();
 303                 } ) );
 304         };
 305
 306         /**
 307          * Get the option widget that matches the model given
 308          *
 309          * @param {mw.rcfilters.dm.ItemModel} model Item model
 310          * @return {mw.rcfilters.ui.ItemMenuOptionWidget} Option widget
 311          */
 312         mw.rcfilters.ui.MenuSelectWidget.prototype.getItemFromModel = function ( model ) {
 313                 this.lazyMenuCreation();
 314                 return this.views[ model.getGroupModel().getView() ].filter( function ( item ) {
 315                         return item.getName() === model.getName();
 316                 } )[ 0 ];
 317         };
 318
 319         /**
 320          * Override the item matcher to use the model's match process
 321          *
 322          * @inheritdoc
 323          */
 324         mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
 325                 var results = this.model.findMatches( s, true );
 326
 327                 return function ( item ) {
 328                         return results.indexOf( item.getModel() ) > -1;
 329                 };
 330         };
 331
 332         /**
 333          * @inheritdoc
 334          */
 335         mw.rcfilters.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) {
 336                 var nextItem,
 337                         currentItem = this.findHighlightedItem() || this.getSelectedItem();
 338
 339                 // Call parent
 340                 mw.rcfilters.ui.MenuSelectWidget.parent.prototype.onKeyDown.call( this, e );
 341
 342                 // We want to select the item on arrow movement
 343                 // rather than just highlight it, like the menu
 344                 // does by default
 345                 if ( !this.isDisabled() && this.isVisible() ) {
 346                         switch ( e.keyCode ) {
 347                                 case OO.ui.Keys.UP:
 348                                 case OO.ui.Keys.LEFT:
 349                                         // Get the next item
 350                                         nextItem = this.findRelativeSelectableItem( currentItem, -1 );
 351                                         break;
 352                                 case OO.ui.Keys.DOWN:
 353                                 case OO.ui.Keys.RIGHT:
 354                                         // Get the next item
 355                                         nextItem = this.findRelativeSelectableItem( currentItem, 1 );
 356                                         break;
 357                         }
 358
 359                         nextItem = nextItem && nextItem.constructor.static.selectable ?
 360                                 nextItem : null;
 361
 362                         // Select the next item
 363                         this.selectItem( nextItem );
 364                 }
 365         };
 366
 367         /**
 368          * Scroll to the top of the menu
 369          */
 370         mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () {
 371                 this.$body.scrollTop( 0 );
 372         };
 373
 374         /**
 375          * Set whether the user is currently selecting an item.
 376          * This is important when the user selects an item that is in between
 377          * different views, and makes sure we do not re-select a different
 378          * item (like the item on top) when this is happening.
 379          *
 380          * @param {boolean} isSelecting User is selecting
 381          */
 382         mw.rcfilters.ui.MenuSelectWidget.prototype.setUserSelecting = function ( isSelecting ) {
 383                 this.userSelecting = !!isSelecting;
 384         };
 385 }( mediaWiki ) );