resources/src/mediawiki.rcfilters/ui/ValuePickerWidget.js

   1 /**
   2  * Widget defining the behavior used to choose from a set of values
   3  * in a single_value group.
   4  *
   5  * @class mw.rcfilters.ui.ValuePickerWidget
   6  * @ignore
   7  * @extends OO.ui.Widget
   8  * @mixes OO.ui.mixin.LabelElement
   9  *
  10  * @param {mw.rcfilters.dm.FilterGroup} model Group model
  11  * @param {Object} [config] Configuration object
  12  * @param {Function} [config.itemFilter] A filter function for the items from the
  13  *  model. If not given, all items will be included. The function must
  14  *  handle item models and return a boolean whether the item is included
  15  *  or not. Example: function ( itemModel ) { return itemModel.isSelected(); }
  16  */
  17 const ValuePickerWidget = function MwRcfiltersUiValuePickerWidget( model, config ) {
  18         config = config || {};
  19
  20         // Parent
  21         ValuePickerWidget.super.call( this, config );
  22         // Mixin constructors
  23         OO.ui.mixin.LabelElement.call( this, config );
  24
  25         this.model = model;
  26         this.itemFilter = config.itemFilter || function () {
  27                 return true;
  28         };
  29
  30         // Build the selection from the item models
  31         this.selectWidget = new OO.ui.ButtonSelectWidget();
  32         this.initializeSelectWidget();
  33
  34         // Events
  35         this.model.connect( this, { update: 'onModelUpdate' } );
  36         this.selectWidget.connect( this, { choose: 'onSelectWidgetChoose' } );
  37
  38         // Initialize
  39         this.$element
  40                 .addClass( 'mw-rcfilters-ui-valuePickerWidget' )
  41                 .append(
  42                         this.$label
  43                                 .addClass( 'mw-rcfilters-ui-valuePickerWidget-title' ),
  44                         this.selectWidget.$element
  45                 );
  46 };
  47
  48 /* Initialization */
  49
  50 OO.inheritClass( ValuePickerWidget, OO.ui.Widget );
  51 OO.mixinClass( ValuePickerWidget, OO.ui.mixin.LabelElement );
  52
  53 /* Events */
  54
  55 /**
  56  * An item has been chosen.
  57  *
  58  * @event choose
  59  * @param {string} name Item name
  60  * @ignore
  61  */
  62
  63 /* Methods */
  64
  65 /**
  66  * Respond to model update event
  67  */
  68 ValuePickerWidget.prototype.onModelUpdate = function () {
  69         this.selectCurrentModelItem();
  70 };
  71
  72 /**
  73  * Respond to select widget choose event
  74  *
  75  * @param {OO.ui.ButtonOptionWidget} chosenItem Chosen item
  76  * @fires choose
  77  */
  78 ValuePickerWidget.prototype.onSelectWidgetChoose = function ( chosenItem ) {
  79         this.emit( 'choose', chosenItem.getData() );
  80 };
  81
  82 /**
  83  * Initialize the select widget
  84  */
  85 ValuePickerWidget.prototype.initializeSelectWidget = function () {
  86         const items = this.model.getItems()
  87                 .filter( this.itemFilter )
  88                 .map( ( filterItem ) => new OO.ui.ButtonOptionWidget( {
  89                         data: filterItem.getName(),
  90                         label: filterItem.getLabel()
  91                 } ) );
  92
  93         this.selectWidget.clearItems();
  94         this.selectWidget.addItems( items );
  95
  96         this.selectCurrentModelItem();
  97 };
  98
  99 /**
 100  * Select the current item that corresponds with the model item
 101  * that is currently selected
 102  */
 103 ValuePickerWidget.prototype.selectCurrentModelItem = function () {
 104         const selectedItem = this.model.findSelectedItems()[ 0 ];
 105
 106         if ( selectedItem ) {
 107                 this.selectWidget.selectItemByData( selectedItem.getName() );
 108         }
 109 };
 110
 111 module.exports = ValuePickerWidget;