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

   1 const ValuePickerWidget = require( './ValuePickerWidget.js' );
   2
   3 /**
   4  * Widget defining the popup to choose number of results.
   5  *
   6  * @class mw.rcfilters.ui.ChangesLimitPopupWidget
   7  * @ignore
   8  * @extends OO.ui.Widget
   9  *
  10  * @param {mw.rcfilters.dm.FilterGroup} limitModel Group model for 'limit'
  11  * @param {mw.rcfilters.dm.FilterItem} groupByPageItemModel Group model for 'limit'
  12  * @param {Object} [config] Configuration object
  13  */
  14 const ChangesLimitPopupWidget = function MwRcfiltersUiChangesLimitPopupWidget( limitModel, groupByPageItemModel, config ) {
  15         config = config || {};
  16
  17         // Parent
  18         ChangesLimitPopupWidget.super.call( this, config );
  19
  20         this.limitModel = limitModel;
  21         this.groupByPageItemModel = groupByPageItemModel;
  22
  23         this.valuePicker = new ValuePickerWidget(
  24                 this.limitModel,
  25                 {
  26                         label: mw.msg( 'rcfilters-limit-title' )
  27                 }
  28         );
  29
  30         this.groupByPageCheckbox = new OO.ui.CheckboxInputWidget( {
  31                 selected: this.groupByPageItemModel.isSelected()
  32         } );
  33
  34         // Events
  35         this.valuePicker.connect( this, { choose: [ 'emit', 'limit' ] } );
  36         this.groupByPageCheckbox.connect( this, { change: [ 'emit', 'groupByPage' ] } );
  37         this.groupByPageItemModel.connect( this, { update: 'onGroupByPageModelUpdate' } );
  38         // HACK: Directly connect to the checkbox click event so that we can save the preference
  39         // when the user explicitly interacts with the checkbox rather than when the checkbox changes
  40         // state. This is to make sure that we only save preference when the user explicitly interacts
  41         // with the UI.
  42         this.groupByPageCheckbox.$element.on( 'click', this.onGroupByPageUserClick.bind( this ) );
  43
  44         // Initialize
  45         this.$element
  46                 .addClass( 'mw-rcfilters-ui-changesLimitPopupWidget' )
  47                 .append(
  48                         this.valuePicker.$element,
  49                         OO.ui.isMobile() ? undefined :
  50                                 new OO.ui.FieldLayout(
  51                                         this.groupByPageCheckbox,
  52                                         {
  53                                                 align: 'inline',
  54                                                 label: mw.msg( 'rcfilters-group-results-by-page' )
  55                                         }
  56                                 ).$element
  57                 );
  58
  59         this.valuePicker.selectWidget.$element.attr( 'aria-label', mw.msg( 'rcfilters-limit-title' ) );
  60 };
  61
  62 /* Initialization */
  63
  64 OO.inheritClass( ChangesLimitPopupWidget, OO.ui.Widget );
  65
  66 /* Events */
  67
  68 /**
  69  * A limit item was chosen.
  70  *
  71  * @event limit
  72  * @param {string} name Item name
  73  * @ignore
  74  */
  75
  76 /**
  77  * Results are grouped by page
  78  *
  79  * @event groupByPage
  80  * @param {boolean} isGrouped The results are grouped by page
  81  * @ignore
  82  */
  83
  84 /**
  85  * Respond to group by page model update
  86  */
  87 ChangesLimitPopupWidget.prototype.onGroupByPageModelUpdate = function () {
  88         this.groupByPageCheckbox.setSelected( this.groupByPageItemModel.isSelected() );
  89 };
  90
  91 /**
  92  * Respond to user explicitly clicking the Group by page checkbox
  93  */
  94 ChangesLimitPopupWidget.prototype.onGroupByPageUserClick = function () {
  95         this.emit( 'groupByPageUserClick', this.groupByPageCheckbox.isSelected() );
  96 };
  97
  98 module.exports = ChangesLimitPopupWidget;