mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/Echo
synced 2024-11-12 09:26:05 +00:00
d3c0494a17
This code will be enabled when Iba1d7863171268066bf7597182c57a0a2041497f relinquishes the responsibility for rendering the Echo notification badge and wiring up of the related JS. It makes 3 assumptions: 1) Minerva will expose a VERSION property on the skins.minerva.scripts module to tell Echo it can begin control of the functionality 2) A new hook `SkinMinervaReplaceNotificationsBadge` will run on the server side allowing Echo extension to render the Notifications badge in Minerva. 3) A new client side hook (echo.mobile) will fire whenever the Echo dialog is opened or closed. All code relating to Echo inside MobileFrontend and Minerva is moved here. CSS for the modules is kept in Minerva as skinStyles This code remains dormant until Iba1d7863171268066bf7597182c57a0a2041497f lands. It pre-registers a "to-be-created" hook SkinMinervaReplaceNotificationsBadge that substitutes the Minerva badge. It also watches the export value of skins.minerva.scripts for a VERSION value - when this appears it will take the signal that it should manage the frontend code. In the new system the mobile specific code is limited to the mobile version of Minerva. The desktop version of Echo loads on Minerva desktop - presenting an opportunity in future to consolidate both implementations to use the same component. The mobile version of Vector and Timeless for example will load the mobile overlay (with existing styling issues that we don't need to worry about right now given we don't officially support skins other than Minerva as mobile) Testers: * Check require( 'ext.echo.mobile' )(); inside initMobile inside ext.echo.init does not fire until Iba1d7863171268066bf7597182c57a0a2041497f is checked out. Depends-On: I1a66939d2b596094b419de40b370e79f09c85581 Bug: T221007 Change-Id: I09c27a084100b223662f84de6cbe01bebe1fe774
91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
var
|
|
mobile = mw.mobileFrontend.require( 'mobile.startup' ),
|
|
View = mobile.View,
|
|
Icon = mobile.Icon,
|
|
notificationIcon = new Icon( {
|
|
name: 'bellOutline-base20',
|
|
glyphPrefix: 'wikimedia'
|
|
} );
|
|
|
|
/**
|
|
* A notification button for displaying a notifications overlay
|
|
* @class NotificationButton
|
|
* @extends View
|
|
* @param {Object} options Configuration options
|
|
* @param {string} options.notificationIconClass e.g. mw-ui-icon for icon
|
|
* @param {boolean} options.hasUnseenNotifications whether the user has unseen notifications
|
|
* @param {number} options.notificationCountRaw number of unread notifications
|
|
* @param {string} options.title tooltip for badge
|
|
* @param {string} options.url to see all notifications
|
|
* @param {boolean} options.hasNotifications whether the user has unseen notifications
|
|
* @param {Function} options.onClick handler for when the badge is clicked
|
|
* @memberof NotificationBadge
|
|
* @instance
|
|
*/
|
|
function NotificationBadge( options ) {
|
|
var $el, $notificationAnchor,
|
|
count = options.notificationCountRaw || 0,
|
|
el = options.el;
|
|
|
|
if ( el ) {
|
|
// Learn properties based on current element
|
|
$el = $( el );
|
|
options.hasUnseenNotifications = $el.find( '.notification-unseen' ).length > 0;
|
|
options.hasNotifications = options.hasUnseenNotifications;
|
|
$notificationAnchor = $el.find( 'a' );
|
|
options.title = $notificationAnchor.attr( 'title' );
|
|
options.url = $notificationAnchor.attr( 'href' );
|
|
count = Number( $el.find( 'span' ).data( 'notification-count' ) );
|
|
}
|
|
View.call( this,
|
|
$.extend( {
|
|
notificationIconClass: notificationIcon.getClassName(),
|
|
hasNotifications: false,
|
|
hasUnseenNotifications: false,
|
|
notificationCountRaw: 0
|
|
}, options, {
|
|
isBorderBox: false
|
|
} )
|
|
);
|
|
this.url = options.url;
|
|
this.setCount( count );
|
|
if ( options.onClick ) {
|
|
this.$el.on( 'click', options.onClick );
|
|
}
|
|
}
|
|
|
|
OO.inheritClass( NotificationBadge, View );
|
|
|
|
NotificationBadge.prototype.template = mw.template.get( 'ext.echo.mobile', 'NotificationBadge.mustache' );
|
|
|
|
/**
|
|
* Update the notification count
|
|
* @memberof NotificationBadge
|
|
* @instance
|
|
* @param {number} count
|
|
*/
|
|
NotificationBadge.prototype.setCount = function ( count ) {
|
|
if ( count > 100 ) {
|
|
count = 100;
|
|
}
|
|
this.options.notificationCountRaw = count;
|
|
this.options.notificationCountString = mw.message( 'echo-badge-count',
|
|
mw.language.convertNumber( count )
|
|
).text();
|
|
this.options.isNotificationCountZero = count === 0;
|
|
this.render();
|
|
};
|
|
|
|
/**
|
|
* Marks all notifications as seen
|
|
*
|
|
* @memberof NotificationBadge
|
|
* @instance
|
|
*/
|
|
NotificationBadge.prototype.markAsSeen = function () {
|
|
this.options.hasUnseenNotifications = false;
|
|
this.render();
|
|
};
|
|
|
|
module.exports = NotificationBadge;
|