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

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