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