Initial work on adding chatroom bookmarks.

README.md

@@ -30,6 +30,7 @@ which shows you how to use the CDN (content delivery network) to quickly get a d
 -   In-band registration [XEP 77](http://xmpp.org/extensions/xep-0077.html)
 -   Contact rosters and groups
 -   Contact subscriptions
+-   Chat room bookmarks [XEP 48](http://xmpp.org/extensions/xep-0048.html)
 -   Roster item exchange [XEP 144](http://xmpp.org/extensions/tmp/xep-0144-1.1.html)
 -   Chat statuses (online, busy, away, offline)
 -   Custom status messages

config.js

@@ -47,6 +47,7 @@ require.config({
         
         // Converse
         "converse-api":             "src/converse-api",
+        "converse-bookmarks":       "src/converse-bookmarks",
         "converse-chatview":        "src/converse-chatview",
         "converse-controlbox":      "src/converse-controlbox",
         "converse-core":            "src/converse-core",
@@ -129,6 +130,7 @@ require.config({
         "chatbox":                  "src/templates/chatbox",
         "chatroom":                 "src/templates/chatroom",
         "chatroom_form":            "src/templates/chatroom_form",
+        "chatroom_bookmark_form":   "src/templates/chatroom_bookmark_form",
         "chatroom_password_form":   "src/templates/chatroom_password_form",
         "chatroom_nickname_form":   "src/templates/chatroom_nickname_form",
         "chatroom_sidebar":         "src/templates/chatroom_sidebar",

converse.js

@@ -21,6 +21,7 @@ if (typeof define !== 'undefined') {
 
         "converse-chatview",    // Renders standalone chat boxes for single user chat
         "converse-controlbox",  // The control box
+        "converse-bookmarks",   // XEP-0048 Bookmarks
         "converse-mam",         // XEP-0313 Message Archive Management
         "converse-muc",         // XEP-0045 Multi-user chat
         "converse-vcard",       // XEP-0054 VCard-temp

css/converse.css

@@ -1265,14 +1265,18 @@
   cursor: pointer;
   display: inline-block;
   float: right;
-  font-size: 9px;
+  font-size: 10px;
   margin: 0;
+  margin-left: 0.1em;
   margin-right: 0.2em;
   padding: 0.5em 0.5em 0.3em 0.5em;
   text-decoration: none; }
   #conversejs .chatbox-btn:active {
     position: relative;
     top: 1px; }
+  #conversejs .chatbox-btn.button-on {
+    background-color: white;
+    color: #F4A261; }
 #conversejs .chatbox {
   display: block;
   float: right;
@@ -1963,6 +1967,9 @@
   margin: 0.3em 0; }
 #conversejs .chat-head-chatroom {
   background-color: #E76F51; }
+  #conversejs .chat-head-chatroom .chatbox-btn.button-on {
+    background-color: white;
+    color: #E76F51; }
   #conversejs .chat-head-chatroom .chatroom-topic {
     color: white;
     font-size: 80%;
@@ -2070,6 +2077,9 @@
         #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
           font-size: 90%;
           color: #D24E2B; }
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
+        #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
+          display: block; }
   #conversejs .chatroom .chat-textarea {
     border-bottom-right-radius: 0; }
   #conversejs .chatroom .room-invite {

docs/CHANGES.md

@@ -7,6 +7,7 @@
 - New event ['rosterGroupsFetched'](https://conversejs.org/docs/html/development.html#rosterGroupsFetched) [jcbrand]
 - HTML templates are now loaded in the respective modules/plugins. [jcbrand]
 - Start improving Content-Security-Policy compatibility by removing inline CSS. [mathiasertl]
+- Add support for XEP-0048, chat room bookmarks [jcbrand]
 
 ## 2.0.0 (2016-09-16)
 - #656 Online users count not shown initially [amanzur]

sass/_chatbox.scss

@@ -64,6 +64,7 @@
         float: right;
         font-size: $box-close-font-size;
         margin: 0;
+        margin-left: 0.1em;
         margin-right: 0.2em;
         padding: 0.5em 0.5em 0.3em 0.5em;
         text-decoration: none;
@@ -71,6 +72,10 @@
             position: relative;
             top: 1px;
         }
+        &.button-on {
+            background-color: white;
+            color: $chat-head-color;
+        }
     }
     .chatbox {
         display: block;

sass/_chatrooms.scss

@@ -8,6 +8,12 @@
 
     .chat-head-chatroom {
         background-color: $chatroom-head-color;
+        .chatbox-btn {
+            &.button-on {
+                background-color: $chat-head-text-color;
+                color: $chatroom-head-color;
+            }
+        }
 
         .chatroom-topic {
             color: white;
@@ -134,6 +140,12 @@
                         font-size: 90%;
                         color: $error-color;
                     }
+                    .chatroom-form {
+                        label,
+                        input[type=text] {
+                            display: block;
+                        }
+                    }
                 }
             }
         }

sass/_variables.scss

@@ -75,4 +75,4 @@ $box-close-button-padding-top: 4px !default;
 $box-close-button-padding-bottom: 4px !default;
 $box-close-button-padding-left: 4px !default;
 $box-close-button-padding-right: 4px !default;
-$box-close-font-size: 9px !default;
+$box-close-font-size: 10px !default;

src/converse-api.js

@@ -5,10 +5,6 @@
 // Licensed under the Mozilla Public License (MPLv2)
 //
 /*global define */
-
-/* This is a Converse.js plugin which add support for multi-user chat rooms, as
- * specified in XEP-0045 Multi-user chat.
- */
 (function (root, factory) {
     define("converse-api", [
             "jquery",

src/converse-bookmarks.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 Backbone, define */
+
+/* This is a Converse.js plugin which add support for bookmarks specified
+ * in XEP-0048.
+ */
+(function (root, factory) {
+    define("converse-bookmarks", [
+            "jquery",
+            "underscore",
+            "moment_with_locales",
+            "strophe",
+            "utils",
+            "converse-core",
+            "converse-api",
+            "converse-muc",
+            "tpl!chatroom_bookmark_form"
+        ],
+        factory);
+}(this, function ($, _, moment, strophe, utils, converse, converse_api, muc, chatroom_bookmark_form) {
+
+    var __ = utils.__.bind(converse),
+        Strophe = converse_api.env.Strophe,
+        $iq = converse_api.env.$iq,
+        b64_sha1 = converse_api.env.b64_sha1;
+
+    // Add new HTML templates.
+    converse.templates.chatroom_bookmark_form = chatroom_bookmark_form;
+
+    converse_api.plugins.add('converse-bookmarks', {
+        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.
+            
+            RoomsPanel: {
+                /* TODO: show bookmarked rooms in the rooms panel */
+            },
+
+            ChatRoomView: {
+                events: {
+                    'click .toggle-bookmark': 'toggleBookmark'
+                },
+
+                render: function (options) {
+                    this._super.render.apply(this, arguments);
+                    var label_bookmark = _('Bookmark this room');
+                    // TODO: check if bookmarked, and if so, add button-on class
+                    this.$el.find('.chat-head-chatroom .icon-wrench').before(
+                        '<a class="chatbox-btn toggle-bookmark icon-pushpin" title="'+label_bookmark+'"></a>');
+                    return this;
+                },
+
+                renderBookmarkForm: function () {
+                    var $body = this.$('.chatroom-body');
+                    $body.children().addClass('hidden');
+                    $body.append(
+                        converse.templates.chatroom_bookmark_form({
+                            heading: __('Bookmark this room'),
+                            label_name: __('The name for this bookmark:'),
+                            label_autojoin: __('Would you like this room to be automatically joined upon startup?'),
+                            label_nick: __('What should your nickname for this room be?'),
+                            default_nick: this.model.get('nick'),
+                            label_submit: __('Save'),
+                            label_cancel: __('Cancel')
+                        }));
+                    this.$('.chatroom-form').submit(this.addBookmark.bind(this));
+                    this.$('.chatroom-form .button-cancel').on('click', this.cancelConfiguration.bind(this));
+                },
+
+                addBookmark: function (ev) {
+                    ev.preventDefault();
+
+                    converse.bookmarks.create({
+                        'id': this.model.get('id'),
+                        'autojoin': this.$el.find('.chatroom-form').find('input[name=autojoin]').val(),
+                        'name':  this.$el.find('.chatroom-form').find('input[name=name]').val(),
+                        'nick':  this.$el.find('.chatroom-form').find('input[name=nick]').val()
+                    });
+                    this.$('.icon-pushpin').addClass('button-on');
+
+                    var that = this,
+                        $form = $(ev.target);
+                    this.sendBookmarkStanza(
+                        $form.find('input[name="name"]').val(),
+                        $form.find('input[name="autojoin"]').prop('checked'),
+                        $form.find('input[name="nick"]').val()
+                    );
+                    this.$el.find('div.chatroom-form-container').hide(
+                        function () {
+                            $(this).remove();
+                            that.$('.chatroom-body').children().removeClass('hidden');
+                        });
+                },
+
+                sendBookmarkStanza: function (name, autojoin, nick) {
+                    name = name || converse.connection.jid;
+                    var stanza = $iq({
+                            'type': 'set',
+                            'from': converse.connection.jid,
+                        })
+                        .c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
+                            .c('publish', {'node': 'storage:bookmarks'})
+                                .c('item', {'id': 'current'})
+                                    .c('storage', {'xmlns':'storage:bookmarks'})
+                                        .c('conference', {
+                                            'name': name,
+                                            'autojoin': autojoin,
+                                            'jid': this.model.get('jid'), 
+                                        }).c('nick').t(nick).up()
+                                        .up()
+                                    .up()
+                                .up()
+                            .up()
+                        .up()
+                        .c('publish-options')
+                            .c('x', {'xmlns': Strophe.NS.XFORM, 'type':'submit'})
+                                .c('field', {'var':'FORM_TYPE', 'type':'hidden'})
+                                    .c('value').t('http://jabber.org/protocol/pubsub#publish-options').up().up()
+                                .c('field', {'var':'pubsub#persist_items'})
+                                    .c('value').t('true').up().up()
+                                .c('field', {'var':'pubsub#access_model'})
+                                    .c('value').t('whitelist');
+                    converse.connection.sendIQ(stanza, this.onBookmarkAdded, this.onBookmarkError);
+                },
+
+                onBookmarkAdded: function (iq) {
+                    converse.log("Bookmark successfully added");
+                    converse.log(iq);
+                },
+                    
+                onBookmarkError: function (iq) {
+                    converse.log("Error while trying to add bookmark");
+                    converse.log(iq);
+                    window.alert(__("Sorry, something went wrong while trying to save your bookmark."));
+                },
+
+                toggleBookmark: function (ev) {
+                    if (ev) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                    }
+                    if (!converse.bookmarks.get(this.model.get('id'))) {
+                        this.renderBookmarkForm();
+                    } else {
+                        converse.bookmarks.remove({
+                            'id': this.model.get('id')
+                        });
+                        this.$('.icon-pushpin').removeClass('button-on');
+                    }
+                }
+            }
+        },
+
+        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.Bookmarks = Backbone.Collection.extend({
+                
+                onCachedBookmarksFetched: function () {
+                    if (!window.sessionStorage.getItem(this.browserStorage.name) || this.models.length > 0) {
+                        // There weren't any cached bookmarks, so we query to XMPP
+                        // server
+                        var stanza = $iq({
+                            'from': converse.connection.jid,
+                            'type': 'get',
+                        }).c('pubsub', {'xmlns': Strophe.NS.PUBSUB})
+                            .c('items', {'node': 'storage:bookmarks'});
+                        converse.connection.sendIQ(stanza, this.onBookmarksReceived.bind(this), this.onBookmarksReceivedError);
+                    }
+                },
+
+                onBookmarksReceived: function (iq) {
+                    var rooms = $(iq).find('items[node="storage:bookmarks"] item[id="current"] storage conference');
+                    _.each(rooms, function (room) {
+                        this.create({
+                            'jid': room.jid,
+                            'name': room.name,
+                            'autojoin': room.autojoin,
+                            'nick': room.querySelector('nick').text
+                        });
+                    }.bind(this));
+                },
+
+                onBookmarksReceivedError: function (iq) {
+                    converse.log('Error while fetching bookmarks');
+                    converse.log(iq);
+                }
+            });
+
+            converse.initBookmarks = function () {
+                converse.bookmarks = new converse.Bookmarks();
+                var id = b64_sha1('converse.room-bookmarks');
+                converse.bookmarks.id = id;
+                converse.bookmarks.browserStorage = new Backbone.BrowserStorage[converse.storage](id);
+                converse.bookmarks.fetch({
+                    'add': true,
+                    'success': converse.bookmarks.onCachedBookmarksFetched.bind(converse.bookmarks),
+                    'error':  converse.bookmarks.onCachedBookmarksFetched.bind(converse.bookmarks)
+
+                });
+            };
+            converse.on('connected', converse.initBookmarks);
+            converse.on('reconnected', converse.initBookmarks);
+        }
+    });
+}));

src/converse-core.js

@@ -171,6 +171,7 @@
         Strophe.addNamespace('XFORM', 'jabber:x:data');
         Strophe.addNamespace('NICK', 'http://jabber.org/protocol/nick');
         Strophe.addNamespace('HINTS', 'urn:xmpp:hints');
+        Strophe.addNamespace('PUBSUB', 'http://jabber.org/protocol/pubsub');
 
         // Instance level constants
         this.TIMEOUTS = { // Set as module attr so that we can override in tests.

src/converse-muc.js

@@ -278,7 +278,11 @@
 
                 render: function () {
                     this.$el.attr('id', this.model.get('box_id'))
-                            .html(converse.templates.chatroom(this.model.toJSON()));
+                            .html(converse.templates.chatroom(
+                                    _.extend(this.model.toJSON(), {
+                                        info_close: __('Close and leave this room'),
+                                        info_configure: __('Configure this room'),
+                                    })));
                     this.renderChatArea();
                     window.setTimeout(converse.refreshWebkit, 50);
                     return this;

src/templates/chatroom.html

@@ -3,8 +3,8 @@
     <div class="dragresize dragresize-topleft"></div>
     <div class="dragresize dragresize-left"></div>
     <div class="chat-head chat-head-chatroom">
-        <a class="chatbox-btn close-chatbox-button icon-close"></a>
-        <a class="chatbox-btn configure-chatroom-button icon-wrench" style="display:none"></a>
+        <a class="chatbox-btn close-chatbox-button icon-close" title="{{info_close}}"></a>
+        <a class="chatbox-btn configure-chatroom-button icon-wrench" title="{{info_configure}} "style="display:none"></a>
         <div class="chat-title"> {{ _.escape(name) }} </div>
         <p class="chatroom-topic"><p/>
     </div>

src/templates/chatroom_bookmark_form.html

+<div class="chatroom-form-container">
+    <form class="pure-form converse-form chatroom-form">
+        <fieldset>
+            <legend>{{heading}}</legend>
+            <label>{{label_name}}</label>
+            <input type="text" name="name" required="required"/>
+            <label>{{label_autojoin}}</label>
+            <input type="checkbox" name="autojoin"/>
+            <label>{{label_nick}}</label>
+            <input type="text" name="nick" value="{{default_nick}}"/>
+        </fieldset>
+        <fieldset>
+            <input class="pure-button button-primary" type="submit" value="{{label_submit}}"/>
+            <input class="pure-button button-cancel" type="button" value="{{label_cancel}}"/>
+        </fieldset>
+    </form>
+</div>

tests/main.js

@@ -70,6 +70,7 @@ require([
                 "console-runner",
                 //"spec/transcripts",
                 "spec/converse",
+                "spec/bookmarks",
                 "spec/headline",
                 "spec/disco",
                 "spec/protocol",