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                 }
  52         );
  53
  54         this.liveUpdateButton = new LiveUpdateButtonWidget(
  55                 this.controller,
  56                 this.changesListModel
  57         );
  58
  59         this.numChangesAndDateWidget = new ChangesLimitAndDateButtonWidget(
  60                 this.controller,
  61                 this.model,
  62                 {
  63                         $overlay: this.$overlay
  64                 }
  65         );
  66
  67         this.showNewChangesLink = new OO.ui.ButtonWidget( {
  68                 icon: 'reload',
  69                 framed: false,
  70                 label: mw.msg( 'rcfilters-show-new-changes' ),
  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( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
  87                 .append(
  88                         this.showNewChangesLink.$element,
  89                         this.numChangesAndDateWidget.$element
  90                 );
  91
  92         if ( this.controller.pollingRate ) {
  93                 $bottom.prepend( this.liveUpdateButton.$element );
  94         }
  95
  96         this.$element
  97                 .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
  98                 .append(
  99                         this.$top,
 100                         this.filterTagWidget.$element,
 101                         $bottom
 102                 );
 103 };
 104
 105 /* Initialization */
 106
 107 OO.inheritClass( FilterWrapperWidget, OO.ui.Widget );
 108 OO.mixinClass( FilterWrapperWidget, OO.ui.mixin.PendingElement );
 109
 110 /* Methods */
 111
 112 /**
 113  * Set the content of the top section
 114  *
 115  * @param {jQuery} $topSectionElement
 116  */
 117 FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) {
 118         this.$top.append( $topSectionElement );
 119 };
 120
 121 /**
 122  * Respond to the user clicking the 'show new changes' button
 123  */
 124 FilterWrapperWidget.prototype.onShowNewChangesClick = function () {
 125         this.controller.showNewChanges();
 126 };
 127
 128 /**
 129  * Respond to changes list model newChangesExist
 130  *
 131  * @param {boolean} newChangesExist Whether new changes exist
 132  */
 133 FilterWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
 134         this.showNewChangesLink.toggle( newChangesExist );
 135 };
 136
 137 module.exports = FilterWrapperWidget;