resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesLimitButtonWidget.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.ChangesLimitButtonWidget = function MwRcfiltersUiChangesLimitWidget( controller, model, config ) {
  15                 config = config || {};
  16
  17                 // Parent
  18                 mw.rcfilters.ui.ChangesLimitButtonWidget.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
  28                 this.model.connect( this, {
  29                         initialize: 'onModelInitialize'
  30                 } );
  31
  32                 this.$element
  33                         .addClass( 'mw-rcfilters-ui-changesLimitButtonWidget' );
  34         };
  35
  36         /* Initialization */
  37
  38         OO.inheritClass( mw.rcfilters.ui.ChangesLimitButtonWidget, OO.ui.Widget );
  39
  40         /**
  41          * Respond to model initialize event
  42          */
  43         mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onModelInitialize = function () {
  44                 var changesLimitPopupWidget, selectedItem, currentValue,
  45                         displayGroupModel = this.model.getGroup( 'display' );
  46
  47                 this.limitGroupModel = this.model.getGroup( 'limit' );
  48                 this.groupByPageItemModel = displayGroupModel.getItemByParamName( 'enhanced' );
  49
  50                 // HACK: We need the model to be ready before we populate the button
  51                 // and the widget, because we require the filter items for the
  52                 // limit and their events. This addition is only done after the
  53                 // model is initialized.
  54                 // Note: This will be fixed soon!
  55                 if ( this.limitGroupModel ) {
  56                         changesLimitPopupWidget = new mw.rcfilters.ui.ChangesLimitPopupWidget(
  57                                 this.limitGroupModel,
  58                                 this.groupByPageItemModel
  59                         );
  60
  61                         selectedItem = this.limitGroupModel.getSelectedItems()[ 0 ];
  62                         currentValue = ( selectedItem && selectedItem.getLabel() ) ||
  63                                 mw.language.convertNumber( this.limitGroupModel.getDefaultParamValue() );
  64
  65                         this.button = new OO.ui.PopupButtonWidget( {
  66                                 indicator: 'down',
  67                                 label: mw.msg( 'rcfilters-limit-shownum', currentValue ),
  68                                 $overlay: this.$overlay,
  69                                 popup: {
  70                                         width: 300,
  71                                         padded: true,
  72                                         anchor: false,
  73                                         align: 'forwards',
  74                                         $autoCloseIgnore: this.$overlay,
  75                                         $content: changesLimitPopupWidget.$element
  76                                 }
  77                         } );
  78
  79                         // Events
  80                         this.limitGroupModel.connect( this, { update: 'onLimitGroupModelUpdate' } );
  81                         changesLimitPopupWidget.connect( this, {
  82                                 limit: 'onPopupLimit',
  83                                 groupByPage: 'onPopupGroupByPage'
  84                         } );
  85
  86                         this.$element.append( this.button.$element );
  87                 }
  88         };
  89
  90         /**
  91          * Respond to popup limit change event
  92          *
  93          * @param {string} filterName Chosen filter name
  94          */
  95         mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupLimit = function ( filterName ) {
  96                 var item = this.limitGroupModel.getItemByName( filterName );
  97
  98                 this.controller.toggleFilterSelect( filterName, true );
  99                 this.controller.updateLimitDefault( item.getParamName() );
 100                 this.button.popup.toggle( false );
 101         };
 102
 103         /**
 104          * Respond to popup limit change event
 105          *
 106          * @param {boolean} isGrouped The result set is grouped by page
 107          */
 108         mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onPopupGroupByPage = function ( isGrouped ) {
 109                 this.controller.toggleFilterSelect( this.groupByPageItemModel.getName(), isGrouped );
 110                 this.controller.updateGroupByPageDefault( Number( isGrouped ) );
 111                 this.button.popup.toggle( false );
 112         };
 113
 114         /**
 115          * Respond to limit choose event
 116          *
 117          * @param {string} filterName Filter name
 118          */
 119         mw.rcfilters.ui.ChangesLimitButtonWidget.prototype.onLimitGroupModelUpdate = function () {
 120                 var item = this.limitGroupModel.getSelectedItems()[ 0 ],
 121                         label = item && item.getLabel();
 122
 123                 // Update the label
 124                 if ( label ) {
 125                         this.button.setLabel( mw.msg( 'rcfilters-limit-shownum', label ) );
 126                 }
 127         };
 128
 129 }( mediaWiki ) );