Kaldari has uploaded a new change for review.
https://gerrit.wikimedia.org/r/81133
Change subject: Adding new notifications overlay
......................................................................
Adding new notifications overlay
Change-Id: I844b179f6d7972433afb9921755503abf96397dc
---
M includes/Resources.php
A javascripts/modules/notifications.js
A less/modules/notifications.less
A stylesheets/modules/notifications.css
A templates/overlays/notifications.html
5 files changed, 147 insertions(+), 0 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/MobileFrontend
refs/changes/33/81133/1
diff --git a/includes/Resources.php b/includes/Resources.php
index 01fb010..c4d6ea1 100644
--- a/includes/Resources.php
+++ b/includes/Resources.php
@@ -239,6 +239,8 @@
'localBasePath' => $localBasePath,
'localTemplateBasePath' => $localBasePath . '/templates',
'templates' => array(
+ // notifications.js
+ 'overlays/notifications',
// talk.js
'overlays/talk',
'overlays/talkSectionAdd',
@@ -271,10 +273,12 @@
'mobile.beta.common',
),
'styles' => array(
+ 'stylesheets/modules/notifications.css',
'stylesheets/modules/talk.css',
),
'scripts' => array(
'javascripts/modules/mf-toggle-dynamic.js',
+ 'javascripts/modules/notifications.js',
'javascripts/modules/talk/TalkSectionOverlay.js',
'javascripts/modules/talk.js',
'javascripts/common/user.js',
diff --git a/javascripts/modules/notifications.js
b/javascripts/modules/notifications.js
new file mode 100644
index 0000000..145a546
--- /dev/null
+++ b/javascripts/modules/notifications.js
@@ -0,0 +1,112 @@
+( function( M, $ ) {
+ var Overlay = M.require( 'Overlay' ),
+ api = M.require( 'api' ),
+ NotificationsOverlay;
+
+ NotificationsOverlay = Overlay.extend( {
+ active: false,
+ className: 'mw-mf-overlay list-overlay',
+ template: M.template.get( 'overlays/notifications' ),
+ defaults: {
+ heading: 'Notifications'
+ },
+ updateCount: function ( newCount ) {
+ var $badge = $( '#user-button span' );
+ $badge.text( newCount );
+ if ( newCount == 0 ) {
+ $badge.addClass( 'zero' );
+ } else {
+ $badge.removeClass( 'zero' );
+ }
+ },
+ initialize: function( options ) {
+ this._super( options );
+ },
+ postRender: function( options ) {
+ this._super( options );
+ var self = this,
+ $overlayContent = $( '.mw-mf-overlay
.container' );
+ if ( !options.error ) {
+ api.get( {
+ 'action' : 'query',
+ 'meta' : 'notifications',
+ 'notformat' : 'flyout',
+ 'allunread' : true,
+ 'notprop' : 'index|list|count'
+ } ).done( function ( result ) {
+ var notifications =
result.query.notifications,
+ $ul = $( '<ul
class="mw-mf-notifications"></ul>' );
+
+ // If there was a warning, that
means that Echo hasn't been updated yet.
+ if ( result.warnings !==
undefined ) {
+ window.location.href =
$( '#user-button' ).attr( 'href' );
+ }
+
+ $.each( notifications.index,
function ( index, id ) {
+ var data =
notifications.list[id],
+ $li = $(
'<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' )
+
.append( data['*'] )
+
.appendTo( $ul );
+
+ // If there is a
primary link, make the entire notification clickable.
+ if ( $li.find(
'.mw-echo-notification-primary-link' ).length ) {
+ $li.css(
'cursor', 'pointer' );
+ $li.click(
function() {
+ if (
mw.echo.clickThroughEnabled ) {
+
// Log the clickthrough
+
mw.echo.logInteraction( 'notification-link-click', 'flyout', +data.id,
data.type );
+ }
+
window.location.href = $li.find( '.mw-echo-notification-primary-link' ).attr(
'href' );
+ } );
+ }
+ } );
+
+ // Remove the spinner
+ $( '.container' ).removeClass(
'loading' );
+
+ // Add the notifications to the
overlay
+ if ( $ul.find( 'li' ).length ) {
+ $ul.appendTo(
$overlayContent );
+ }
+
+ // TODO: add link to archive
page.
+
+ // Reset the badge
+ self.updateCount( 0 );
+ } ).fail( function () {
+ // Fall back to notifications
archive page.
+ window.location.href = $(
'#user-button' ).attr( 'href' );
+ } );
+ } else {
+ window.location.href = $(
'#user-button' ).attr( 'href' );
+ }
+ }
+ } );
+
+ function initNotificationsButton() {
+ $( '#user-button' ).on( 'click', function( e ) {
+ e.preventDefault();
+ if ( !overlay ) {
+ overlay = new NotificationsOverlay();
+ }
+ overlay.show();
+ } );
+ }
+
+ function init() {
+ // reset the overlay in case a new page was loaded
+ overlay = null;
+ initNotificationsButton();
+ }
+ init();
+ M.on( 'page-loaded', init );
+
+}( mw.mobileFrontend, jQuery ) );
diff --git a/less/modules/notifications.less b/less/modules/notifications.less
new file mode 100644
index 0000000..e4a559d
--- /dev/null
+++ b/less/modules/notifications.less
@@ -0,0 +1,13 @@
+@import "../mixins.less";
+
+
+.mw-mf-overlay {
+ .container {
+ // For loading spinner
+ min-height: 100px;
+ }
+
+ .mw-mf-notifications {
+ list-style-type: none;
+ }
+}
diff --git a/stylesheets/modules/notifications.css
b/stylesheets/modules/notifications.css
new file mode 100644
index 0000000..dad4c32
--- /dev/null
+++ b/stylesheets/modules/notifications.css
@@ -0,0 +1,13 @@
+/**
+ * DO NOT EDIT THIS FILE
+ * This is an automatically generated css file.
+ * It was generated by LESS (http://lesscss.org).
+ * Please edit the corresponding less file instead.
+ * See README.mediawiki for details on installing.
+ */
+.mw-mf-overlay .container {
+ min-height: 100px;
+}
+.mw-mf-overlay .mw-mf-notifications {
+ list-style-type: none;
+}
diff --git a/templates/overlays/notifications.html
b/templates/overlays/notifications.html
new file mode 100644
index 0000000..4e1375e
--- /dev/null
+++ b/templates/overlays/notifications.html
@@ -0,0 +1,5 @@
+<div class="header">
+ <button class="cancel">{{closeMsg}}</button>
+ <h2>{{heading}}</h2>
+</div>
+<div class="container loading"></div>
--
To view, visit https://gerrit.wikimedia.org/r/81133
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I844b179f6d7972433afb9921755503abf96397dc
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/MobileFrontend
Gerrit-Branch: master
Gerrit-Owner: Kaldari <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
