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          */
  14         mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget( controller, model, config ) {
  15                 config = config || {};
  16
  17                 // Parent
  18                 mw.rcfilters.ui.FilterWrapperWidget.parent.call( this, config );
  19                 // Mixin constructors
  20                 OO.ui.mixin.PendingElement.call( this, config );
  21
  22                 this.controller = controller;
  23                 this.model = model;
  24                 this.filtersInCapsule = [];
  25
  26                 this.filterPopup = new mw.rcfilters.ui.FiltersListWidget(
  27                         this.controller,
  28                         this.model,
  29                         {
  30                                 label: mw.msg( 'rcfilters-filterlist-title' )
  31                         }
  32                 );
  33
  34                 this.textInput = new OO.ui.TextInputWidget( {
  35                         classes: [ 'mw-rcfilters-ui-filterWrapperWidget-search' ],
  36                         icon: 'search',
  37                         placeholder: mw.msg( 'rcfilters-search-placeholder' )
  38                 } );
  39
  40                 this.capsule = new mw.rcfilters.ui.FilterCapsuleMultiselectWidget( this.textInput, {
  41                         popup: {
  42                                 $content: this.filterPopup.$element,
  43                                 classes: [ 'mw-rcfilters-ui-filterWrapperWidget-popup' ]
  44                         }
  45                 } );
  46
  47                 // Events
  48                 this.model.connect( this, {
  49                         initialize: 'onModelInitialize',
  50                         itemUpdate: 'onModelItemUpdate'
  51                 } );
  52                 this.textInput.connect( this, {
  53                         change: 'onTextInputChange'
  54                 } );
  55                 this.capsule.connect( this, {
  56                         remove: 'onCapsuleRemoveItem'
  57                 } );
  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 an event where an item is removed from the capsule.
  81          * This is the case where a user actively removes a filter box from the capsule widget.
  82          *
  83          * @param {string[]} filterNames An array of filter names that were removed
  84          */
  85         mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsuleRemoveItem = function ( filterNames ) {
  86                 var filterItem,
  87                         widget = this;
  88
  89                 filterNames.forEach( function ( filterName ) {
  90                         // Go over filters
  91                         filterItem = widget.model.getItemByName( filterName );
  92                         filterItem.toggleSelected( false );
  93                 } );
  94         };
  95
  96         /**
  97          * Respond to model update event and set up the available filters to choose
  98          * from.
  99          */
 100         mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelInitialize = function () {
 101                 var items,
 102                         filters = this.model.getItems();
 103
 104                 // Reset
 105                 this.capsule.getMenu().clearItems();
 106
 107                 // Insert hidden options for the capsule to get its item data from
 108                 items = filters.map( function ( filterItem ) {
 109                         return new OO.ui.MenuOptionWidget( {
 110                                 data: filterItem.getName(),
 111                                 label: filterItem.getLabel()
 112                         } );
 113                 } );
 114
 115                 this.capsule.getMenu().addItems( items );
 116         };
 117
 118         /**
 119          * Respond to model item update
 120          *
 121          * @param {mw.rcfilters.dm.FilterItem} item Filter item that was updated
 122          */
 123         mw.rcfilters.ui.FilterWrapperWidget.prototype.onModelItemUpdate = function ( item ) {
 124                 if ( item.isSelected() ) {
 125                         this.capsule.addItemsFromData( [ item.getName() ] );
 126                 } else {
 127                         this.capsule.removeItemsFromData( [ item.getName() ] );
 128                 }
 129         };
 130 }( mediaWiki ) );