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

   1 ( function ( mw ) {
   2         /**
   3          * A floating menu widget for the filter list
   4          *
   5          * @extends OO.ui.FloatingMenuSelectWidget
   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.FloatingMenuSelectWidget = function MwRcfiltersUiFloatingMenuSelectWidget( 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-floatingMenuSelectWidget-body' );
  27
  28                 // Parent
  29                 mw.rcfilters.ui.FloatingMenuSelectWidget.parent.call( this, $.extend( {
  30                         $autoCloseIgnore: this.$overlay,
  31                         width: 650
  32                 }, config ) );
  33                 this.setGroupElement(
  34                         $( '<div>' )
  35                                 .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget-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-floatingMenuSelectWidget-noresults' ]
  51                 } );
  52
  53                 this.$element
  54                         .addClass( 'mw-rcfilters-ui-floatingMenuSelectWidget' )
  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-floatingMenuSelectWidget-footer' )
  65                         );
  66                 }
  67         };
  68
  69         /* Initialize */
  70
  71         OO.inheritClass( mw.rcfilters.ui.FloatingMenuSelectWidget, OO.ui.FloatingMenuSelectWidget );
  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.FloatingMenuSelectWidget.prototype.updateItemVisibility = function () {
  88                 var i,
  89                         itemWasHighlighted = 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.FloatingMenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
  98
  99                         if ( inputVal !== '' ) {
 100                                 // Highlight the first item in the list
 101                                 for ( i = 0; i < items.length; i++ ) {
 102                                         if (
 103                                                 !( items[ i ] instanceof OO.ui.MenuSectionOptionWidget ) &&
 104                                                 items[ i ].isVisible()
 105                                         ) {
 106                                                 itemWasHighlighted = true;
 107                                                 this.highlightItem( items[ i ] );
 108                                                 break;
 109                                         }
 110                                 }
 111                         }
 112
 113                         if ( !itemWasHighlighted ) {
 114                                 this.highlightItem( null );
 115                         }
 116
 117                         // Cache value
 118                         this.inputValue = inputVal;
 119
 120                         this.emit( 'itemVisibilityChange' );
 121                 }
 122         };
 123
 124         /**
 125          * Override the item matcher to use the model's match process
 126          *
 127          * @inheritdoc
 128          */
 129         mw.rcfilters.ui.FloatingMenuSelectWidget.prototype.getItemMatcher = function ( s ) {
 130                 var results = this.model.findMatches( s, true );
 131
 132                 return function ( item ) {
 133                         return results.indexOf( item.getModel() ) > -1;
 134                 };
 135         };
 136
 137         /**
 138          * Scroll to the top of the menu
 139          */
 140         mw.rcfilters.ui.FloatingMenuSelectWidget.prototype.scrollToTop = function () {
 141                 this.$body.scrollTop( 0 );
 142         };
 143 }( mediaWiki ) );