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                 this.initFormWidget();
  65         };
  66
  67         /* Initialization */
  68
  69         OO.inheritClass( mw.rcfilters.ui.MainWrapperWidget, OO.ui.Widget );
  70
  71         /* Methods */
  72
  73         /**
  74          * Set the content of the top section, depending on the type of special page.
  75          *
  76          * @param {string} specialPage
  77          */
  78         mw.rcfilters.ui.MainWrapperWidget.prototype.setTopSection = function ( specialPage ) {
  79                 var topSection;
  80
  81                 if ( specialPage === 'Recentchanges' ) {
  82                         topSection = new mw.rcfilters.ui.RcTopSectionWidget(
  83                                 this.savedLinksListWidget, this.$topSection
  84                         );
  85                         this.filtersWidget.setTopSection( topSection.$element );
  86                 }
  87
  88                 if ( specialPage === 'Recentchangeslinked' ) {
  89                         topSection = new mw.rcfilters.ui.RclTopSectionWidget(
  90                                 this.savedLinksListWidget, this.controller,
  91                                 this.model.getGroup( 'toOrFrom' ).getItemByParamName( 'showlinkedto' ),
  92                                 this.model.getGroup( 'page' ).getItemByParamName( 'target' )
  93                         );
  94
  95                         this.filtersWidget.setTopSection( topSection.$element );
  96                 }
  97
  98                 if ( specialPage === 'Watchlist' ) {
  99                         topSection = new mw.rcfilters.ui.WatchlistTopSectionWidget(
 100                                 this.controller, this.changesListModel, this.savedLinksListWidget, this.$topSection
 101                         );
 102
 103                         this.filtersWidget.setTopSection( topSection.$element );
 104                 }
 105         };
 106
 107         /**
 108          * Filter menu toggle event listener
 109          *
 110          * @param {boolean} isVisible
 111          */
 112         mw.rcfilters.ui.MainWrapperWidget.prototype.onFilterMenuToggle = function ( isVisible ) {
 113                 this.changesListWidget.toggleOverlay( isVisible );
 114         };
 115
 116         /**
 117          * Initialize FormWrapperWidget
 118          *
 119          * @return {mw.rcfilters.ui.FormWrapperWidget} Form wrapper widget
 120          */
 121         mw.rcfilters.ui.MainWrapperWidget.prototype.initFormWidget = function () {
 122                 return new mw.rcfilters.ui.FormWrapperWidget(
 123                         this.model, this.changesListModel, this.controller, this.$formContainer );
 124         };
 125 }( jQuery, mediaWiki ) );