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

4 files changed, 69 insertions, 8 deletions

diff --git a/src/mulk/benki/book_marx.clj b/src/mulk/benki/book_marx.clj
index 80fac1e..5c556c2 100644
--- a/src/mulk/benki/book_marx.clj
+++ b/src/mulk/benki/book_marx.clj
@@ -87,8 +87,8 @@
   (let [marks (bookmarks-visible-by *user*)]
     (with-dbt
       (layout bookmarx-list-page "Book Marx"
-        [:div {:id "login-message"
-               :class "login-message"}
+        [:div {:id "notifications"
+               :class "notifications"}
          (login-message)]
         [:div
          ;;(.toString marks)
diff --git a/src/mulk/benki/lazychat.clj b/src/mulk/benki/lazychat.clj
index 6865d01..e2caaf8 100644
--- a/src/mulk/benki/lazychat.clj
+++ b/src/mulk/benki/lazychat.clj
@@ -20,7 +20,8 @@
             hiccup.core
             [lamina.core          :as lamina]
             [aleph.http           :as ahttp]
-            [aleph.formats        :as aformats])
+            [aleph.formats        :as aformats]
+            [clojure.data.json    :as json])
   (:import [org.apache.abdera Abdera]))
 
 
@@ -120,12 +121,17 @@
     [:div {:class "lafargue-message-body"}
      (sanitize-html (markdown->html (:content message)))]]))
 
+(defn render-message-as-json [message]
+  (json/json-str (assoc message
+                   :html (render-message message)
+                   :date nil)))
+
 
 (defpage "/lafargue" {}
   (with-dbt
     (layout lafargue-list-page "Lafargue Lazy Chat"
-      [:div {:id "login-message"
-             :class "login-message"}
+      [:div {:id "notifications"
+             :class "notifications"}
        (login-message)]
       [:div
        [:div {:id "lafargue-main-input-box" :class "lafargue-input-box"}
@@ -185,7 +191,7 @@
     (let [messages (filter* #(may-read? *user* %) lafargue-events)]
       (receive-all messages
                    (fn [msg]
-                     (async-push conn (render-message msg)))))
+                     (async-push conn (render-message-as-json msg)))))
     (async-push conn {:status 426})))
 
 (defpage [:any "/lafargue/post"] {content  :content, visibility :visibility
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;
+}