resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.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.FilterFloatingMenuSelectWidget = function MwRcfiltersUiFilterFloatingMenuSelectWidget( 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-filterFloatingMenuSelectWidget-body' );
  27
  28                 // Parent
  29                 mw.rcfilters.ui.FilterFloatingMenuSelectWidget.parent.call( this, $.extend( {
  30                         $autoCloseIgnore: this.$overlay,
  31                         width: 650
  32                 }, config ) );
  33                 this.setGroupElement(
  34                         $( '<div>' )
  35                                 .addClass( 'mw-rcfilters-ui-filterFloatingMenuSelectWidget-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-filterFloatingMenuSelectWidget-noresults' ]
  51                 } );
  52
  53                 this.$element
  54                         .addClass( 'mw-rcfilters-ui-filterFloatingMenuSelectWidget' )
  55                         .append(
  56                                 this.$body
  57                                         .append( header.$element, this.$group, this.noResults.$element )
  58                         );
  59
  60                 if ( this.$footer ) {
  61                         this.$element.append(
  62                                 this.$footer
  63                                         .addClass( 'mw-rcfilters-ui-filterFloatingMenuSelectWidget-footer' )
  64                         );
  65                 }
  66         };
  67
  68         /* Initialize */
  69
  70         OO.inheritClass( mw.rcfilters.ui.FilterFloatingMenuSelectWidget, OO.ui.FloatingMenuSelectWidget );
  71
  72         /* Events */
  73
  74         /**
  75          * @event itemVisibilityChange
  76          *
  77          * Item visibility has changed
  78          */
  79
  80         /* Methods */
  81
  82         /**
  83          * @fires itemVisibilityChange
  84          * @inheritdoc
  85          */
  86         mw.rcfilters.ui.FilterFloatingMenuSelectWidget.prototype.updateItemVisibility = function () {
  87                 var i,
  88                         itemWasHighlighted = false,
  89                         inputVal = this.$input.val(),
  90                         items = this.getItems();
  91
  92                 // Since the method hides/shows items, we don't want to
  93                 // call it unless the input actually changed
  94                 if ( this.inputValue !== inputVal ) {
  95                         // Parent method
  96                         mw.rcfilters.ui.FilterFloatingMenuSelectWidget.parent.prototype.updateItemVisibility.call( this );
  97
  98                         if ( inputVal !== '' ) {
  99                                 // Highlight 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                                                 itemWasHighlighted = true;
 106                                                 this.highlightItem( items[ i ] );
 107                                                 break;
 108                                         }
 109                                 }
 110                         }
 111
 112                         if ( !itemWasHighlighted ) {
 113                                 this.highlightItem( null );
 114                         }
 115
 116                         // Cache value
 117                         this.inputValue = inputVal;
 118
 119                         this.emit( 'itemVisibilityChange' );
 120                 }
 121         };
 122
 123         /**
 124          * Override the item matcher to use the model's match process
 125          *
 126          * @inheritdoc
 127          */
 128         mw.rcfilters.ui.FilterFloatingMenuSelectWidget.prototype.getItemMatcher = function ( s ) {
 129                 var results = this.model.findMatches( s, true );
 130
 131                 return function ( item ) {
 132                         return results.indexOf( item.getModel() ) > -1;
 133                 };
 134         };
 135
 136         /**
 137          * Scroll to the top of the menu
 138          */
 139         mw.rcfilters.ui.FilterFloatingMenuSelectWidget.prototype.scrollToTop = function () {
 140                 this.$body.scrollTop( 0 );
 141         };
 142 }( mediaWiki ) );