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

   1 var ValuePickerWidget = require( './ValuePickerWidget.js' ),
   2         ChangesLimitPopupWidget;
   3
   4 /**
   5  * Widget defining the popup to choose number of results
   6  *
   7  * @class mw.rcfilters.ui.ChangesLimitPopupWidget
   8  * @extends OO.ui.Widget
   9  *
  10  * @constructor
  11  * @param {mw.rcfilters.dm.FilterGroup} limitModel Group model for 'limit'
  12  * @param {mw.rcfilters.dm.FilterItem} groupByPageItemModel Group model for 'limit'
  13  * @param {Object} [config] Configuration object
  14  */
  15 ChangesLimitPopupWidget = function MwRcfiltersUiChangesLimitPopupWidget( limitModel, groupByPageItemModel, config ) {
  16         config = config || {};
  17
  18         // Parent
  19         ChangesLimitPopupWidget.parent.call( this, config );
  20
  21         this.limitModel = limitModel;
  22         this.groupByPageItemModel = groupByPageItemModel;
  23
  24         this.valuePicker = new ValuePickerWidget(
  25                 this.limitModel,
  26                 {
  27                         label: mw.msg( 'rcfilters-limit-title' )
  28                 }
  29         );
  30
  31         this.groupByPageCheckbox = new OO.ui.CheckboxInputWidget( {
  32                 selected: this.groupByPageItemModel.isSelected()
  33         } );
  34
  35         // Events
  36         this.valuePicker.connect( this, { choose: [ 'emit', 'limit' ] } );
  37         this.groupByPageCheckbox.connect( this, { change: [ 'emit', 'groupByPage' ] } );
  38         this.groupByPageItemModel.connect( this, { update: 'onGroupByPageModelUpdate' } );
  39
  40         // Initialize
  41         this.$element
  42                 .addClass( 'mw-rcfilters-ui-changesLimitPopupWidget' )
  43                 .append(
  44                         this.valuePicker.$element,
  45                         OO.ui.isMobile() ? undefined :
  46                                 new OO.ui.FieldLayout(
  47                                         this.groupByPageCheckbox,
  48                                         {
  49                                                 align: 'inline',
  50                                                 label: mw.msg( 'rcfilters-group-results-by-page' )
  51                                         }
  52                                 ).$element
  53                 );
  54 };
  55
  56 /* Initialization */
  57
  58 OO.inheritClass( ChangesLimitPopupWidget, OO.ui.Widget );
  59
  60 /* Events */
  61
  62 /**
  63  * @event limit
  64  * @param {string} name Item name
  65  *
  66  * A limit item was chosen
  67  */
  68
  69 /**
  70  * @event groupByPage
  71  * @param {boolean} isGrouped The results are grouped by page
  72  *
  73  * Results are grouped by page
  74  */
  75
  76 /**
  77  * Respond to group by page model update
  78  */
  79 ChangesLimitPopupWidget.prototype.onGroupByPageModelUpdate = function () {
  80         this.groupByPageCheckbox.setSelected( this.groupByPageItemModel.isSelected() );
  81 };
  82
  83 module.exports = ChangesLimitPopupWidget;