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

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