Jdlrobson has uploaded a new change for review.
https://gerrit.wikimedia.org/r/151991
Change subject: Hygiene: Introduce EchoOverlay initialisation class
......................................................................
Hygiene: Introduce EchoOverlay initialisation class
Not as scary as it looks. The change to _buildOverlay simply changes
indenting, and cleans up to reflect new parameter. Tests still pass ;-)
Only expose what's necessary on mw.echo.overlay
Change-Id: I2671a41af8188c14ad4c910396afa0d9000b6051
---
M modules/overlay/ext.echo.overlay.js
M tests/qunit/overlay/test_ext.echo.overlay.js
2 files changed, 128 insertions(+), 127 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Echo
refs/changes/91/151991/1
diff --git a/modules/overlay/ext.echo.overlay.js
b/modules/overlay/ext.echo.overlay.js
index f174b95..c520a4f 100644
--- a/modules/overlay/ext.echo.overlay.js
+++ b/modules/overlay/ext.echo.overlay.js
@@ -4,14 +4,15 @@
// backwards compatibility <= MW 1.21
var getUrl = mw.util.getUrl || mw.util.wikiGetlink,
+ notificationLimit = Math.floor( ( $( window ).height() - 134 )
/ 90 ),
api = new mw.Api( { ajax: { cache: false } } );
- mw.echo.overlay = {
- /**
- * @var mw.Api
- */
- api: api,
+ function EchoOverlay( apiResultNotifications ) {
+ this.api = api;
+ this._buildOverlay( apiResultNotifications );
+ }
+ EchoOverlay.prototype = {
/**
* @param newCount formatted count
* @param rawCount unformatted count
@@ -28,28 +29,6 @@
},
configuration: mw.config.get( 'wgEchoOverlayConfiguration' ),
-
- removeOverlay: function () {
- $( '.mw-echo-overlay, .mw-echo-overlay-pokey'
).fadeOut( 'fast',
- function () { $( this ).remove(); }
- );
- },
-
- /**
- * Set notification limit based on height of the window
- * @method
- * @return int
- */
- getNotificationLimit: function () {
- var notificationLimit = Math.floor( ( $( window
).height() - 134 ) / 90 );
-
- if ( notificationLimit < 1 ) {
- notificationLimit = 1;
- } else if ( notificationLimit > 8 ) {
- notificationLimit = 8;
- }
- return notificationLimit;
- },
_getMarkAsReadButton: function() {
var self = this;
@@ -183,113 +162,92 @@
return $title;
},
- /**
- * Builds an overlay element
- * @method
- * @param callback a callback which passes the newly created
overlay as a parameter
- */
- buildOverlay: function ( callback ) {
- var notificationLimit = this.getNotificationLimit(),
- $overlay = $( '<div>' ).addClass(
'mw-echo-overlay' ),
+ _buildOverlay: function ( notifications ) {
+ var $overlay = $( '<div>' ).addClass( 'mw-echo-overlay'
),
self = this,
- apiData;
+ unread = [],
+ unreadTotalCount = notifications.count,
+ unreadRawTotalCount = notifications.rawcount,
+ $ul = $( '<ul>' ).addClass(
'mw-echo-notifications' );
- apiData = {
- 'action' : 'query',
- 'meta' : 'notifications',
- 'notformat' : 'flyout',
- 'notlimit' : notificationLimit,
- 'notprop' : 'index|list|count'
- };
+ if ( unreadTotalCount !== undefined ) {
+ self.updateCount( unreadTotalCount,
unreadRawTotalCount );
+ }
+ $ul.css( 'max-height', notificationLimit * 95 + 'px' );
+ $.each( notifications.index, function ( index, id ) {
+ var $wrapper,
+ data = notifications.list[id],
+ $li = $( '<li>' )
+ .data( 'details', data )
+ .data( 'id', id )
+ .attr( {
+
'data-notification-category': data.category,
+
'data-notification-event': data.id,
+
'data-notification-type': data.type
+ } )
+ .addClass(
'mw-echo-notification' );
- this.api.get( mw.echo.desktop.appendUseLang( apiData )
).done( function ( result ) {
- var notifications = result.query.notifications,
- unread = [],
- unreadTotalCount =
result.query.notifications.count,
- unreadRawTotalCount =
result.query.notifications.rawcount,
- $ul = $( '<ul>' ).addClass(
'mw-echo-notifications' );
-
- if ( unreadTotalCount !== undefined ) {
- self.updateCount( unreadTotalCount,
unreadRawTotalCount );
- }
- $ul.css( 'max-height', notificationLimit * 95 +
'px' );
- $.each( notifications.index, function ( index,
id ) {
- var $wrapper,
- data = notifications.list[id],
- $li = $( '<li>' )
- .data( 'details', data )
- .data( 'id', id )
- .attr( {
-
'data-notification-category': data.category,
-
'data-notification-event': data.id,
-
'data-notification-type': data.type
- } )
- .addClass(
'mw-echo-notification' );
-
- if ( !data.read ) {
- $li.addClass( 'mw-echo-unread'
);
- unread.push( id );
- }
-
- if ( !data['*'] ) {
- return;
- }
-
- $li.append( data['*'] )
- .appendTo( $ul );
-
- // Grey links in the notification title
and footer (except on hover)
- $li.find( '.mw-echo-title a,
.mw-echo-notification-footer a' )
- .addClass( 'mw-echo-grey-link'
);
- $li.hover(
- function() {
- $( this ).find(
'.mw-echo-title a' ).removeClass( 'mw-echo-grey-link' );
- },
- function() {
- $( this ).find(
'.mw-echo-title a' ).addClass( 'mw-echo-grey-link' );
- }
- );
- // If there is a primary link, make the
entire notification clickable.
- // Yes, it is possible to nest <a> tags
via DOM manipulation,
- // and it works like one would expect.
- if ( $li.find(
'.mw-echo-notification-primary-link' ).length ) {
- $wrapper = $( '<a>' )
- .addClass(
'mw-echo-notification-wrapper' )
- .attr( 'href',
$li.find( '.mw-echo-notification-primary-link' ).attr( 'href' ) )
- .click( function() {
- if (
mw.echo.clickThroughEnabled ) {
- // Log
the clickthrough
-
mw.echo.logInteraction( 'notification-link-click', 'flyout', +data.id,
data.type );
- }
- } );
- } else {
- $wrapper = $('<div>').addClass(
'mw-echo-notification-wrapper' );
- }
-
- $li.wrapInner( $wrapper );
-
- mw.echo.setupNotificationLogging( $li,
'flyout' );
-
- // Set up each individual notification
with a close box and dismiss
- // interface if it is dismissable.
- if ( $li.find( '.mw-echo-dismiss'
).length ) {
- mw.echo.setUpDismissability(
$li );
- }
- } );
- self._getTitleElement(
notifications.index.length, unreadRawTotalCount, unreadTotalCount,
unread.length ).
- appendTo( $overlay );
-
- if ( $ul.find( 'li' ).length ) {
- $ul.appendTo( $overlay );
+ if ( !data.read ) {
+ $li.addClass( 'mw-echo-unread' );
+ unread.push( id );
}
- $overlay.append( self._getFooterElement() );
+ if ( !data['*'] ) {
+ return;
+ }
- callback( $overlay );
- self.markAllAsRead( unread );
- } ).fail( function () {
- window.location.href = $( '#pt-notifications a'
).attr( 'href' );
+ $li.append( data['*'] )
+ .appendTo( $ul );
+
+ // Grey links in the notification title and
footer (except on hover)
+ $li.find( '.mw-echo-title a,
.mw-echo-notification-footer a' )
+ .addClass( 'mw-echo-grey-link' );
+ $li.hover(
+ function() {
+ $( this ).find( '.mw-echo-title
a' ).removeClass( 'mw-echo-grey-link' );
+ },
+ function() {
+ $( this ).find( '.mw-echo-title
a' ).addClass( 'mw-echo-grey-link' );
+ }
+ );
+ // If there is a primary link, make the entire
notification clickable.
+ // Yes, it is possible to nest <a> tags via DOM
manipulation,
+ // and it works like one would expect.
+ if ( $li.find(
'.mw-echo-notification-primary-link' ).length ) {
+ $wrapper = $( '<a>' )
+ .addClass(
'mw-echo-notification-wrapper' )
+ .attr( 'href', $li.find(
'.mw-echo-notification-primary-link' ).attr( 'href' ) )
+ .click( function() {
+ if (
mw.echo.clickThroughEnabled ) {
+ // Log the
clickthrough
+
mw.echo.logInteraction( 'notification-link-click', 'flyout', +data.id,
data.type );
+ }
+ } );
+ } else {
+ $wrapper = $('<div>').addClass(
'mw-echo-notification-wrapper' );
+ }
+
+ $li.wrapInner( $wrapper );
+
+ mw.echo.setupNotificationLogging( $li, 'flyout'
);
+
+ // Set up each individual notification with a
close box and dismiss
+ // interface if it is dismissable.
+ if ( $li.find( '.mw-echo-dismiss' ).length ) {
+ mw.echo.setUpDismissability( $li );
+ }
} );
+ self._getTitleElement( notifications.index.length,
unreadRawTotalCount, unreadTotalCount, unread.length ).
+ appendTo( $overlay );
+
+ if ( $ul.find( 'li' ).length ) {
+ $ul.appendTo( $overlay );
+ }
+
+ $overlay.append( self._getFooterElement() );
+ self.markAllAsRead( unread );
+
+ this.$el = $overlay;
},
/**
* Mark a list of notifications as read
@@ -314,4 +272,46 @@
}
}
};
+
+ mw.echo.overlay = {
+ /**
+ * @var mw.Api
+ */
+ api: api,
+ /**
+ * Builds an overlay element
+ * @method
+ * @param callback a callback which passes the newly created
overlay as a parameter
+ */
+ buildOverlay: function( callback ) {
+ var apiData = {
+ 'action' : 'query',
+ 'meta' : 'notifications',
+ 'notformat' : 'flyout',
+ 'notlimit' : notificationLimit,
+ 'notprop' : 'index|list|count'
+ };
+
+ this.api.get( mw.echo.desktop.appendUseLang( apiData )
).done( function ( result ) {
+ var overlay = new EchoOverlay(
result.query.notifications );
+ callback( overlay.$el );
+ } ).fail( function () {
+ window.location.href = $( '#pt-notifications a'
).attr( 'href' );
+ } );
+ },
+ removeOverlay: function () {
+ $( '.mw-echo-overlay, .mw-echo-overlay-pokey'
).fadeOut( 'fast',
+ function () {
+ $( this ).remove();
+ }
+ );
+ },
+ };
+
+ // set notification limit
+ if ( notificationLimit < 1 ) {
+ notificationLimit = 1;
+ } else if ( notificationLimit > 8 ) {
+ notificationLimit = 8;
+ }
} )( jQuery, mediaWiki );
diff --git a/tests/qunit/overlay/test_ext.echo.overlay.js
b/tests/qunit/overlay/test_ext.echo.overlay.js
index 5ee1f82..3a8ac12 100644
--- a/tests/qunit/overlay/test_ext.echo.overlay.js
+++ b/tests/qunit/overlay/test_ext.echo.overlay.js
@@ -54,6 +54,7 @@
var $overlay;
mw.echo.overlay.buildOverlay( function( $o ) {
$overlay = $o;
+ console.log( $overlay );
} );
assert.strictEqual( $overlay.find( 'ul' ).length, 1, 'Overlay
contains a list of notifications.' );
assert.strictEqual( $overlay.find( 'li' ).length, 2, 'There are
two notifications.' );
--
To view, visit https://gerrit.wikimedia.org/r/151991
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I2671a41af8188c14ad4c910396afa0d9000b6051
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Echo
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
