Add notification count inside a badge on the notification link.

Signed-off-by: Eric Riggs <ericriggs42@gmail.com>

HISTORY.rst

@@ -28,6 +28,7 @@ Next (2018-XX-XX)
 - Remove unused animate.css package.
 - Add page loading indicator.
 - Add periodic AJAX workers to update the value of the notifications link.
+- Add notification count inside a badge on the notification link.
 
 2.8 (2018-02-27)
 ================

mayan/apps/appearance/static/appearance/js/mayan_app.js

@@ -10,6 +10,29 @@ var App = function (parameters) {
 
 // Class methods and variables
 
+App.mayanNotificationBadge = function (options, data) {
+    // Callback to add the notifications count inside a badge markup
+    var notifications = data[options.attributeName];
+
+    if (notifications > 0) {
+        // Save the original link text before adding the initial badge markup
+        if (!options.element.data('mn-saved-text')) {
+            options.element.data('mn-saved-text', options.element.html());
+        }
+
+        options.element.html(
+            options.element.data('mn-saved-text') + ' <span class="badge">' + notifications + '</span>'
+        );
+    } else {
+        if (options.element.data('mn-saved-text')) {
+            // If there is a saved original link text, restore it
+            options.element.html(
+                options.element.data('mn-saved-text')
+            );
+        }
+    }
+}
+
 App.MultiObjectFormProcess = function ($form, options) {
     /*
      * ajaxForm callback to add the external item checkboxes to the
@@ -57,10 +80,25 @@ App.prototype.AJAXperiodicWorker = function (options) {
 
     $.ajax({
         complete: function() {
-            setTimeout(app.AJAXperiodicWorker, options.interval, options);
+            if (!options.app) {
+                // Preserve the app reference between consecutive calls
+                options.app = app;
+            }
+            setTimeout(options.app.AJAXperiodicWorker, options.interval, options);
         },
         success: function(data) {
-            options.element.text(data[options.attributeName]);
+            if (options.callback) {
+                // Conver the callback string to an actual function
+                var callbackFunction = window;
+
+                $.each(options.callback.split('.'), function (index, value) {
+                    callbackFunction = callbackFunction[value]
+                });
+
+                callbackFunction(options, data);
+            } else {
+                options.element.text(data[options.attributeName]);
+            }
         },
         url: options.APIURL
   });
@@ -75,6 +113,7 @@ App.prototype.setupAJAXperiodicWorkers = function () {
         app.AJAXperiodicWorker({
             attributeName: $this.data('apw-attribute'),
             APIURL: $this.data('apw-url'),
+            callback: $this.data('apw-callback'),
             element: $this,
             interval: $this.data('apw-interval'),
         });

mayan/apps/events/links.py

@@ -70,7 +70,7 @@ link_user_events = Link(
 link_user_notifications_list = Link(
     html_data={
         'apw-attribute': 'count', 'apw-interval': '5000',
-        'apw-url': '/api/notifications/'
+        'apw-url': '/api/notifications/',
-    }, icon='fa fa-bell', text=get_notification_count,
+        'apw-callback': 'App.mayanNotificationBadge'
-    view='events:user_notifications_list'
+    }, icon='fa fa-bell', text='', view='events:user_notifications_list'
 )