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

   1 ( function ( mw ) {
   2         /**
   3          * List displaying all filter groups
   4          *
   5          * @extends OO.ui.Widget
   6          * @mixins OO.ui.mixin.PendingElement
   7          *
   8          * @constructor
   9          * @param {mw.rcfilters.Controller} controller Controller
  10          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  11          * @param {Object} config Configuration object
  12          * @cfg {Object} [filters] A definition of the filter groups in this list
  13          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  14          */
  15         mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, config ) {
  16                 config = config || {};
  17
  18                 // Parent
  19                 mw.rcfilters.ui.FilterWrapperWidget.parent.call( this, config );
  20                 // Mixin constructors
  21                 OO.ui.mixin.PendingElement.call( this, config );
  22
  23                 this.controller = controller;
  24                 this.model = model;
  25                 this.$overlay = config.$overlay || this.$element;
  26
  27                 this.filtersInCapsule = [];
  28
  29                 this.filterPopup = new mw.rcfilters.ui.FiltersListWidget(
  30                         this.controller,
  31                         this.model,
  32                         {
  33                                 label: mw.msg( 'rcfilters-filterlist-title' )
  34                         }
  35                 );
  36
  37                 this.textInput = new OO.ui.TextInputWidget( {
  38                         classes: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
  39                         icon: 'search',
  40                         placeholder: mw.msg( 'rcfilters-search-placeholder' )
  41                 } );
  42
  43                 this.capsule = new mw.rcfilters.ui.FilterCapsuleMultiselectWidget( controller, this.model, this.textInput, {
  44                         $overlay: this.$overlay,
  45                         popup: {
  46                                 $content: this.filterPopup.$element,
  47                                 classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ],
  48                                 width: 650
  49                         }
  50                 } );
  51
  52                 // Events
  53                 this.model.connect( this, {
  54                         initialize: 'onModelInitialize'
  55                 } );
  56                 this.textInput.connect( this, {
  57                         change: 'onTextInputChange'
  58                 } );
  59                 this.$element
  60                         .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
  61                         .append( this.capsule.$element, this.textInput.$element );
  62         };
  63
  64         /* Initialization */
  65
  66         OO.inheritClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.Widget );
  67         OO.mixinClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.mixin.PendingElement );
  68
  69         /**
  70          * Respond to text input change
  71          *
  72          * @param {string} newValue Current value
  73          */
  74         mw.rcfilters.ui.FilterWrapperWidget.prototype.onTextInputChange = function ( newValue ) {
  75                 // Filter the results
  76                 this.filterPopup.filter( this.model.findMatches( newValue ) );
  77         };
  78
  79         /**
  80          * Respond to model update event and set up the available filters to choose
  81          * from.
  82          */
  83         mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelInitialize = function () {
  84                 var wrapper = this;
  85
  86                 // Add defaults to capsule. We have to do this
  87                 // after we added to the capsule menu, since that's
  88                 // how the capsule multiselect widget knows which
  89                 // object to add
  90                 this.model.getItems().forEach( function ( filterItem ) {
  91                         if ( filterItem.isSelected() ) {
  92                                 wrapper.capsule.addItemByName( filterItem.getName() );
  93                         }
  94                 } );
  95         };
  96
  97         /**
  98          * Add a capsule item by its filter name
  99          *
 100          * @param {string} itemName Filter name
 101          */
 102         mw.rcfilters.ui.FilterWrapperWidget.prototype.addCapsuleItemFromName = function ( itemName ) {
 103                 this.capsule.addItemByName( [ itemName ] );
 104         };
 105 }( mediaWiki ) );