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

   1 ( function ( mw ) {
   2         /**
   3          * Widget defining the behavior used to choose from a set of values
   4          * in a single_value group
   5          *
   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         mw.rcfilters.ui.ValuePickerWidget = function MwRcfiltersUiValuePickerWidget( model, config ) {
  18                 config = config || {};
  19
  20                 // Parent
  21                 mw.rcfilters.ui.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 () { return true; };
  27
  28                 // Build the selection from the item models
  29                 this.selectWidget = new OO.ui.ButtonSelectWidget();
  30                 this.initializeSelectWidget();
  31
  32                 // Events
  33                 this.model.connect( this, { update: 'onModelUpdate' } );
  34                 this.selectWidget.connect( this, { choose: 'onSelectWidgetChoose' } );
  35
  36                 // Initialize
  37                 this.$element
  38                         .addClass( 'mw-rcfilters-ui-valuePickerWidget' )
  39                         .append(
  40                                 this.$label
  41                                         .addClass( 'mw-rcfilters-ui-valuePickerWidget-title' ),
  42                                 this.selectWidget.$element
  43                         );
  44         };
  45
  46         /* Initialization */
  47
  48         OO.inheritClass( mw.rcfilters.ui.ValuePickerWidget, OO.ui.Widget );
  49         OO.mixinClass( mw.rcfilters.ui.ValuePickerWidget, OO.ui.mixin.LabelElement );
  50
  51         /* Events */
  52
  53         /**
  54          * @event choose
  55          * @param {string} name Item name
  56          *
  57          * An item has been chosen
  58          */
  59
  60         /* Methods */
  61
  62         /**
  63          * Respond to model update event
  64          */
  65         mw.rcfilters.ui.ValuePickerWidget.prototype.onModelUpdate = function () {
  66                 this.selectCurrentModelItem();
  67         };
  68
  69         /**
  70          * Respond to select widget choose event
  71          *
  72          * @param {OO.ui.ButtonOptionWidget} chosenItem Chosen item
  73          * @fires choose
  74          */
  75         mw.rcfilters.ui.ValuePickerWidget.prototype.onSelectWidgetChoose = function ( chosenItem ) {
  76                 this.emit( 'choose', chosenItem.getData() );
  77         };
  78
  79         /**
  80          * Initialize the select widget
  81          */
  82         mw.rcfilters.ui.ValuePickerWidget.prototype.initializeSelectWidget = function () {
  83                 var items = this.model.getItems()
  84                         .filter( this.itemFilter )
  85                         .map( function ( filterItem ) {
  86                                 return new OO.ui.ButtonOptionWidget( {
  87                                         data: filterItem.getName(),
  88                                         label: filterItem.getLabel()
  89                                 } );
  90                         } );
  91
  92                 this.selectWidget.clearItems();
  93                 this.selectWidget.addItems( items );
  94
  95                 this.selectCurrentModelItem();
  96         };
  97
  98         /**
  99          * Select the current item that corresponds with the model item
 100          * that is currently selected
 101          */
 102         mw.rcfilters.ui.ValuePickerWidget.prototype.selectCurrentModelItem = function () {
 103                 var selectedItem = this.model.getSelectedItems()[ 0 ];
 104
 105                 if ( selectedItem ) {
 106                         this.selectWidget.selectItemByData( selectedItem.getName() );
 107                 }
 108         };
 109 }( mediaWiki ) );