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

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