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          * @class
   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         mw.rcfilters.ui.ValuePickerWidget = function MwRcfiltersUiValuePickerWidget( model, config ) {
  19                 config = config || {};
  20
  21                 // Parent
  22                 mw.rcfilters.ui.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 () { return true; };
  28
  29                 // Build the selection from the item models
  30                 this.selectWidget = new OO.ui.ButtonSelectWidget();
  31                 this.initializeSelectWidget();
  32
  33                 // Events
  34                 this.model.connect( this, { update: 'onModelUpdate' } );
  35                 this.selectWidget.connect( this, { choose: 'onSelectWidgetChoose' } );
  36
  37                 // Initialize
  38                 this.$element
  39                         .addClass( 'mw-rcfilters-ui-valuePickerWidget' )
  40                         .append(
  41                                 this.$label
  42                                         .addClass( 'mw-rcfilters-ui-valuePickerWidget-title' ),
  43                                 this.selectWidget.$element
  44                         );
  45         };
  46
  47         /* Initialization */
  48
  49         OO.inheritClass( mw.rcfilters.ui.ValuePickerWidget, OO.ui.Widget );
  50         OO.mixinClass( mw.rcfilters.ui.ValuePickerWidget, OO.ui.mixin.LabelElement );
  51
  52         /* Events */
  53
  54         /**
  55          * @event choose
  56          * @param {string} name Item name
  57          *
  58          * An item has been chosen
  59          */
  60
  61         /* Methods */
  62
  63         /**
  64          * Respond to model update event
  65          */
  66         mw.rcfilters.ui.ValuePickerWidget.prototype.onModelUpdate = function () {
  67                 this.selectCurrentModelItem();
  68         };
  69
  70         /**
  71          * Respond to select widget choose event
  72          *
  73          * @param {OO.ui.ButtonOptionWidget} chosenItem Chosen item
  74          * @fires choose
  75          */
  76         mw.rcfilters.ui.ValuePickerWidget.prototype.onSelectWidgetChoose = function ( chosenItem ) {
  77                 this.emit( 'choose', chosenItem.getData() );
  78         };
  79
  80         /**
  81          * Initialize the select widget
  82          */
  83         mw.rcfilters.ui.ValuePickerWidget.prototype.initializeSelectWidget = function () {
  84                 var items = this.model.getItems()
  85                         .filter( this.itemFilter )
  86                         .map( function ( filterItem ) {
  87                                 return new OO.ui.ButtonOptionWidget( {
  88                                         data: filterItem.getName(),
  89                                         label: filterItem.getLabel()
  90                                 } );
  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         mw.rcfilters.ui.ValuePickerWidget.prototype.selectCurrentModelItem = function () {
 104                 var selectedItem = this.model.findSelectedItems()[ 0 ];
 105
 106                 if ( selectedItem ) {
 107                         this.selectWidget.selectItemByData( selectedItem.getName() );
 108                 }
 109         };
 110 }( mediaWiki ) );