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  * @extends OO.ui.Widget
   7  * @mixins OO.ui.mixin.LabelElement
   8  *
   9  * @constructor
  10  * @param {mw.rcfilters.dm.FilterGroup} model Group model
  11  * @param {Object} [config] Configuration object
  12  * @cfg {Function} [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 var ValuePickerWidget = function MwRcfiltersUiValuePickerWidget( model, config ) {
  18         config = config || {};
  19
  20         // Parent
  21         ValuePickerWidget.parent.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  * @event choose
  57  * @param {string} name Item name
  58  *
  59  * An item has been chosen
  60  */
  61
  62 /* Methods */
  63
  64 /**
  65  * Respond to model update event
  66  */
  67 ValuePickerWidget.prototype.onModelUpdate = function () {
  68         this.selectCurrentModelItem();
  69 };
  70
  71 /**
  72  * Respond to select widget choose event
  73  *
  74  * @param {OO.ui.ButtonOptionWidget} chosenItem Chosen item
  75  * @fires choose
  76  */
  77 ValuePickerWidget.prototype.onSelectWidgetChoose = function ( chosenItem ) {
  78         this.emit( 'choose', chosenItem.getData() );
  79 };
  80
  81 /**
  82  * Initialize the select widget
  83  */
  84 ValuePickerWidget.prototype.initializeSelectWidget = function () {
  85         var items = this.model.getItems()
  86                 .filter( this.itemFilter )
  87                 .map( function ( filterItem ) {
  88                         return new OO.ui.ButtonOptionWidget( {
  89                                 data: filterItem.getName(),
  90                                 label: filterItem.getLabel()
  91                         } );
  92                 } );
  93
  94         this.selectWidget.clearItems();
  95         this.selectWidget.addItems( items );
  96
  97         this.selectCurrentModelItem();
  98 };
  99
 100 /**
 101  * Select the current item that corresponds with the model item
 102  * that is currently selected
 103  */
 104 ValuePickerWidget.prototype.selectCurrentModelItem = function () {
 105         var selectedItem = this.model.findSelectedItems()[ 0 ];
 106
 107         if ( selectedItem ) {
 108                 this.selectWidget.selectItemByData( selectedItem.getName() );
 109         }
 110 };
 111
 112 module.exports = ValuePickerWidget;