Add system message notifications.

clientapp/app.js

@@ -9,6 +9,7 @@ var MainView = require('./views/main');
 var Router = require('./router');
 var Storage = require('./storage');
 var xmppEventHandlers = require('./helpers/xmppEventHandlers');
+var notifier = require('./helpers/notifications');
 
 
 module.exports = {
@@ -16,6 +17,8 @@ module.exports = {
         var self = window.app = this;
         var config = localStorage.config;
    
+        self.notifier = notifier;
+
         if (!config) {
             console.log('missing config');
             window.location = '/login';

clientapp/helpers/notifications.js

@@ -0,0 +1,60 @@
+// simple module for showing notifications using growl if in fluid app,
+// webkit notifications if present and permission granted and using UI Kit
+// as an in-browser fallback. #winning
+/*global ui */
+/* Here's the api... pretty simple
+{
+    title:  <text>,
+    description: <text>
+    sticky: <bool>,
+    callback: <fn>,
+    icon: <url of image>
+}
+*/
+var templates = require('../templates');
+
+exports.show = function (opts) {
+    var hideTimeout = 5000,
+        note;
+
+    // set default icon
+    opts.icon || (opts.icon = '/images/applogo.png');
+
+    if (window.macgap) {
+        window.macgap.growl.notify(opts);
+    } else if (window.fluid) {
+        window.fluid.showGrowlNotification(opts);
+    } else if (window.webkitNotifications && window.webkitNotifications.checkPermission() === 0) {
+        note = window.webkitNotifications.createNotification(opts.icon, opts.title, opts.description);
+        note.show();
+        if (!opts.sticky) {
+            setTimeout(function () {
+                note.cancel();
+            }, hideTimeout);
+        }
+        if (opts.onclick) note.onclick = opts.onclick;
+    } else {
+        // build some HTML since we want to include an image
+        note = ui.notify(templates.misc.growlMessage(opts)).closable();
+        if (opts.sticky) {
+            note.sticky();
+        } else {
+            note.hide(hideTimeout);
+        }
+        if (opts.onclick) note.on('click', opts.onclick);
+    }
+};
+
+exports.shouldAskPermission = function () {
+    return window.webkitNotifications && (window.webkitNotifications.checkPermission() !== 0) && (window.webkitNotifications.checkPermission() !== 2);
+};
+
+exports.askPermission = function (cb) {
+    if (!window.webkitNotifications) {
+        cb(false);
+    } else {
+        window.webkitNotifications.requestPermission(function () {
+            if (cb) cb(window.webkitNotifications.checkPermission() === 0);
+        });
+    }
+};

clientapp/helpers/xmppEventHandlers.js

@@ -217,8 +217,14 @@ module.exports = function (client, app) {
             //    });
             //}
 
-            if (!contact.activeContact) {
+            if (!contact.activeContact && msg.from.bare === contact.jid) {
                 contact.unreadCount++;
+                app.notifier.show({
+                    title: contact.displayName,
+                    description: msg.body,
+                    icon: contact.avatar,
+                    onclick: _.bind(app.navigate, app, '/chat/' + contact.jid)
+                });
             }
             contact.messages.add(message);
             if (!contact.lockedResource) {

clientapp/models/me.js

@@ -16,6 +16,7 @@ module.exports = HumanModel.define({
         status: ['string', true, ''],
         avatar: ['string', true, ''],
         connected: ['bool', true, false],
+        shouldAskForAlertsPermission: ['bool', true, false],
         _activeContact: ['string', true, '']
     },
     collections: {

clientapp/pages/main.js

@@ -1,4 +1,4 @@
-/*global app*/
+/*global app, me*/
 "use strict";
 
 var BasePage = require('./base');
@@ -7,7 +7,25 @@ var templates = require('../templates');
 
 module.exports = BasePage.extend({
     template: templates.pages.main,
+    classBindings: {
+        'shouldAskForAlertsPermission': '.enableAlerts'
+    },
+    events: {
+        'click .enableAlerts': 'enableAlerts'
+    },
     initialize: function (spec) {
+        me.shouldAskForAlertsPermission = app.notifier.shouldAskPermission();
         this.renderAndBind();
+    },
+    enableAlerts: function () {
+        app.notifier.askPermission(function () {
+            var shouldAsk = app.notifier.shouldAskPermission();
+            if (!shouldAsk) {
+                app.notifier.show({
+                    title: 'Ok, sweet!',
+                    description: "You'll now be notified of stuff that happens."
+                });
+            }
+        });
     }
 });

clientapp/templates.js

@@ -6,6 +6,7 @@ var jade = exports.jade=function(exports){Array.isArray||(Array.isArray=function
 
 // create our folder objects
 exports.includes = {};
+exports.misc = {};
 exports.pages = {};
 
 // body.jade compiled template
@@ -58,6 +59,33 @@ exports.includes.message = function anonymous(locals) {
     return buf.join("");
 };
 
+// growlMessage.jade compiled template
+exports.misc.growlMessage = function anonymous(locals) {
+    var buf = [];
+    with (locals || {}) {
+        buf.push('<div class="growlMessage">');
+        if (icon) {
+            buf.push("<img" + jade.attrs({
+                src: icon,
+                height: "30",
+                width: "30"
+            }, {
+                src: true,
+                height: true,
+                width: true
+            }) + "/>");
+        }
+        if (title) {
+            buf.push("<h1>" + jade.escape(null == (jade.interp = title) ? "" : jade.interp) + "</h1>");
+        }
+        if (description) {
+            buf.push("<p>" + jade.escape(null == (jade.interp = description) ? "" : jade.interp) + "</p>");
+        }
+        buf.push("</div>");
+    }
+    return buf.join("");
+};
+
 // chat.jade compiled template
 exports.pages.chat = function anonymous(locals) {
     var buf = [];
@@ -71,7 +99,7 @@ exports.pages.chat = function anonymous(locals) {
 exports.pages.main = function anonymous(locals) {
     var buf = [];
     with (locals || {}) {
-        buf.push('<section class="page main"><p>This space intentionally left blank.</p></section>');
+        buf.push('<section class="page main"><h1>This space intentionally blank</h1><button class="enableAlerts">Enable alerts</button></section>');
     }
     return buf.join("");
 };

clientapp/templates/misc/growlMessage.jade

@@ -0,0 +1,7 @@
+.growlMessage
+  if icon
+    img(src= icon, height="30", width="30")
+  if title
+    h1= title
+  if description
+    p= description

clientapp/templates/pages/main.jade

@@ -1,2 +1,3 @@
 section.page.main
-    p This space intentionally left blank.
+    h1 This space intentionally blank
+    button.enableAlerts Enable alerts

server.js

@@ -23,6 +23,7 @@ var clientApp = new Moonboots({
     developmentMode: config.isDev,
     libraries: [
         __dirname + '/clientapp/libraries/zepto.js',
+        __dirname + '/clientapp/libraries/ui.js',
         __dirname + '/clientapp/libraries/IndexedDBShim.min.js',
         __dirname + '/clientapp/libraries/stanza.io.js'
     ],