72df451bd3
Help with readability by using module.exports and require rather than the MobileFrontend provided mw.mobileFrontend module manager (and avoid adopting webpack at this time) Replace usages of mw.mobileFrontend.require with local require and module.exports (compatible with RL or Node implementation) Changes: * Notifications modules are merged into skins.minerva.scripts and initialised via a client side check. * new file overlayManager for exporting an overlayManager singleton rather than being hidden inside resources/skins.minerva.scripts/init.js * All M.define/M.requires swapped out for require where possible The `define` method is now forbidden in the repo. Bug: T212944 Change-Id: I44790dd3fc6fe42bb502d79c39c4081c223bf2b1
93 lines
2.7 KiB
JavaScript
93 lines
2.7 KiB
JavaScript
( function ( M ) {
|
|
var
|
|
mobile = M.require( 'mobile.startup' ),
|
|
mfExtend = mobile.mfExtend,
|
|
View = mobile.View,
|
|
util = mobile.util,
|
|
Icon = mobile.Icon,
|
|
notificationIcon = new Icon( {
|
|
name: 'notifications',
|
|
glyphPrefix: 'minerva'
|
|
} );
|
|
|
|
/**
|
|
* 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,
|
|
util.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 );
|
|
}
|
|
}
|
|
|
|
mfExtend( NotificationBadge, View, {
|
|
template: mw.template.get( 'skins.minerva.scripts', 'badge.mustache' ),
|
|
/**
|
|
* Update the notification count
|
|
* @memberof NotificationBadge
|
|
* @instance
|
|
* @param {number} count
|
|
*/
|
|
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
|
|
*/
|
|
markAsSeen: function () {
|
|
this.options.hasUnseenNotifications = false;
|
|
this.render();
|
|
}
|
|
} );
|
|
|
|
module.exports = NotificationBadge;
|
|
}( mw.mobileFrontend ) );
|