Skip to content

Instantly share code, notes, and snippets.

@jdlrobson
Last active March 20, 2019 23:34
Show Gist options
  • Save jdlrobson/a2e9755f1555fe3b6d4e6980c92a29be to your computer and use it in GitHub Desktop.
Save jdlrobson/a2e9755f1555fe3b6d4e6980c92a29be to your computer and use it in GitHub Desktop.
diff --git a/src/mobile.notifications.overlay/NotificationsOverlay.js b/src/mobile.notifications.overlay/NotificationsOverlay.js
index 06de6c4b2..b893a5e53 100644
--- a/src/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/src/mobile.notifications.overlay/NotificationsOverlay.js
@@ -2,28 +2,26 @@ var Overlay = require( '../mobile.startup/Overlay' ),
util = require( '../mobile.startup/util' ),
View = require( '../mobile.startup/View' ),
promisedView = require( '../mobile.startup/promisedView' ),
- mfExtend = require( '../mobile.startup/mfExtend' ),
Anchor = require( '../mobile.startup/Anchor' );
/**
- * Overlay for notifications
- * @class NotificationsOverlay
- * @extend Overlay
- * @uses mw.Api
+ * List of notifications
*
- * @param {Object} params Configuration options
+ * @param {mw.echo} echo class
+ * @param {OO.ui.ButtonWidget} markAllReadButton - a button that will be associated with the
+ * read status of the notifications list.
+ * @param {Function} onCountChange - receives one parameter - a capped (0-99 or 99+) count.
+ * @param {Function} onNotificationListRendered - callback rendered when the
+ * notifications list has rendered
+ * @return {View}
*/
-NotificationsOverlay = function ( params ) {
+function notificationsList( echo, markAllReadButton, onCountChange, onNotificationListRendered ) {
var wrapperWidget,
maxNotificationCount = mw.config.get( 'wgEchoMaxNotificationCount' ),
- echoApi = new mw.echo.api.EchoApi(),
- unreadCounter = new mw.echo.dm.UnreadNotificationCounter( echoApi, 'all', maxNotificationCount ),
- markAllReadButton = new OO.ui.ButtonWidget( {
- icon: 'checkAll',
- title: mw.msg( 'echo-mark-all-as-read' )
- } ),
- modelManager = new mw.echo.dm.ModelManager( unreadCounter, { type: [ 'message', 'alert' ] } ),
- controller = new mw.echo.Controller(
+ echoApi = new echo.api.EchoApi(),
+ unreadCounter = new echo.dm.UnreadNotificationCounter( echoApi, 'all', maxNotificationCount ),
+ modelManager = new echo.dm.ModelManager( unreadCounter, { type: [ 'message', 'alert' ] } ),
+ controller = new echo.Controller(
echoApi,
modelManager,
{
@@ -38,44 +36,11 @@ NotificationsOverlay = function ( params ) {
// Create a container which will be revealed when "more options" (...)
// is clicked on a notification. Hidden by default.
$moreOptions = util.parseHTML( '<div>' )
- .addClass( 'notifications-overlay-overlay position-fixed' ),
- options = util.extend( {}, {
- heading: '<strong>' + mw.message( 'notifications' ).escaped() + '</strong>',
- footerAnchor: new Anchor( {
- href: mw.util.getUrl( 'Special:Notifications' ),
- progressive: true,
- additionalClassNames: 'footer-link notifications-archive-link',
- label: mw.msg( 'echo-overlay-link' )
- } ).options,
- headerActions: [
- View.make(
- { class: 'notifications-overlay-header-markAllRead' },
- [ markAllReadButton.$element ]
- )
- ],
- isBorderBox: false,
- className: 'overlay notifications-overlay navigation-drawer'
- }, params ),
- // Anchor tag that corresponds to a notifications badge
- badge = options.badge,
- onCountChange = function ( cappedCount ) {
- badge.setCount( cappedCount );
- },
- onNotificationListRendered = function () {
- badge.markAsSeen();
- };
-
- Overlay.call( this, options );
-
- // On error use the url as a fallback
- if ( options.error ) {
- options.onError();
- return;
- }
+ .addClass( 'notifications-overlay-overlay position-fixed' );
- mw.echo.config.maxPrioritizedActions = 1;
+ echo.config.maxPrioritizedActions = 1;
- wrapperWidget = new mw.echo.ui.NotificationsWrapper( controller, modelManager, {
+ wrapperWidget = new echo.ui.NotificationsWrapper( controller, modelManager, {
$overlay: $moreOptions
} );
@@ -117,8 +82,49 @@ NotificationsOverlay = function ( params ) {
);
};
-// The third parameter is essential. If not defined, per mfExtend,
-// prototype will not be copied across.
-mfExtend( NotificationsOverlay, Overlay, {} );
+/**
+ * Make a notification overlay
+ *
+ * @param {mw.echo} echo class
+ * @param {Function} onCountChange - receives one parameter - a capped (0-99 or 99+) count.
+ * @param {Function} onNotificationListRendered - callback rendered when the
+ * notifications list has rendered
+ * @return {Overlay}
+ */
+function notificationsOverlay( echo, onCountChange, onNotificationListRendered ) {
+ var markAllReadButton,
+ oouiPromise = mw.loader.using( 'mobile.notifications.overlay' ).then( function () {
+ markAllReadButton = new OO.ui.ButtonWidget( {
+ icon: 'checkAll',
+ title: mw.msg( 'echo-mark-all-as-read' )
+ } );
+ return View.make(
+ { class: 'notifications-overlay-header-markAllRead' },
+ [ markAllReadButton.$element ]
+ );
+ } ),
+ markAllReadButtonView = promisedView( oouiPromise );
+
+ return Overlay.make(
+ {
+ heading: '<strong>' + mw.message( 'notifications' ).escaped() + '</strong>',
+ footerAnchor: new Anchor( {
+ href: mw.util.getUrl( 'Special:Notifications' ),
+ progressive: true,
+ additionalClassNames: 'footer-link notifications-archive-link',
+ label: mw.msg( 'echo-overlay-link' )
+ } ).options,
+ headerActions: [ markAllReadButtonView ],
+ isBorderBox: false,
+ className: 'overlay notifications-overlay navigation-drawer'
+ },
+ promisedView(
+ oouiPromise.then( function () {
+ var list = mw.mobileFrontend.require( 'mobile.notifications.overlay' ).list;
+ return list( echo, markAllReadButton, onCountChange, onNotificationListRendered );
+ } )
+ )
+ );
+}
-module.exports = NotificationsOverlay;
+module.exports = notificationsList;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment