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

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