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

   1 var FilterTagMultiselectWidget = require( './FilterTagMultiselectWidget.js' ),
   2         LiveUpdateButtonWidget = require( './LiveUpdateButtonWidget.js' ),
   3         ChangesLimitAndDateButtonWidget = require( './ChangesLimitAndDateButtonWidget.js' ),
   4         FilterWrapperWidget;
   5
   6 /**
   7  * List displaying all filter groups
   8  *
   9  * @class mw.rcfilters.ui.FilterWrapperWidget
  10  * @extends OO.ui.Widget
  11  * @mixins OO.ui.mixin.PendingElement
  12  *
  13  * @constructor
  14  * @param {mw.rcfilters.Controller} controller Controller
  15  * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  16  * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
  17  * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
  18  * @param {Object} [config] Configuration object
  19  * @cfg {Object} [filters] A definition of the filter groups in this list
  20  * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
  21  * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
  22  *  system. If not given, falls back to this widget's $element
  23  * @cfg {boolean} [collapsed] Filter area is collapsed
  24  */
  25 FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget(
  26         controller, model, savedQueriesModel, changesListModel, config
  27 ) {
  28         var $bottom;
  29         config = config || {};
  30
  31         // Parent
  32         FilterWrapperWidget.parent.call( this, config );
  33         // Mixin constructors
  34         OO.ui.mixin.PendingElement.call( this, config );
  35
  36         this.controller = controller;
  37         this.model = model;
  38         this.queriesModel = savedQueriesModel;
  39         this.changesListModel = changesListModel;
  40         this.$overlay = config.$overlay || this.$element;
  41         this.$wrapper = config.$wrapper || this.$element;
  42
  43         this.filterTagWidget = new FilterTagMultiselectWidget(
  44                 this.controller,
  45                 this.model,
  46                 this.queriesModel,
  47                 {
  48                         $overlay: this.$overlay,
  49                         collapsed: config.collapsed,
  50                         $wrapper: this.$wrapper,
  51                         isMobile: OO.ui.isMobile()
  52                 }
  53         );
  54
  55         this.liveUpdateButton = new LiveUpdateButtonWidget(
  56                 this.controller,
  57                 this.changesListModel
  58         );
  59
  60         this.numChangesAndDateWidget = new ChangesLimitAndDateButtonWidget(
  61                 this.controller,
  62                 this.model,
  63                 {
  64                         $overlay: this.$overlay
  65                 }
  66         );
  67
  68         this.showNewChangesLink = new OO.ui.ButtonWidget( {
  69                 icon: 'reload',
  70                 framed: false,
  71                 flags: [ 'progressive' ],
  72                 classes: [ 'mw-rcfilters-ui-filterWrapperWidget-showNewChanges' ]
  73         } );
  74
  75         // Events
  76         this.filterTagWidget.menu.connect( this, { toggle: [ 'emit', 'menuToggle' ] } );
  77         this.changesListModel.connect( this, { newChangesExist: 'onNewChangesExist' } );
  78         this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
  79         this.showNewChangesLink.toggle( false );
  80
  81         // Initialize
  82         this.$top = $( '<div>' )
  83                 .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' );
  84
  85         $bottom = $( '<div>' )
  86                 .addClass( OO.ui.isMobile() ?
  87                         'mw-rcfilters-ui-filterWrapperWidget-bottom ' +
  88                         'mw-rcfilters-ui-filterWrapperWidget-bottom-mobile' :
  89                         'mw-rcfilters-ui-filterWrapperWidget-bottom'
  90                 )
  91                 .append(
  92                         this.showNewChangesLink.$element,
  93                         this.numChangesAndDateWidget.$element
  94                 );
  95
  96         if ( this.controller.pollingRate ) {
  97                 $bottom.prepend( this.liveUpdateButton.$element );
  98         }
  99
 100         this.$element
 101                 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
 102                 .append(
 103                         this.$top,
 104                         this.filterTagWidget.$element,
 105                         $bottom
 106                 );
 107 };
 108
 109 /* Initialization */
 110
 111 OO.inheritClass( FilterWrapperWidget, OO.ui.Widget );
 112 OO.mixinClass( FilterWrapperWidget, OO.ui.mixin.PendingElement );
 113
 114 /* Methods */
 115
 116 /**
 117  * Set the content of the top section
 118  *
 119  * @param {jQuery} $topSectionElement
 120  */
 121 FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) {
 122         this.$top.append( $topSectionElement );
 123 };
 124
 125 /**
 126  * Respond to the user clicking the 'show new changes' button
 127  */
 128 FilterWrapperWidget.prototype.onShowNewChangesClick = function () {
 129         this.controller.showNewChanges();
 130 };
 131
 132 /**
 133  * Respond to changes list model newChangesExist
 134  *
 135  * @param {boolean} newChangesExist Whether new changes exist
 136  */
 137 FilterWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
 138         if ( newChangesExist ) {
 139                 this.showNewChangesLink.setLabel(
 140                         mw.message(
 141                                 'rcfilters-show-new-changes',
 142                                 this.changesListModel.getNextFromFormatted()
 143                         ).text()
 144                 );
 145         }
 146         this.showNewChangesLink.toggle( newChangesExist );
 147 };
 148
 149 module.exports = FilterWrapperWidget;