converse-bookmarks: Bugfix + make bookmark.html more generic

- Bugfix: Entire list was removed when last bookmark was removed.
- Make the template more generic so that it can be used for showing open chat
  rooms

src/converse-bookmarks.js

@@ -34,6 +34,7 @@
         Strophe = converse.env.Strophe,
         $iq = converse.env.$iq,
         b64_sha1 = converse.env.b64_sha1,
+        sizzle = converse.env.sizzle,
         _ = converse.env._;
 
     converse.plugins.add('converse-bookmarks', {
@@ -397,23 +398,40 @@
                 },
 
                 renderBookmarkListElement: function (item) {
-                    var $bookmark = $(tpl_bookmark({
-                            'name': item.get('name'),
-                            'jid': item.get('jid'),
-                            'open_title': __('Click to open this room'),
-                            'info_title': __('Show more information on this room'),
-                            'info_remove': __('Remove this bookmark')
-                        }));
-                    this.$('.bookmarks').append($bookmark);
+                    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'),
+                        'info_title': __('Show more information on this room'),
+                        'jid': item.get('jid'),
+                        'name': item.get('name'),
+                        'open_title': __('Click to open this room')
+                    });
+                    this.el.querySelector('.bookmarks').appendChild(div.firstChild);
+                    this.show();
+                },
+
+                show: function () {
                     if (!this.$el.is(':visible')) {
                         this.$el.show();
                     }
                 },
 
+                hide: function () {
+                    this.$el.hide();
+                },
+
                 removeBookmarkListElement: function (item) {
-                    this.$('[data-room-jid="'+item.get('jid')+'"]:first').parent().remove();
+                    var list_el = this.el.querySelector('.bookmarks');
+                    var el = _.head(sizzle('.available-chatroom[data-room-jid="'+item.get('jid')+'"]', list_el));
+                    if (el) {
+                        list_el.removeChild(el);
+                    }
                     if (this.model.length === 0) {
-                        this.$el.hide();
+                        this.hide();
                     }
                 },
 

src/templates/bookmark.html

@@ -1,7 +1,12 @@
-<dd class="available-chatroom">
-    <a class="open-room" data-room-jid="{{{jid}}}" title="{{{open_title}}}" href="#">{{{name}}}</a>
-    <a class="remove-bookmark icon-close" data-room-jid="{{{jid}}}" data-bookmark-name="{{{name}}}"
-       title="{{{info_remove}}}" href="#">&nbsp;</a>
-    <a class="room-info icon-room-info" data-room-jid="{{{jid}}}"
-       title="{{{info_title}}}" href="#">&nbsp;</a>
+<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 remove-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>