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

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