Lafargue: Add desktop notification feature for WebKit-based browsers.

2 files changed, 57 insertions, 2 deletions

diff --git a/static/js/lafargue.js b/static/js/lafargue.js
index f1198cb..baf7112 100644
--- a/static/js/lafargue.js
+++ b/static/js/lafargue.js
@@ -1,10 +1,17 @@
 jQuery(function($) {
+    var notificationsp = false;
+
     if (WebSocket) {
         var websocket_base = $('head').attr('data-websocket-base');
         var open_socket = function() {
             var socket = new WebSocket(websocket_base + '/lafargue/events');
             socket.onmessage = function(event) {
-                $('.lafargue-list').prepend(event.data);
+                var message = JSON.parse(event.data);
+                $('.lafargue-list').prepend(message.html);
+                if (window.webkitNotifications && notificationsp) {
+                    var notification = window.webkitNotifications.createNotification(null, '', 'Lafargue', 'New message by ' + message.first_name);
+                    notification.show();
+                }
             };
             var reconnect = function() {
                 window.setTimeout(function() {
@@ -16,4 +23,40 @@ jQuery(function($) {
         };
         open_socket();
     }
+
+    var updateNotificationStatus = function() {
+        var status = $('#notification-status');
+        if (notificationsp) {
+            status.removeClass('bad');
+            status.addClass('good');
+            status.html('Notifications are ON.');
+        } else {
+            status.addClass('bad');
+            status.removeClass('good');
+            status.html('Notifications are OFF.');
+        }
+    };
+
+    var toggleNotifications = function() {
+        if (!notificationsp) {
+            if (!window.webkitNotifications.checkPermission() !== 0) {
+                window.webkitNotifications.requestPermission(function() {
+                    updateNotificationStatus();
+                });
+            }
+            notificationsp = true;
+        } else {
+            notificationsp = false;
+            updateNotificationStatus();
+        }
+    };
+
+    if (window.webkitNotifications) {
+        var notify_button = $('.notifications').append('<a href="#" class="notify"><div id="notification-status" class="notification bad">Notifications are OFF.</div></a>');
+        notify_button.click(toggleNotifications);
+        if (window.webkitNotifications.checkPermission() === 0) {
+            notificationsp = true;
+        }
+        updateNotificationStatus();
+    };
 });
diff --git a/static/style/benki.css b/static/style/benki.css
index 3904f47..c60e170 100644
--- a/static/style/benki.css
+++ b/static/style/benki.css
@@ -1,4 +1,4 @@
-#login-message {
+#notifications {
     text-align: right;
     position: absolute;
     right: 0;
@@ -17,3 +17,15 @@
     padding: 0.5em 1em 0.5em 1em;
     background-color: yellow;
 }
+
+.bad {
+    background-color: yellow;
+}
+
+.good {
+    background-color: green;
+}
+
+.notification {
+    padding: 0.5em 1em 0.5em 1em;
+}