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 {jQuery} [$footer] An optional footer for the menu
  13          */
  14         mw.rcfilters.ui.MenuSelectWidget = function MwRcfiltersUiMenuSelectWidget( controller, model, config ) {
  15                 var header;
  16
  17                 config = config || {};
  18
  19                 this.controller = controller;
  20                 this.model = model;
  21
  22                 this.inputValue = '';
  23                 this.$overlay = config.$overlay || this.$element;
  24                 this.$footer = config.$footer;
  25                 this.$body = $( '<div>' )
  26                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-body' );
  27
  28                 // Parent
  29                 mw.rcfilters.ui.MenuSelectWidget.parent.call( this, $.extend( {
  30                         $autoCloseIgnore: this.$overlay,
  31                         width: 650
  32                 }, config ) );
  33                 this.setGroupElement(
  34                         $( '<div>' )
  35                                 .addClass( 'mw-rcfilters-ui-menuSelectWidget-group' )
  36                 );
  37                 this.setClippableElement( this.$body );
  38                 this.setClippableContainer( this.$element );
  39
  40                 header = new mw.rcfilters.ui.FilterMenuHeaderWidget(
  41                         this.controller,
  42                         this.model,
  43                         {
  44                                 $overlay: this.$overlay
  45                         }
  46                 );
  47
  48                 this.noResults = new OO.ui.LabelWidget( {
  49                         label: mw.msg( 'rcfilters-filterlist-noresults' ),
  50                         classes: [ 'mw-rcfilters-ui-menuSelectWidget-noresults' ]
  51                 } );
  52
  53                 this.$element
  54                         .addClass( 'mw-rcfilters-ui-menuSelectWidget' )
  55                         .append( header.$element )
  56                         .append(
  57                                 this.$body
  58                                         .append( this.$group, this.noResults.$element )
  59                         );
  60
  61                 if ( this.$footer ) {
  62                         this.$element.append(
  63                                 this.$footer
  64                                         .addClass( 'mw-rcfilters-ui-menuSelectWidget-footer' )
  65                         );
  66                 }
  67         };
  68
  69         /* Initialize */
  70
  71         OO.inheritClass( mw.rcfilters.ui.MenuSelectWidget, OO.ui.MenuSelectWidget );
  72
  73         /* Events */
  74
  75         /**
  76          * @event itemVisibilityChange
  77          *
  78          * Item visibility has changed
  79          */
  80
  81         /* Methods */
  82
  83         /**
  84          * @fires itemVisibilityChange
  85          * @inheritdoc
  86          */
  87         mw.rcfilters.ui.MenuSelectWidget.prototype.updateItemVisibility = function () {
  88                 var i,
  89                         itemWasSelected = false,
  90                         inputVal = this.$input.val(),
  91                         items = this.getItems();
  92
  93                 // Since the method hides/shows items, we don't want to
  94                 // call it unless the input actually changed
  95                 if ( this.inputValue !== inputVal ) {
  96                         // Parent method
  97                         mw.rcfilters.ui.MenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
  98
  99                         // Select the first item in the list
 100                         for ( i = 0; i < items.length; i++ ) {
 101                                 if (
 102                                         !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
 103                                         items[ i ].isVisible()
 104                                 ) {
 105                                         itemWasSelected = true;
 106                                         this.selectItem( items[ i ] );
 107                                         break;
 108                                 }
 109                         }
 110
 111                         if ( !itemWasSelected ) {
 112                                 this.selectItem( null );
 113                         }
 114
 115                         // Cache value
 116                         this.inputValue = inputVal;
 117
 118                         this.emit( 'itemVisibilityChange' );
 119                 }
 120         };
 121
 122         /**
 123          * Override the item matcher to use the model's match process
 124          *
 125          * @inheritdoc
 126          */
 127         mw.rcfilters.ui.MenuSelectWidget.prototype.getItemMatcher = function ( s ) {
 128                 var results = this.model.findMatches( s, true );
 129
 130                 return function ( item ) {
 131                         return results.indexOf( item.getModel() ) > -1;
 132                 };
 133         };
 134
 135         /**
 136          * @inheritdoc
 137          */
 138         mw.rcfilters.ui.MenuSelectWidget.prototype.onKeyDown = function ( e ) {
 139                 var nextItem,
 140                         currentItem = this.getHighlightedItem() || this.getSelectedItem();
 141
 142                 // Call parent
 143                 mw.rcfilters.ui.MenuSelectWidget.parent.prototype.onKeyDown.call( this, e );
 144
 145                 // We want to select the item on arrow movement
 146                 // rather than just highlight it, like the menu
 147                 // does by default
 148                 if ( !this.isDisabled() && this.isVisible() ) {
 149                         switch ( e.keyCode ) {
 150                                 case OO.ui.Keys.UP:
 151                                 case OO.ui.Keys.LEFT:
 152                                         // Get the next item
 153                                         nextItem = this.getRelativeSelectableItem( currentItem, -1 );
 154                                         break;
 155                                 case OO.ui.Keys.DOWN:
 156                                 case OO.ui.Keys.RIGHT:
 157                                         // Get the next item
 158                                         nextItem = this.getRelativeSelectableItem( currentItem, 1 );
 159                                         break;
 160                         }
 161
 162                         nextItem = nextItem && nextItem.constructor.static.selectable ?
 163                                 nextItem : null;
 164
 165                         // Select the next item
 166                         this.selectItem( nextItem );
 167                 }
 168         };
 169
 170         /**
 171          * Scroll to the top of the menu
 172          */
 173         mw.rcfilters.ui.MenuSelectWidget.prototype.scrollToTop = function () {
 174                 this.$body.scrollTop( 0 );
 175         };
 176 }( mediaWiki ) );