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

   1 ( function () {
   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          * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
  17          *  system. If not given, falls back to this widget's $element
  18          * @cfg {boolean} [collapsed] Filter area is collapsed
  19          */
  20         mw.rcfilters.ui.FilterWrapperWidget = function MwRcfiltersUiFilterWrapperWidget(
  21                 controller, model, savedQueriesModel, changesListModel, config
  22         ) {
  23                 var $bottom;
  24                 config = config || {};
  25
  26                 // Parent
  27                 mw.rcfilters.ui.FilterWrapperWidget.parent.call( this, config );
  28                 // Mixin constructors
  29                 OO.ui.mixin.PendingElement.call( this, config );
  30
  31                 this.controller = controller;
  32                 this.model = model;
  33                 this.queriesModel = savedQueriesModel;
  34                 this.changesListModel = changesListModel;
  35                 this.$overlay = config.$overlay || this.$element;
  36                 this.$wrapper = config.$wrapper || this.$element;
  37
  38                 this.filterTagWidget = new mw.rcfilters.ui.FilterTagMultiselectWidget(
  39                         this.controller,
  40                         this.model,
  41                         this.queriesModel,
  42                         {
  43                                 $overlay: this.$overlay,
  44                                 collapsed: config.collapsed,
  45                                 $wrapper: this.$wrapper
  46                         }
  47                 );
  48
  49                 this.liveUpdateButton = new mw.rcfilters.ui.LiveUpdateButtonWidget(
  50                         this.controller,
  51                         this.changesListModel
  52                 );
  53
  54                 this.numChangesAndDateWidget = new mw.rcfilters.ui.ChangesLimitAndDateButtonWidget(
  55                         this.controller,
  56                         this.model,
  57                         {
  58                                 $overlay: this.$overlay
  59                         }
  60                 );
  61
  62                 this.showNewChangesLink = new OO.ui.ButtonWidget( {
  63                         icon: 'reload',
  64                         framed: false,
  65                         label: mw.msg( 'rcfilters-show-new-changes' ),
  66                         flags: [ 'progressive' ],
  67                         classes: [ 'mw-rcfilters-ui-filterWrapperWidget-showNewChanges' ]
  68                 } );
  69
  70                 // Events
  71                 this.filterTagWidget.menu.connect( this, { toggle: [ 'emit', 'menuToggle' ] } );
  72                 this.changesListModel.connect( this, { newChangesExist: 'onNewChangesExist' } );
  73                 this.showNewChangesLink.connect( this, { click: 'onShowNewChangesClick' } );
  74                 this.showNewChangesLink.toggle( false );
  75
  76                 // Initialize
  77                 this.$top = $( '<div>' )
  78                         .addClass( 'mw-rcfilters-ui-filterWrapperWidget-top' );
  79
  80                 $bottom = $( '<div>' )
  81                         .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
  82                         .append(
  83                                 this.showNewChangesLink.$element,
  84                                 this.numChangesAndDateWidget.$element
  85                         );
  86
  87                 if ( mw.config.get( 'StructuredChangeFiltersLiveUpdatePollingRate' ) ) {
  88                         $bottom.prepend( this.liveUpdateButton.$element );
  89                 }
  90
  91                 this.$element
  92                         .addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
  93                         .append(
  94                                 this.$top,
  95                                 this.filterTagWidget.$element,
  96                                 $bottom
  97                         );
  98         };
  99
 100         /* Initialization */
 101
 102         OO.inheritClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.Widget );
 103         OO.mixinClass( mw.rcfilters.ui.FilterWrapperWidget, OO.ui.mixin.PendingElement );
 104
 105         /* Methods */
 106
 107         /**
 108          * Set the content of the top section
 109          *
 110          * @param {jQuery} $topSectionElement
 111          */
 112         mw.rcfilters.ui.FilterWrapperWidget.prototype.setTopSection = function ( $topSectionElement ) {
 113                 this.$top.append( $topSectionElement );
 114         };
 115
 116         /**
 117          * Respond to the user clicking the 'show new changes' button
 118          */
 119         mw.rcfilters.ui.FilterWrapperWidget.prototype.onShowNewChangesClick = function () {
 120                 this.controller.showNewChanges();
 121         };
 122
 123         /**
 124          * Respond to changes list model newChangesExist
 125          *
 126          * @param {boolean} newChangesExist Whether new changes exist
 127          */
 128         mw.rcfilters.ui.FilterWrapperWidget.prototype.onNewChangesExist = function ( newChangesExist ) {
 129                 this.showNewChangesLink.toggle( newChangesExist );
 130         };
 131 }() );