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

   1 ( function () {
   2         /**
   3          * Wrapper for changes list content
   4          *
   5          * @extends OO.ui.Widget
   6          *
   7          * @constructor
   8          * @param {mw.rcfilters.Controller} controller Controller
   9          * @param {mw.rcfilters.dm.FiltersViewModel} model View model
  10          * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
  11          * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
  12          * @param {Object} config Configuration object
  13          * @cfg {jQuery} $topSection Top section container
  14          * @cfg {jQuery} $filtersContainer
  15          * @cfg {jQuery} $changesListContainer
  16          * @cfg {jQuery} $formContainer
  17          * @cfg {boolean} [collapsed] Filter area is collapsed
  18          * @cfg {jQuery} [$wrapper] A jQuery object for the wrapper of the general
  19          *  system. If not given, falls back to this widget's $element
  20          */
  21         mw.rcfilters.ui.MainWrapperWidget = function MwRcfiltersUiMainWrapperWidget(
  22                 controller, model, savedQueriesModel, changesListModel, config
  23         ) {
  24                 config = $.extend( {}, config );
  25
  26                 // Parent
  27                 mw.rcfilters.ui.MainWrapperWidget.parent.call( this, config );
  28
  29                 this.controller = controller;
  30                 this.model = model;
  31                 this.changesListModel = changesListModel;
  32                 this.$topSection = config.$topSection;
  33                 this.$filtersContainer = config.$filtersContainer;
  34                 this.$changesListContainer = config.$changesListContainer;
  35                 this.$formContainer = config.$formContainer;
  36                 this.$overlay = $( '<div>' ).addClass( 'mw-rcfilters-ui-overlay' );
  37                 this.$wrapper = config.$wrapper || this.$element;
  38
  39                 this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget(
  40                         controller, savedQueriesModel, { $overlay: this.$overlay }
  41                 );
  42
  43                 this.filtersWidget = new mw.rcfilters.ui.FilterWrapperWidget(
  44                         controller,
  45                         model,
  46                         savedQueriesModel,
  47                         changesListModel,
  48                         {
  49                                 $overlay: this.$overlay,
  50                                 $wrapper: this.$wrapper,
  51                                 collapsed: config.collapsed
  52                         }
  53                 );
  54
  55                 this.changesListWidget = new mw.rcfilters.ui.ChangesListWrapperWidget(
  56                         model, changesListModel, controller, this.$changesListContainer );
  57
  58                 /* Events */
  59
  60                 // Toggle changes list overlay when filters menu opens/closes. We use overlay on changes list
  61                 // to prevent users from accidentally clicking on links in results, while menu is opened.
  62                 // Overlay on changes list is not the same as this.$overlay
  63                 this.filtersWidget.connect( this, { menuToggle: this.onFilterMenuToggle.bind( this ) } );
  64
  65                 // Initialize
  66                 this.$filtersContainer.append( this.filtersWidget.$element );
  67                 $( 'body' )
  68                         .append( this.$overlay )
  69                         .addClass( 'mw-rcfilters-ui-initialized' );
  70         };
  71
  72         /* Initialization */
  73
  74         OO.inheritClass( mw.rcfilters.ui.MainWrapperWidget, OO.ui.Widget );
  75
  76         /* Methods */
  77
  78         /**
  79          * Set the content of the top section, depending on the type of special page.
  80          *
  81          * @param {string} specialPage
  82          */
  83         mw.rcfilters.ui.MainWrapperWidget.prototype.setTopSection = function ( specialPage ) {
  84                 var topSection;
  85
  86                 if ( specialPage === 'Recentchanges' ) {
  87                         topSection = new mw.rcfilters.ui.RcTopSectionWidget(
  88                                 this.savedLinksListWidget, this.$topSection
  89                         );
  90                         this.filtersWidget.setTopSection( topSection.$element );
  91                 }
  92
  93                 if ( specialPage === 'Recentchangeslinked' ) {
  94                         topSection = new mw.rcfilters.ui.RclTopSectionWidget(
  95                                 this.savedLinksListWidget, this.controller,
  96                                 this.model.getGroup( 'toOrFrom' ).getItemByParamName( 'showlinkedto' ),
  97                                 this.model.getGroup( 'page' ).getItemByParamName( 'target' )
  98                         );
  99
 100                         this.filtersWidget.setTopSection( topSection.$element );
 101                 }
 102
 103                 if ( specialPage === 'Watchlist' ) {
 104                         topSection = new mw.rcfilters.ui.WatchlistTopSectionWidget(
 105                                 this.controller, this.changesListModel, this.savedLinksListWidget, this.$topSection
 106                         );
 107
 108                         this.filtersWidget.setTopSection( topSection.$element );
 109                 }
 110         };
 111
 112         /**
 113          * Filter menu toggle event listener
 114          *
 115          * @param {boolean} isVisible
 116          */
 117         mw.rcfilters.ui.MainWrapperWidget.prototype.onFilterMenuToggle = function ( isVisible ) {
 118                 this.changesListWidget.toggleOverlay( isVisible );
 119         };
 120
 121         /**
 122          * Initialize FormWrapperWidget
 123          *
 124          * @return {mw.rcfilters.ui.FormWrapperWidget} Form wrapper widget
 125          */
 126         mw.rcfilters.ui.MainWrapperWidget.prototype.initFormWidget = function () {
 127                 return new mw.rcfilters.ui.FormWrapperWidget(
 128                         this.model, this.changesListModel, this.controller, this.$formContainer );
 129         };
 130 }() );