mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-12-01 02:46:46 +00:00
398 lines
11 KiB
JavaScript
398 lines
11 KiB
JavaScript
/*global window:false */
|
|
( function ( $, mw ) {
|
|
'use strict';
|
|
|
|
// backwards compatibility <= MW 1.21
|
|
var getUrl = mw.util.getUrl || mw.util.wikiGetlink;
|
|
|
|
function EchoOverlay( apiResultNotifications ) {
|
|
this.api = mw.echo.overlay.api;
|
|
// set internal properties
|
|
this.tabs = [];
|
|
this._buildOverlay( apiResultNotifications );
|
|
}
|
|
|
|
function EchoOverlayTab( options, notifications ) {
|
|
this.api = mw.echo.overlay.api;
|
|
this.markOnView = options.markOnView;
|
|
this.markAsReadCallback = options.markAsReadCallback;
|
|
this.name = options.name;
|
|
this.unread = [];
|
|
this._buildList( notifications[this.name] );
|
|
}
|
|
|
|
EchoOverlayTab.prototype = {
|
|
unread: [],
|
|
getUnreadIds: function() {
|
|
return this.unread;
|
|
},
|
|
/**
|
|
* Mark all existing notifications as read
|
|
* @method
|
|
* @param integer id of a notification to mark as read
|
|
* @return jQuery.Deferred
|
|
*/
|
|
markAsRead: function( id ) {
|
|
var self = this, data;
|
|
// only need to mark as read if there is unread item
|
|
if ( this.unread.length ) {
|
|
data = {
|
|
'action' : 'echomarkread',
|
|
'token': mw.user.tokens.get( 'editToken' )
|
|
};
|
|
if ( id ) {
|
|
// If id is given mark that as read otherwise use all unread messages
|
|
data.list = id;
|
|
} else {
|
|
data.all = 1;
|
|
}
|
|
|
|
return this.api.post( mw.echo.desktop.appendUseLang( data ) ).then( function ( result ) {
|
|
return result.query.echomarkread;
|
|
} ).done( function( result ) {
|
|
// reset internal state of unread messages
|
|
if ( id ) {
|
|
if ( self.unread.indexOf( id ) > -1 ) {
|
|
self.unread.splice( self.unread.indexOf( id ), 1 );
|
|
}
|
|
} else {
|
|
self.unread = [];
|
|
}
|
|
self.markAsReadCallback( result, id );
|
|
} );
|
|
} else {
|
|
return new $.Deferred();
|
|
}
|
|
},
|
|
/**
|
|
* Builds an Echo notifications list
|
|
* @method
|
|
* @param string tabName the tab
|
|
* @param object notifications as returned by the api of notification items
|
|
* @return jQuery element
|
|
*/
|
|
_buildList: function( notifications ) {
|
|
var self = this,
|
|
$container = $( '<div class="mw-echo-notifications">' )
|
|
.data( 'tab', this )
|
|
.css( 'max-height', $( window ).height() - 134 ),
|
|
$ul = $( '<ul>' ).appendTo( $container );
|
|
|
|
$.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['*'] ) {
|
|
return;
|
|
}
|
|
|
|
$li.append( data['*'] )
|
|
.appendTo( $ul );
|
|
|
|
if ( !data.read ) {
|
|
$li.addClass( 'mw-echo-unread' );
|
|
self.unread.push( id );
|
|
if ( !self.markOnView ) {
|
|
$( '<button class="mw-ui-button mw-ui-quiet">×</button>' )
|
|
.on( 'click', function( ev ) {
|
|
ev.preventDefault();
|
|
self.markAsRead( $( this ).closest( 'li' ).data( 'notification-event' ) );
|
|
} ).appendTo( $li );
|
|
}
|
|
}
|
|
|
|
// 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 );
|
|
}
|
|
} );
|
|
|
|
if ( !this.markOnView && this.unread.length ) {
|
|
$( '<button class="mw-ui-button mw-ui-quiet">' )
|
|
.text( mw.msg( 'echo-mark-all-as-read' ) )
|
|
.on( 'click', function() {
|
|
var $btn = $( this );
|
|
self.markAsRead().done( function() {
|
|
self.$el.find( '.mw-echo-unread' ).removeClass( 'mw-echo-unread' );
|
|
$btn.remove();
|
|
} );
|
|
} )
|
|
.prependTo( $container );
|
|
}
|
|
this.$el = $container;
|
|
}
|
|
};
|
|
|
|
EchoOverlay.prototype = {
|
|
/**
|
|
* @var string the name of the tab that is currently active
|
|
*/
|
|
activeTabName: 'alert',
|
|
/**
|
|
* @var array a list of EchoOverlayTabs
|
|
*/
|
|
tabs: [],
|
|
/**
|
|
* @var object current count status of notification types
|
|
*/
|
|
notificationCount: {
|
|
/* @var integer length of all notifications (both unread and read) that will be visible in the overlay */
|
|
all: 0,
|
|
/* @var string a string representation the current number of unread notifications (1, 99, 99+) */
|
|
unread: '0',
|
|
/* @var integer the total number of all unread notifications including those not in the overlay */
|
|
unreadRaw: 0
|
|
},
|
|
|
|
/**
|
|
* FIXME: This should be pulled out of EchoOverlay and use an EventEmitter.
|
|
* @param newCount formatted count
|
|
* @param rawCount unformatted count
|
|
*/
|
|
updateBadgeCount: function ( newCount, rawCount ) {
|
|
var $badge = mw.echo.getBadge();
|
|
$badge.text( newCount );
|
|
|
|
if ( rawCount !== '0' && rawCount !== 0 ) {
|
|
$badge.addClass( 'mw-echo-unread-notifications' );
|
|
} else {
|
|
$badge.removeClass( 'mw-echo-unread-notifications' );
|
|
}
|
|
this.notificationCount.unread = newCount;
|
|
this.notificationCount.unreadRaw = rawCount;
|
|
},
|
|
|
|
configuration: mw.config.get( 'wgEchoOverlayConfiguration' ),
|
|
|
|
_getFooterElement: function() {
|
|
var $prefLink = $( '#pt-preferences a' ),
|
|
$overlayFooter = $( '<div>' )
|
|
.attr( 'id', 'mw-echo-overlay-footer' );
|
|
|
|
// add link to notifications archive
|
|
$overlayFooter.append(
|
|
$( '<a>' )
|
|
.attr( 'id', 'mw-echo-overlay-link' )
|
|
.addClass( 'mw-echo-grey-link' )
|
|
.attr( 'href', getUrl( 'Special:Notifications' ) )
|
|
.text( mw.msg( 'echo-overlay-link' ) )
|
|
.click( function () {
|
|
mw.echo.logInteraction( 'ui-archive-link-click', 'flyout' );
|
|
} )
|
|
.hover(
|
|
function() {
|
|
$( this ).removeClass( 'mw-echo-grey-link' );
|
|
},
|
|
function() {
|
|
$( this ).addClass( 'mw-echo-grey-link' );
|
|
}
|
|
)
|
|
);
|
|
|
|
// add link to notification preferences
|
|
$overlayFooter.append(
|
|
$( '<a>' )
|
|
.html( $prefLink.html() )
|
|
.attr( 'id', 'mw-echo-overlay-pref-link' )
|
|
.addClass( 'mw-echo-grey-link' )
|
|
.attr( 'href', $prefLink.attr( 'href' ) + '#mw-prefsection-echo' )
|
|
.click( function () {
|
|
mw.echo.logInteraction( 'ui-prefs-click', 'flyout' );
|
|
} )
|
|
.hover(
|
|
function() {
|
|
$( this ).removeClass( 'mw-echo-grey-link' );
|
|
},
|
|
function() {
|
|
$( this ).addClass( 'mw-echo-grey-link' );
|
|
}
|
|
)
|
|
);
|
|
return $overlayFooter;
|
|
},
|
|
|
|
_showTabList: function( tab ) {
|
|
var $lists = this.$el.find( '.mw-echo-notifications' ).hide();
|
|
|
|
this.activeTabName = tab.name;
|
|
$lists.each( function() {
|
|
if ( $( this ).data( 'tab' ).name === tab.name ) {
|
|
$( this ).show();
|
|
if ( tab.markOnView ) {
|
|
tab.markAsRead();
|
|
}
|
|
}
|
|
} );
|
|
},
|
|
|
|
|
|
_updateTitleElement: function() {
|
|
var $header;
|
|
$header = this.$el.find( '.mw-echo-overlay-title' );
|
|
this._getTitleElement().insertBefore( $header );
|
|
$header.remove();
|
|
},
|
|
|
|
_getTabsElement: function() {
|
|
var $li,
|
|
$ul = $( '<ul>' ), self = this;
|
|
|
|
$.each( this.tabs, function( i, echoTab ) {
|
|
var
|
|
tabName = echoTab.name,
|
|
// @todo: Unread value is inaccurate. If a user has more than mw.echo.overlay.notificationLimit
|
|
// API change needed
|
|
label = mw.msg( 'echo-notification-' + tabName, echoTab.getUnreadIds().length );
|
|
|
|
$li = $( '<li>' )
|
|
.appendTo( $ul );
|
|
|
|
$( '<a class="mw-ui-progressive">' )
|
|
.on( 'click', function() {
|
|
var $this = $( this );
|
|
$ul.find( 'a' ).removeClass( 'mw-ui-active' ).addClass( 'mw-ui-quiet' );
|
|
$this.addClass( 'mw-ui-active' ).removeClass( 'mw-ui-quiet');
|
|
self._showTabList( $this.data( 'tab' ) );
|
|
} )
|
|
.data( 'tab', echoTab )
|
|
.addClass( echoTab.name === self.activeTabName ? 'mw-ui-active' : 'mw-ui-quiet' )
|
|
.text( label ).appendTo( $li );
|
|
} );
|
|
return $ul;
|
|
},
|
|
|
|
getUnreadCount: function() {
|
|
var count = 0;
|
|
$.each( this.tabs, function( i, tab ) {
|
|
count += tab.getUnreadIds().length;
|
|
} );
|
|
return count;
|
|
},
|
|
|
|
_getTitleElement: function() {
|
|
var $title = $( '<div>' ).addClass( 'mw-echo-overlay-title' )
|
|
.append( this._getTabsElement() );
|
|
this._showTabList( this.tabs[0] );
|
|
return $title;
|
|
},
|
|
|
|
_buildOverlay: function ( notifications ) {
|
|
var tabs,
|
|
self = this,
|
|
options = {
|
|
markAsReadCallback: function( data, id ) {
|
|
self.updateBadgeCount( data.count, data.rawcount );
|
|
self._updateTitleElement();
|
|
if ( id ) {
|
|
self.$el.find( '[data-notification-event="' + id + '"]').removeClass( 'mw-echo-unread' )
|
|
.find( 'button' ).remove();
|
|
}
|
|
}
|
|
},
|
|
$overlay = $( '<div>' ).addClass( 'mw-echo-overlay' );
|
|
|
|
this.$el = $overlay;
|
|
|
|
if ( notifications.message.index.length ) {
|
|
tabs = [ { name: 'message' }, { name: 'alert', markOnView: true } ];
|
|
} else {
|
|
tabs = [ { name: 'alert', markOnView: true } ];
|
|
}
|
|
|
|
$.each( tabs, function( i, tabOptions ) {
|
|
var tab = new EchoOverlayTab( $.extend( tabOptions, options ), notifications );
|
|
self.$el.append( tab.$el );
|
|
self.tabs.push( tab );
|
|
self.notificationCount.all += notifications[tabOptions.name].index.length;
|
|
} );
|
|
this.activeTabName = this.tabs[0].name;
|
|
|
|
$overlay.prepend( this._getTitleElement() );
|
|
$overlay.append( this._getFooterElement() );
|
|
}
|
|
};
|
|
|
|
mw.echo.overlay = {
|
|
/**
|
|
* @var integer the maximum number of notifications to show in the overlay
|
|
*/
|
|
notificationLimit: 8,
|
|
/**
|
|
* @var mw.Api
|
|
*/
|
|
api: new mw.Api( { ajax: { cache: false } } ),
|
|
/**
|
|
* 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',
|
|
notsections : 'alert|message',
|
|
notgroupbysection: 1,
|
|
'notformat' : 'flyout',
|
|
'notlimit' : this.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();
|
|
}
|
|
);
|
|
}
|
|
};
|
|
} )( jQuery, mediaWiki );
|