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          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller Controller
   9          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  10          * @param {Object} [config] Configuration object
  11          * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  12          */
  13         mw.rcfilters.ui.DateButtonWidget = function MwRcfiltersUiDateButtonWidget( controller, model, config ) {
  14                 config = config || {};
  15
  16                 // Parent
  17                 mw.rcfilters.ui.ChangesLimitButtonWidget.parent.call( this, config );
  18
  19                 this.controller = controller;
  20                 this.model = model;
  21
  22                 this.$overlay = config.$overlay || this.$element;
  23
  24                 this.button = null;
  25                 this.daysGroupModel = null;
  26
  27                 this.model.connect( this, {
  28                         initialize: 'onModelInitialize'
  29                 } );
  30
  31                 this.$element
  32                         .addClass( 'mw-rcfilters-ui-dateButtonWidget' );
  33         };
  34
  35         /* Initialization */
  36
  37         OO.inheritClass( mw.rcfilters.ui.DateButtonWidget, OO.ui.Widget );
  38
  39         /**
  40          * Respond to model initialize event
  41          */
  42         mw.rcfilters.ui.DateButtonWidget.prototype.onModelInitialize = function () {
  43                 var datePopupWidget;
  44
  45                 this.daysGroupModel = this.model.getGroup( 'days' );
  46
  47                 // HACK: We need the model to be ready before we populate the button
  48                 // and the widget, because we require the filter items for the
  49                 // limit and their events. This addition is only done after the
  50                 // model is initialized.
  51                 // Note: This will be fixed soon!
  52                 if ( this.daysGroupModel ) {
  53                         datePopupWidget = new mw.rcfilters.ui.DatePopupWidget(
  54                                 this.daysGroupModel
  55                         );
  56
  57                         this.button = new OO.ui.PopupButtonWidget( {
  58                                 indicator: 'down',
  59                                 icon: 'calendar',
  60                                 $overlay: this.$overlay,
  61                                 popup: {
  62                                         width: 300,
  63                                         padded: true,
  64                                         anchor: false,
  65                                         align: 'backwards',
  66                                         $autoCloseIgnore: this.$overlay,
  67                                         $content: datePopupWidget.$element
  68                                 }
  69                         } );
  70                         this.updateButtonLabel();
  71
  72                         // Events
  73                         this.daysGroupModel.connect( this, { update: 'onDaysGroupModelUpdate' } );
  74                         datePopupWidget.connect( this, { days: 'onPopupDays' } );
  75
  76                         this.$element.append( this.button.$element );
  77                 }
  78         };
  79
  80         /**
  81          * Respond to popup limit change event
  82          *
  83          * @param {string} filterName Chosen filter name
  84          */
  85         mw.rcfilters.ui.DateButtonWidget.prototype.onPopupDays = function ( filterName ) {
  86                 this.controller.toggleFilterSelect( filterName, true );
  87         };
  88
  89         /**
  90          * Respond to limit choose event
  91          *
  92          * @param {string} filterName Filter name
  93          */
  94         mw.rcfilters.ui.DateButtonWidget.prototype.onDaysGroupModelUpdate = function () {
  95                 this.updateButtonLabel();
  96         };
  97
  98         /**
  99          * Update the button label
 100          */
 101         mw.rcfilters.ui.DateButtonWidget.prototype.updateButtonLabel = function () {
 102                 var item = this.daysGroupModel.getSelectedItems()[ 0 ];
 103
 104                 // Update the label
 105                 if ( item ) {
 106                         this.button.setLabel(
 107                                 mw.msg(
 108                                         // Number( item.getParamName() ) < 1 ?
 109                                         //      'rcfilters-days-show-hours' : 'rcfilters-days-show-days',
 110
 111                                         // Temporarily hide the functionality for hours, use days only
 112                                         'rcfilters-days-show-days',
 113                                         item.getLabel()
 114                                 )
 115                         );
 116                 }
 117         };
 118 }( mediaWiki ) );