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

   1 ( function ( mw ) {
   2         /**
   3          * Widget defining the button controlling the popup for the date range for the 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.DateButtonWidget = function MwRcfiltersUiDateButtonWidget( 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.daysGroupModel = null;
  27
  28                 this.model.connect( this, {
  29                         initialize: 'onModelInitialize'
  30                 } );
  31
  32                 this.$element
  33                         .addClass( 'mw-rcfilters-ui-dateButtonWidget' );
  34         };
  35
  36         /* Initialization */
  37
  38         OO.inheritClass( mw.rcfilters.ui.DateButtonWidget, OO.ui.Widget );
  39
  40         /**
  41          * Respond to model initialize event
  42          */
  43         mw.rcfilters.ui.DateButtonWidget.prototype.onModelInitialize = function () {
  44                 var datePopupWidget;
  45
  46                 this.daysGroupModel = this.model.getGroup( 'days' );
  47
  48                 // HACK: We need the model to be ready before we populate the button
  49                 // and the widget, because we require the filter items for the
  50                 // limit and their events. This addition is only done after the
  51                 // model is initialized.
  52                 // Note: This will be fixed soon!
  53                 if ( this.daysGroupModel ) {
  54                         datePopupWidget = new mw.rcfilters.ui.DatePopupWidget(
  55                                 this.daysGroupModel
  56                         );
  57
  58                         this.button = new OO.ui.PopupButtonWidget( {
  59                                 indicator: 'down',
  60                                 icon: 'calendar',
  61                                 $overlay: this.$overlay,
  62                                 popup: {
  63                                         width: 300,
  64                                         padded: true,
  65                                         anchor: false,
  66                                         align: 'forwards',
  67                                         $autoCloseIgnore: this.$overlay,
  68                                         $content: datePopupWidget.$element
  69                                 }
  70                         } );
  71                         this.updateButtonLabel();
  72
  73                         // Events
  74                         this.daysGroupModel.connect( this, { update: 'onDaysGroupModelUpdate' } );
  75                         datePopupWidget.connect( this, { days: 'onPopupDays' } );
  76
  77                         this.$element.append( this.button.$element );
  78                 }
  79         };
  80
  81         /**
  82          * Respond to popup limit change event
  83          *
  84          * @param {string} filterName Chosen filter name
  85          */
  86         mw.rcfilters.ui.DateButtonWidget.prototype.onPopupDays = function ( filterName ) {
  87                 var item = this.daysGroupModel.getItemByName( filterName );
  88
  89                 this.controller.toggleFilterSelect( filterName, true );
  90                 this.controller.updateDaysDefault( item.getParamName() );
  91                 this.button.popup.toggle( false );
  92         };
  93
  94         /**
  95          * Respond to limit choose event
  96          *
  97          * @param {string} filterName Filter name
  98          */
  99         mw.rcfilters.ui.DateButtonWidget.prototype.onDaysGroupModelUpdate = function () {
 100                 this.updateButtonLabel();
 101         };
 102
 103         /**
 104          * Update the button label
 105          */
 106         mw.rcfilters.ui.DateButtonWidget.prototype.updateButtonLabel = function () {
 107                 var item = this.daysGroupModel.getSelectedItems()[ 0 ];
 108
 109                 // Update the label
 110                 if ( item ) {
 111                         this.button.setLabel(
 112                                 mw.msg(
 113                                         Number( item.getParamName() ) < 1 ?
 114                                                 'rcfilters-days-show-hours' : 'rcfilters-days-show-days',
 115                                         item.getLabel()
 116                                 )
 117                         );
 118                 }
 119         };
 120 }( mediaWiki ) );