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