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

   1 const ValuePickerWidget = require( './ValuePickerWidget.js' );
   2
   3 /**
   4  * Widget defining the popup to choose date for the results.
   5  *
   6  * @class mw.rcfilters.ui.DatePopupWidget
   7  * @ignore
   8  * @extends OO.ui.Widget
   9  *
  10  * @param {mw.rcfilters.dm.FilterGroup} model Group model for 'days'
  11  * @param {Object} [config] Configuration object
  12  */
  13 const DatePopupWidget = function MwRcfiltersUiDatePopupWidget( model, config ) {
  14         config = config || {};
  15
  16         // Parent
  17         DatePopupWidget.super.call( this, config );
  18         // Mixin constructors
  19         OO.ui.mixin.LabelElement.call( this, config );
  20
  21         this.model = model;
  22
  23         this.hoursValuePicker = new ValuePickerWidget(
  24                 this.model,
  25                 {
  26                         classes: [ 'mw-rcfilters-ui-datePopupWidget-hours' ],
  27                         label: mw.msg( 'rcfilters-hours-title' ),
  28                         itemFilter: function ( itemModel ) {
  29                                 return Number( itemModel.getParamName() ) < 1;
  30                         }
  31                 }
  32         );
  33         this.hoursValuePicker.selectWidget.$element.attr( 'aria-label', mw.msg( 'rcfilters-hours-title' ) );
  34
  35         this.daysValuePicker = new ValuePickerWidget(
  36                 this.model,
  37                 {
  38                         classes: [ 'mw-rcfilters-ui-datePopupWidget-days' ],
  39                         label: mw.msg( 'rcfilters-days-title' ),
  40                         itemFilter: function ( itemModel ) {
  41                                 return Number( itemModel.getParamName() ) >= 1;
  42                         }
  43                 }
  44         );
  45         this.daysValuePicker.selectWidget.$element.attr( 'aria-label', mw.msg( 'rcfilters-days-title' ) );
  46
  47         // Events
  48         this.hoursValuePicker.connect( this, { choose: [ 'emit', 'days' ] } );
  49         this.daysValuePicker.connect( this, { choose: [ 'emit', 'days' ] } );
  50
  51         // Initialize
  52         this.$element
  53                 .addClass( 'mw-rcfilters-ui-datePopupWidget' )
  54                 .append(
  55                         this.$label
  56                                 .addClass( 'mw-rcfilters-ui-datePopupWidget-title' ),
  57                         this.hoursValuePicker.$element,
  58                         this.daysValuePicker.$element
  59                 );
  60 };
  61
  62 /* Initialization */
  63
  64 OO.inheritClass( DatePopupWidget, OO.ui.Widget );
  65 OO.mixinClass( DatePopupWidget, OO.ui.mixin.LabelElement );
  66
  67 /* Events */
  68
  69 /**
  70  * A days item was chosen
  71  *
  72  * @event days
  73  * @param {string} name Item name
  74  * @ignore
  75  */
  76
  77 module.exports = DatePopupWidget;