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

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