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

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