Add a global overlay to Echo

This is preparing for nested popups inside the master popup.

Change-Id: I3bb86acd1bf841d5b27018565f5aa8f4a3295d9d

Resources.php

@@ -40,6 +40,7 @@ $wgResourceModules += array(
 			'ooui/mw.echo.ui.NotificationBadgeWidget.js'
 		),
 		'styles' => array(
+			'ooui/styles/mw.echo.ui.overlay.less',
 			'ooui/styles/mw.echo.ui.NotificationsWidget.less',
 			'ooui/styles/mw.echo.ui.NotificationItemWidget.less',
 			'ooui/styles/mw.echo.ui.NotificationBadgeWidget.less'

modules/ext.echo.init.js

@@ -55,6 +55,9 @@
 			mw.loader.using( 'ext.echo.ui', function () {
 				var messageNotificationsModel, alertNotificationsModel;
 
+				// Overlay
+				$( 'body' ).append( mw.echo.ui.$overlay );
+
 				// Load message button and popup if messages exist
 				if ( $existingMessageLink.length ) {
 					messageNotificationsModel = new mw.echo.dm.NotificationsModel(
@@ -69,6 +72,7 @@
 					);
 					mw.echo.ui.messageWidget = new mw.echo.ui.NotificationBadgeWidget( messageNotificationsModel, {
 						markReadWhenSeen: false,
+						$overlay: mw.echo.ui.$overlay,
 						numItems: numMessages,
 						hasUnseen: hasUnseenMessages,
 						badgeIcon: 'speechBubble',

modules/ooui/mw.echo.ui.NotificationBadgeWidget.js

@@ -21,6 +21,8 @@
 	 *    seen: 'bell'
 	 *  } }
 	 * @cfg {string} [href] URL the badge links to
+	 * @cfg {jQuery} [$overlay] A jQuery element functioning as an overlay
+	 *  for popups.
 	 */
 	mw.echo.ui.NotificationBadgeWidget = function MwEchoUiNotificationBadgeButtonPopupWidget( model, config ) {
 		var buttonFlags, allNotificationsButton, preferencesButton, footerButtonGroupWidget, $footer;
@@ -34,6 +36,8 @@
 		// Mixin constructors
 		OO.ui.mixin.PendingElement.call( this, config );
 
+		this.$overlay = config.$overlay || this.$element;
+
 		// View model
 		this.notificationsModel = model;
 		this.type = this.notificationsModel.getType();
@@ -65,6 +69,7 @@
 			this.notificationsModel,
 			{
 				type: this.type,
+				$overlay: this.$overlay,
 				markReadWhenSeen: this.markReadWhenSeen
 			}
 		);

modules/ooui/mw.echo.ui.NotificationItemWidget.js

@@ -8,12 +8,15 @@
 	 * @constructor
 	 * @param {Object} [config] Configuration object
 	 * @cfg {boolean} [markReadWhenSeen=false] This option is marked as read when it is viewed
+	 * @cfg {jQuery} [$overlay] A jQuery element functioning as an overlay
+	 *  for popups.
 	 */
 	mw.echo.ui.NotificationItemWidget = function MwEchoUiNotificationItemWidget( model, config ) {
 		var widget = this;
 		config = config || {};
 
 		this.model = model;
+		this.$overlay = config.$overlay || this.$element;
 
 		// Parent constructor
 		mw.echo.ui.NotificationItemWidget.parent.call( this, $.extend( { data: this.model.getId() }, config ) );

modules/ooui/mw.echo.ui.NotificationsWidget.js

@@ -10,6 +10,8 @@
 	 * @param {Object} [config] Configuration object
 	 * @cfg {boolean} [markReadWhenSeen=false] State whether the notifications are all
 	 *  marked as read when they are seen.
+	 * @cfg {jQuery} [$overlay] A jQuery element functioning as an overlay
+	 *  for popups.
 	 */
 	mw.echo.ui.NotificationsWidget = function MwEchoUiNotificationsWidget( model, config ) {
 		config = config || {};
@@ -52,6 +54,7 @@
 		var widget = new mw.echo.ui.NotificationItemWidget(
 				notificationItem,
 				{
+					$overlay: this.$overlay,
 					markReadWhenSeen: this.markReadWhenSeen
 				}
 			);

modules/ooui/mw.echo.ui.js

@@ -1,4 +1,7 @@
-( function ( mw ) {
+( function ( mw, $ ) {
 	mw.echo = mw.echo || {};
-	mw.echo.ui = {};
-} )( mediaWiki );
+	mw.echo.ui = {
+		$overlay: $( '<div>' )
+			.addClass( 'mw-echo-ui-overlay' )
+	};
+} )( mediaWiki, jQuery );

modules/ooui/styles/mw.echo.ui.overlay.less

@@ -0,0 +1,7 @@
+.mw-echo-ui-overlay {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	z-index: 1;
+}