Rename MobileNotificationsWrapper to NotificationsWrapper

We need to use it in more than just the context of mobile, and
there is nothing actually mobile-specific in it. Renaming the
class so it isn't awkward to use elsewhere.

This makes the ext.echo.ui.mobile module unnecessary, but
we leave it in until next patchset so that MobileFrontend
doesn't crash while we wait for the adjustments in
Ie592ca738ac2d8 to be merged.

Change-Id: I7891eb3fb46b350f0b325bf0a2b56b2cd55ff1d7

Resources.php

@@ -55,9 +55,11 @@ $wgResourceModules += array(
 		),
 		'targets' => array( 'desktop' ),
 	),
+	// TODO: Delete this module and the file. It's only needed for MobileFrontend
+	// to not crash while we are renaming NotificationsWrapper
 	'ext.echo.ui.mobile' => $echoResourceTemplate + array(
 		'scripts' => array(
-			'ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js',
+			'ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js'
 		),
 		'dependencies' => array(
 			'ext.echo.ui',
@@ -75,6 +77,7 @@ $wgResourceModules += array(
 			'ooui/mw.echo.ui.ActionMenuPopupWidget.js',
 			'ooui/mw.echo.ui.MenuItemWidget.js',
 			'ooui/mw.echo.ui.FooterNoticeWidget.js',
+			'ooui/mw.echo.ui.NotificationsWrapper.js',
 		),
 		'styles' => array(
 			'ooui/styles/mw.echo.ui.overlay.less',
@@ -261,7 +264,7 @@ $wgResourceModules += array(
 		'dependencies' => array(
 			'mediawiki.ui.button',
 			'mediawiki.api',
-			'ext.echo.ui.desktop',
+			'ext.echo.ui',
 		),
 		'messages' => array(
 			'echo-load-more-error',

modules/ooui/mobile/mw.echo.ui.MobileNotificationsWrapper.js

@@ -1,6 +1,6 @@
 ( function ( mw ) {
 	/**
-	 * Mobile wrapper for the notifications widget, for mobile view.
+	 * Wapper for the notifications widget, for view outside the popup.
 	 *
 	 * @class
 	 * @extends OO.ui.Widget

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

@@ -0,0 +1,82 @@
+( function ( mw ) {
+	/**
+	 * Wapper for the notifications widget, for view outside the popup.
+	 *
+	 * @class
+	 * @extends OO.ui.Widget
+	 * @mixins OO.ui.mixin.PendingElement
+	 *
+	 * @constructor
+	 * @param {mw.echo.dm.NotificationsModel} model Notifications view model
+	 * @param {Object} [config] Configuration object
+	 */
+	mw.echo.ui.NotificationsWrapper = function MwEchoUiNotificationsWrapper( model, config ) {
+		config = config || {};
+
+		// Parent constructor
+		mw.echo.ui.NotificationsWrapper.parent.call( this, config );
+
+		// Mixin constructor
+		OO.ui.mixin.PendingElement.call( this, config );
+
+		this.model = model;
+
+		this.notificationsWidget = new mw.echo.ui.NotificationsWidget(
+			this.model,
+			{
+				markReadWhenSeen: false,
+				$overlay: config.$overlay,
+				label: mw.msg( 'notifications' ),
+				icon: 'bell'
+			}
+		);
+
+		// Events
+		this.model.connect( this, {
+			unreadChange: [ 'emit', 'unreadChange' ],
+			allRead: [ 'emit', 'unreadChange', 0 ]
+		} );
+
+		// Initialize
+		this.$element
+			.append( this.notificationsWidget.$element );
+	};
+
+	/* Initialization */
+
+	OO.inheritClass( mw.echo.ui.NotificationsWrapper, OO.ui.Widget );
+	OO.mixinClass( mw.echo.ui.NotificationsWrapper, OO.ui.mixin.PendingElement );
+
+	/* Events */
+
+	/**
+	 * @event finishLoading
+	 * Notifications have successfully finished being processed and are fully loaded
+	 */
+
+	/**
+	 * @event unreadChange
+	 * @param {number} Number of unread messages
+	 * There was a change in the number of unread notifications
+	 */
+
+	/* Methods */
+
+	/**
+	 * Populate the notifications panel
+	 *
+	 * @return {jQuery.Promise} A promise that is resolved when all notifications
+	 *  were fetched from the API and added to the model and UI.
+	 */
+	mw.echo.ui.NotificationsWrapper.prototype.populate = function () {
+		var widget = this;
+
+		this.pushPending();
+		return this.model.fetchNotifications( true )
+			.always( function () {
+				widget.popPending();
+				widget.emit( 'finishLoading' );
+				widget.promiseRunning = false;
+			} );
+	};
+} )( mediaWiki );