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

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