diff --git a/modules/ui/mw.echo.ui.NotificationItemWidget.js b/modules/ui/mw.echo.ui.NotificationItemWidget.js index bf6946d6b..cdc2d1605 100644 --- a/modules/ui/mw.echo.ui.NotificationItemWidget.js +++ b/modules/ui/mw.echo.ui.NotificationItemWidget.js @@ -208,7 +208,8 @@ if ( this.model.getPrimaryUrl() ) { this.$element .attr( 'href', this.model.getPrimaryUrl() ) - .on( 'click', this.onPrimaryLinkClick.bind( this ) ); + .on( 'click', this.onPrimaryLinkClick.bind( this ) ) + .on( 'auxclick', this.onPrimaryLinkAuxclick.bind( this ) ); } }; @@ -227,6 +228,24 @@ return true; }; + /** + * Respond to primary link middle-click by immediately marking as read, + * then let the browser open the link in a new tab as normal. + * Opening the link would also mark as read, but this way the user gets immediate feedback. + * + * @param {Event} event + * + * @return {boolean} true + */ + mw.echo.ui.NotificationItemWidget.prototype.onPrimaryLinkAuxclick = function ( event ) { + if ( event.button === 1 ) { + this.$element.removeClass( 'mw-echo-ui-notificationItemWidget-initiallyUnseen' ); + this.markRead( true ); + } + // Don't prevent default action, let the browser take care of opening a new tab. + return true; + }; + /** * Manage a click on a dynamic secondary link. * We can't know what the link intends us to do in the API, so we trust the 'apiParams'