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

   1 const ChangesLimitPopupWidget = require( './ChangesLimitPopupWidget.js' ),
   2         DatePopupWidget = require( './DatePopupWidget.js' );
   3
   4 /**
   5  * Widget defining the button controlling the popup for the number of results.
   6  *
   7  * @class mw.rcfilters.ui.ChangesLimitAndDateButtonWidget
   8  * @ignore
   9  * @extends OO.ui.Widget
  10  *
  11  * @param {mw.rcfilters.Controller} controller Controller
  12  * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  13  * @param {Object} [config] Configuration object
  14  * @param {jQuery} [config.$overlay] A jQuery object serving as overlay for popups
  15  */
  16 const ChangesLimitAndDateButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
  17         config = config || {};
  18
  19         // Parent
  20         ChangesLimitAndDateButtonWidget.super.call( this, config );
  21
  22         this.controller = controller;
  23         this.model = model;
  24
  25         this.$overlay = config.$overlay || this.$element;
  26
  27         this.button = null;
  28         this.limitGroupModel = null;
  29         this.groupByPageItemModel = null;
  30         this.daysGroupModel = null;
  31
  32         this.model.connect( this, {
  33                 initialize: 'onModelInitialize'
  34         } );
  35
  36         this.$element
  37                 .addClass( 'mw-rcfilters-ui-changesLimitAndDateButtonWidget' );
  38 };
  39
  40 /* Initialization */
  41
  42 OO.inheritClass( ChangesLimitAndDateButtonWidget, OO.ui.Widget );
  43
  44 /**
  45  * Respond to model initialize event
  46  */
  47 ChangesLimitAndDateButtonWidget.prototype.onModelInitialize = function () {
  48         const displayGroupModel = this.model.getGroup( 'display' );
  49
  50         this.limitGroupModel = this.model.getGroup( 'limit' );
  51         this.groupByPageItemModel = displayGroupModel.getItemByParamName( 'enhanced' );
  52         this.daysGroupModel = this.model.getGroup( 'days' );
  53
  54         // HACK: We need the model to be ready before we populate the button
  55         // and the widget, because we require the filter items for the
  56         // limit and their events. This addition is only done after the
  57         // model is initialized.
  58         // Note: This will be fixed soon!
  59         if ( this.limitGroupModel && this.daysGroupModel ) {
  60                 this.changesLimitPopupWidget = new ChangesLimitPopupWidget(
  61                         this.limitGroupModel,
  62                         this.groupByPageItemModel
  63                 );
  64
  65                 const datePopupWidget = new DatePopupWidget(
  66                         this.daysGroupModel,
  67                         {
  68                                 label: mw.msg( 'rcfilters-date-popup-title' )
  69                         }
  70                 );
  71
  72                 const selectedItem = this.limitGroupModel.findSelectedItems()[ 0 ];
  73                 const currentValue = ( selectedItem && selectedItem.getLabel() ) ||
  74                         mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
  75
  76                 this.button = new OO.ui.PopupButtonWidget( {
  77                         icon: 'settings',
  78                         indicator: 'down',
  79                         label: mw.msg( 'rcfilters-limit-and-date-label', currentValue ),
  80                         $overlay: this.$overlay,
  81                         popup: {
  82                                 width: 300,
  83                                 padded: false,
  84                                 anchor: false,
  85                                 align: 'backwards',
  86                                 $autoCloseIgnore: this.$overlay,
  87                                 $content: $( '<div>' ).append(
  88                                         // TODO: Merge ChangesLimitPopupWidget with DatePopupWidget into one common widget
  89                                         this.changesLimitPopupWidget.$element,
  90                                         datePopupWidget.$element
  91                                 )
  92                         }
  93                 } );
  94
  95                 this.button.popup.connect( this, { ready: 'onPopupInitialized' } );
  96                 this.button.popup.connect( this, { closing: 'onPopupClosing' } );
  97                 this.button.popup.$element.attr( 'aria-label',
  98                         mw.msg( 'rcfilters-limit-and-date-popup-dialog-aria-label' )
  99                 );
 100                 this.updateButtonLabel();
 101
 102                 // Events
 103                 this.limitGroupModel.connect( this, { update: 'updateButtonLabel' } );
 104                 this.daysGroupModel.connect( this, { update: 'updateButtonLabel' } );
 105                 this.changesLimitPopupWidget.connect( this, {
 106                         limit: 'onPopupLimit',
 107                         groupByPage: 'onPopupGroupByPage',
 108                         groupByPageUserClick: 'onPopupGroupByPageUserClick'
 109                 } );
 110                 datePopupWidget.connect( this, { days: 'onPopupDays' } );
 111
 112                 this.$element.append( this.button.$element );
 113         }
 114 };
 115
 116 /**
 117  * Respond to popup initialized event
 118  *
 119  */
 120 ChangesLimitAndDateButtonWidget.prototype.onPopupInitialized = function () {
 121         this.changesLimitPopupWidget.$element.find( '*[tabindex]' ).first().trigger( 'focus' );
 122 };
 123
 124 /**
 125  * Respond to popup closing event
 126  *
 127  */
 128 ChangesLimitAndDateButtonWidget.prototype.onPopupClosing = function () {
 129         this.button.$button.trigger( 'focus' );
 130 };
 131
 132 /**
 133  * Respond to popup limit change event
 134  *
 135  * @param {string} filterName Chosen filter name
 136  */
 137 ChangesLimitAndDateButtonWidget.prototype.onPopupLimit = function ( filterName ) {
 138         const item = this.limitGroupModel.getItemByName( filterName );
 139
 140         this.controller.toggleFilterSelect( filterName, true );
 141         this.controller.updateLimitDefault( item.getParamName() );
 142         this.button.popup.toggle( false );
 143 };
 144
 145 /**
 146  * Respond to popup limit change event
 147  *
 148  * @param {boolean} isGrouped The result set is grouped by page
 149  */
 150 ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
 151         this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
 152         this.button.popup.toggle( false );
 153 };
 154
 155 /**
 156  * Respond to popup request to save the group by page setting in preferences
 157  *
 158  * @param {boolean} isSelected The state of the group by page checkbox
 159  */
 160 ChangesLimitAndDateButtonWidget.prototype.onPopupGroupByPageUserClick = function ( isSelected ) {
 161         this.controller.updateGroupByPageDefault( isSelected );
 162 };
 163
 164 /**
 165  * Respond to popup limit change event
 166  *
 167  * @param {string} filterName Chosen filter name
 168  */
 169 ChangesLimitAndDateButtonWidget.prototype.onPopupDays = function ( filterName ) {
 170         const item = this.daysGroupModel.getItemByName( filterName );
 171
 172         this.controller.toggleFilterSelect( filterName, true );
 173         this.controller.updateDaysDefault( item.getParamName() );
 174         this.button.popup.toggle( false );
 175 };
 176
 177 /**
 178  * Respond to limit choose event
 179  */
 180 ChangesLimitAndDateButtonWidget.prototype.updateButtonLabel = function () {
 181         const limit = this.limitGroupModel.findSelectedItems()[ 0 ],
 182                 label = limit && limit.getLabel(),
 183                 days = this.daysGroupModel.findSelectedItems()[ 0 ];
 184
 185         // Update the label
 186         if ( label && days ) {
 187                 const message = mw.msg( 'rcfilters-limit-and-date-label', label,
 188                         mw.msg(
 189                                 Number( days.getParamName() ) < 1 ?
 190                                         'rcfilters-days-show-hours' :
 191                                         'rcfilters-days-show-days',
 192                                 days.getLabel()
 193                         )
 194                 );
 195                 this.button.setLabel( message );
 196         }
 197 };
 198
 199 module.exports = ChangesLimitAndDateButtonWidget;