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

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