Add plugin for HTML5 notifications. updates #443

converse.js

@@ -9,15 +9,17 @@ define("converse", ["converse-api",
      * --------------------
      * Any of the following components may be removed if they're not needed.
      */
-    "locales",          // Translations for converse.js. This line can be removed
-                        // to remove *all* translations, or you can modify the
-                        // file src/locales.js to include only those
-                        // translations that you care about.
+    "locales",              // Translations for converse.js. This line can be removed
+                            // to remove *all* translations, or you can modify the
+                            // file src/locales.js to include only those
+                            // translations that you care about.
 
-    "converse-muc",     // XEP-0045 Multi-user chat
-    "converse-otr",     // Off-the-record encryption for one-on-one messages
-    "converse-register",// XEP-0077 In-band registration
-    "converse-ping",    // XEP-0199 XMPP Ping
+    "converse-muc",         // XEP-0045 Multi-user chat
+    "converse-otr",         // Off-the-record encryption for one-on-one messages
+    "converse-controlbox",  // The control box
+    "converse-register",    // XEP-0077 In-band registration
+    "converse-ping",        // XEP-0199 XMPP Ping
+    "converse-notification",// HTML5 Notifications
     /* END: Removable components */
 
 ], function(converse_api) {

docs/CHANGES.md

@@ -9,6 +9,7 @@
   encrypted session. [jcbrand]
 - Removed the `account.logout` API, instead use `user.logout`. [jcbrand]
 - #261 `show_controlbox_by_default` config not working [diditopher]
+- #443 HTML5 notifications of received messages [jcbrand]
 - #566 Do not steal the focus when the chatbox opens automatically [rlanvin]
 - #573 xgettext build error: `'javascript' unknown` [jcbrand]
 - #587 Fix issue when logging out with `auto_logout=true` [davec82]

main.js

@@ -48,6 +48,7 @@ require.config({
         "converse-controlbox":      "src/converse-controlbox",
         "converse-core":            "src/converse-core",
         "converse-muc":             "src/converse-muc",
+        "converse-notification":    "src/converse-notification",
         "converse-otr":             "src/converse-otr",
         "converse-ping":            "src/converse-ping",
         "converse-register":        "src/converse-register",

src/converse-notification.js

+// Converse.js (A browser based XMPP chat client)
+// http://conversejs.org
+//
+// Copyright (c) 2012-2016, Jan-Carel Brand <jc@opkode.com>
+// Licensed under the Mozilla Public License (MPLv2)
+//
+/*global define */
+
+(function (root, factory) {
+    define("converse-notification", ["converse-core", "converse-api"], factory);
+}(this, function (converse, converse_api) {
+    "use strict";
+    var utils = converse_api.env.utils;
+    var Strophe = converse_api.env.Strophe;
+    // For translations
+    var __ = utils.__.bind(converse);
+    var ___ = utils.___;
+
+    if (!("Notification" in window)) {
+        // HTML5 notifications aren't supported.
+        converse.log(
+            "Not loading the notifications plugin because this browser "+
+            "doesn't support HTML5 notifications.");
+        return;
+    }
+    // Ask user to enable HTML5 notifications 
+    Notification.requestPermission();
+
+
+    converse_api.plugins.add('notification', {
+
+        overrides: {
+            // Overrides mentioned here will be picked up by converse.js's
+            // plugin architecture they will replace existing methods on the
+            // relevant objects or classes.
+            //
+            // New functions which don't exist yet can also be added.
+            
+            notifyOfNewMessage: function ($message) {
+                var result = this._super.notifyOfNewMessage.apply(this, arguments);
+                if (result && (this.windowState === 'blur') && (Notification.permission === "granted")) {
+                    this.showNotification($message);
+                }
+                return result;
+            }
+        },
+
+        initialize: function () {
+            /* The initialize function gets called as soon as the plugin is
+             * loaded by converse.js's plugin machinery.
+             */
+            var converse = this.converse;
+
+            converse.showNotification = function ($message) {
+                /* Show an HTML5 notification of a received message.
+                 */
+                var contact_jid = Strophe.getBareJidFromJid($message.attr('from'));
+                var roster_item = converse.roster.get(contact_jid);
+                var n = new Notification(__(___("%1$s says"), roster_item.get('fullname')), {
+                        body: $message.children('body').text(),
+                        lang: converse.i18n.locale_data.converse[""].lang,
+                        icon: 'logo/conversejs.png'
+                    });
+                setTimeout(n.close.bind(n), 5000); 
+            };
+        }
+    });
+}));