1 files changed, 124 insertions, 0 deletions
diff --git a/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MainWrapperWidget.js b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MainWrapperWidget.js
new file mode 100644
index 00000000..8002045d
--- /dev/null
+++ b/www/wiki/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.MainWrapperWidget.js
@@ -0,0 +1,124 @@
+( function ( $, mw ) {
+	/**
+	 * Wrapper for changes list content
+	 *
+	 * @extends OO.ui.Widget
+	 *
+	 * @constructor
+	 * @param {mw.rcfilters.Controller} controller Controller
+	 * @param {mw.rcfilters.dm.FiltersViewModel} model View model
+	 * @param {mw.rcfilters.dm.SavedQueriesModel} savedQueriesModel Saved queries model
+	 * @param {mw.rcfilters.dm.ChangesListViewModel} changesListModel
+	 * @param {Object} config Configuration object
+	 * @cfg {jQuery} $topSection Top section container
+	 * @cfg {jQuery} $filtersContainer
+	 * @cfg {jQuery} $changesListContainer
+	 * @cfg {jQuery} $formContainer
+	 */
+	mw.rcfilters.ui.MainWrapperWidget = function MwRcfiltersUiMainWrapperWidget(
+		controller, model, savedQueriesModel, changesListModel, config
+	) {
+		config = $.extend( {}, config );
+
+		// Parent
+		mw.rcfilters.ui.MainWrapperWidget.parent.call( this, config );
+
+		this.controller = controller;
+		this.model = model;
+		this.changesListModel = changesListModel;
+		this.$topSection = config.$topSection;
+		this.$filtersContainer = config.$filtersContainer;
+		this.$changesListContainer = config.$changesListContainer;
+		this.$formContainer = config.$formContainer;
+		this.$overlay = $( '<div>' ).addClass( 'mw-rcfilters-ui-overlay' );
+
+		this.savedLinksListWidget = new mw.rcfilters.ui.SavedLinksListWidget(
+			controller, savedQueriesModel, { $overlay: this.$overlay }
+		);
+
+		this.filtersWidget = new mw.rcfilters.ui.FilterWrapperWidget(
+			controller,
+			model,
+			savedQueriesModel,
+			changesListModel,
+			{
+				$overlay: this.$overlay
+			}
+		);
+
+		this.changesListWidget = new mw.rcfilters.ui.ChangesListWrapperWidget(
+			model, changesListModel, controller, this.$changesListContainer );
+
+		/* Events */
+
+		// Toggle changes list overlay when filters menu opens/closes. We use overlay on changes list
+		// to prevent users from accidentally clicking on links in results, while menu is opened.
+		// Overlay on changes list is not the same as this.$overlay
+		this.filtersWidget.connect( this, { menuToggle: this.onFilterMenuToggle.bind( this ) } );
+
+		// Initialize
+		this.$filtersContainer.append( this.filtersWidget.$element );
+		$( 'body' )
+			.append( this.$overlay )
+			.addClass( 'mw-rcfilters-ui-initialized' );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.rcfilters.ui.MainWrapperWidget, OO.ui.Widget );
+
+	/* Methods */
+
+	/**
+	 * Set the content of the top section, depending on the type of special page.
+	 *
+	 * @param {string} specialPage
+	 */
+	mw.rcfilters.ui.MainWrapperWidget.prototype.setTopSection = function ( specialPage ) {
+		var topSection;
+
+		if ( specialPage === 'Recentchanges' ) {
+			topSection = new mw.rcfilters.ui.RcTopSectionWidget(
+				this.savedLinksListWidget, this.$topSection
+			);
+			this.filtersWidget.setTopSection( topSection.$element );
+		}
+
+		if ( specialPage === 'Recentchangeslinked' ) {
+			topSection = new mw.rcfilters.ui.RclTopSectionWidget(
+				this.savedLinksListWidget, this.controller,
+				this.model.getGroup( 'toOrFrom' ).getItemByParamName( 'showlinkedto' ),
+				this.model.getGroup( 'page' ).getItemByParamName( 'target' )
+			);
+
+			this.filtersWidget.setTopSection( topSection.$element );
+		}
+
+		if ( specialPage === 'Watchlist' ) {
+			topSection = new mw.rcfilters.ui.WatchlistTopSectionWidget(
+				this.controller, this.changesListModel, this.savedLinksListWidget, this.$topSection
+			);
+
+			this.filtersWidget.setTopSection( topSection.$element );
+		}
+	};
+
+	/**
+	 * Filter menu toggle event listener
+	 *
+	 * @param {boolean} isVisible
+	 */
+	mw.rcfilters.ui.MainWrapperWidget.prototype.onFilterMenuToggle = function ( isVisible ) {
+		this.changesListWidget.toggleOverlay( isVisible );
+	};
+
+	/**
+	 * Initialize FormWrapperWidget
+	 *
+	 * @return {mw.rcfilters.ui.FormWrapperWidget} Form wrapper widget
+	 */
+	mw.rcfilters.ui.MainWrapperWidget.prototype.initFormWidget = function () {
+		return new mw.rcfilters.ui.FormWrapperWidget(
+			this.model, this.changesListModel, this.controller, this.$formContainer );
+	};
+}( jQuery, mediaWiki ) );