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

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