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

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