Initial work on showing unread messages indicator for chat rooms

src/config.js

@@ -151,6 +151,7 @@ require.config({
         "room_item":                "src/templates/room_item",
         "room_panel":               "src/templates/room_panel",
         "rooms_list":               "src/templates/rooms_list",
+        "rooms_list_item":          "src/templates/rooms_list_item",
         "roster":                   "src/templates/roster",
         "roster_filter":            "src/templates/roster_filter",
         "roster_item":              "src/templates/roster_item",

src/converse-bookmarks.js

@@ -421,7 +421,6 @@
                     var div = document.createElement('div');
                     div.innerHTML = tpl_bookmark({
                         'bookmarked': true,
-                        'can_leave_room': false,
                         'info_leave_room': __('Leave this room'),
                         'info_remove': __('Remove this bookmark'),
                         'info_remove_bookmark': __('Unbookmark this room'),

src/converse-roomslist.js

@@ -13,10 +13,10 @@
     define(["utils",
             "converse-core",
             "converse-muc",
-            "tpl!bookmark",
-            "tpl!rooms_list"
+            "tpl!rooms_list",
+            "tpl!rooms_list_item"
         ], factory);
-}(this, function (utils, converse, muc, tpl_bookmark, tpl_rooms_list) {
+}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
     var $ = converse.env.jQuery,
         Backbone = converse.env.Backbone,
         b64_sha1 = converse.env.b64_sha1,
@@ -50,6 +50,7 @@
                     this.model.on('add', this.renderRoomsListElement, this);
                     this.model.on('change:bookmarked', this.renderRoomsListElement, this);
                     this.model.on('change:name', this.renderRoomsListElement, this);
+                    this.model.on('change:num_unread', this.renderRoomsListElement, this);
                     this.model.on('remove', this.removeRoomsListElement, this);
 
                     var cachekey = 'converse.roomslist'+_converse.bare_jid;
@@ -117,8 +118,7 @@
                         name = item.get('name');
                     }
                     var div = document.createElement('div');
-                    div.innerHTML = tpl_bookmark(_.extend(item.toJSON(), {
-                        'can_leave_room': true,
+                    div.innerHTML = tpl_rooms_list_item(_.extend(item.toJSON(), {
                         'info_leave_room': __('Leave this room'),
                         'info_remove_bookmark': __('Unbookmark this room'),
                         'info_title': __('Show more information on this room'),
@@ -177,7 +177,7 @@
                     _converse.rooms_list_view.render();
                 }
             };
-            _converse.on('reconnected', afterReconnection);
+            _converse.api.listen.on('reconnected', afterReconnection);
         }
     });
 }));

src/converse-rosterview.js

@@ -937,9 +937,7 @@
                  * to be cleared, but if chatbox is scrolled up, then num_unread should not be cleared.
                  */
                 var chatbox = chatboxview.model;
-                if (chatbox.get('type') === 'chatroom') {
-                    // TODO
-                } else {
+                if (chatbox.get('type') !== 'chatroom') {
                     var contact = _.head(_converse.roster.where({'jid': chatbox.get('jid')}));
                     if (!_.isUndefined(contact) && !chatbox.isScrolledUp()) {
                         contact.save({'num_unread': 0});

src/templates/bookmark.html

 <dd class="available-chatroom" data-room-jid="{{{jid}}}">
 <a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
-{[ if (can_leave_room) { ]}
-<a class="right close-room icon-remove"
-   data-room-jid="{{{jid}}}" title="{{{info_leave_room}}}" href="#">&nbsp;</a>
-{[ } ]}
 <a class="right remove-bookmark icon-pushpin {[ if (bookmarked) { ]} button-on {[ } ]}"
    data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
    title="{{{info_remove_bookmark}}}" href="#">&nbsp;</a>

src/templates/rooms_list_item.html

+<dd class="available-chatroom {[ if (num_unread) { ]} unread-msgs {[ } ]}" data-room-jid="{{{jid}}}"> 
+{[ if (num_unread) { ]}
+    <span class="pulse"></span>
+    <span class="msgs-indicactor">{{{ num_unread }}}</span>
+{[ } ]}
+<a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
+<a class="right close-room icon-remove"
+   data-room-jid="{{{jid}}}" title="{{{info_leave_room}}}" href="#">&nbsp;</a>
+<a class="right remove-bookmark icon-pushpin {[ if (bookmarked) { ]} button-on {[ } ]}"
+   data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
+   title="{{{info_remove_bookmark}}}" href="#">&nbsp;</a>
+<a class="right room-info icon-room-info" data-room-jid="{{{jid}}}"
+   title="{{{info_title}}}" href="#">&nbsp;</a>
+</dd>