Remove jQuery from converse-bookmarks

spec/bookmarks.js

@@ -482,12 +482,14 @@
                 test_utils.waitUntil(function () {
                     return $('#chatrooms dl.bookmarks dd:visible').length;
                 }, 300).then(function () {
+                    expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
                     expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);
                     $('#chatrooms .bookmarks-toggle').click();
-                    expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(0);
+                    expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeTruthy();
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.CLOSED);
                     $('#chatrooms .bookmarks-toggle').click();
+                    expect($('#chatrooms dl.bookmarks').hasClass('collapsed')).toBeFalsy();
                     expect($('#chatrooms dl.bookmarks dd:visible').length).toBe(1);
                     expect(_converse.bookmarksview.list_model.get('toggle-state')).toBe(_converse.OPENED);
                     done();

src/converse-bookmarks.js

@@ -10,8 +10,7 @@
  * in XEP-0048.
  */
 (function (root, factory) {
-    define(["jquery.noconflict",
-            "utils",
+    define(["utils",
             "converse-core",
             "converse-muc",
             "tpl!chatroom_bookmark_form",
@@ -21,8 +20,7 @@
         ],
         factory);
 }(this, function (
-        $,
-        utils,
+        u,
         converse,
         muc,
         tpl_chatroom_bookmark_form,
@@ -135,7 +133,7 @@
                         child.classList.add('hidden');
                     });
                     // Remove any existing forms
-                    _.each(body.querySelectorAll('.chatroom-form-container'), utils.removeElement);
+                    _.each(body.querySelectorAll('.chatroom-form-container'), u.removeElement);
 
                     body.insertAdjacentHTML(
                         'beforeend', 
@@ -163,18 +161,14 @@
                 onBookmarkFormSubmitted (ev) {
                     ev.preventDefault();
                     const { _converse } = this.__super__;
-                    const $form = $(ev.target), that = this;
                     _converse.bookmarks.createBookmark({
                         'jid': this.model.get('jid'),
-                        'autojoin': $form.find('input[name="autojoin"]').prop('checked'),
-                        'name':  $form.find('input[name=name]').val(),
-                        'nick':  $form.find('input[name=nick]').val()
+                        'autojoin': _.get(ev.target.querySelector('input[name="autojoin"]'), 'checked') || false,
+                        'name':  _.get(ev.target.querySelector('input[name=name]'), 'value'),
+                        'nick':  _.get(ev.target.querySelector('input[name=nick]'), 'value')
                     });
-                    this.$el.find('div.chatroom-form-container').hide(
-                        function () {
-                            $(this).remove();
-                            that.renderAfterTransition();
-                        });
+                    u.removeElement(this.el.querySelector('div.chatroom-form-container'));
+                    this.renderAfterTransition();
                 },
 
                 toggleBookmark (ev) {
@@ -249,6 +243,7 @@
 
             _converse.Bookmarks = Backbone.Collection.extend({
                 model: _converse.Bookmark,
+                comparator: 'name',
 
                 initialize () {
                     this.on('add', _.flow(this.openBookmarkedRoom, this.markRoomAsBookmarked));
@@ -270,7 +265,7 @@
                 },
 
                 fetchBookmarks () {
-                    const deferred = utils.getResolveablePromise();
+                    const deferred = u.getResolveablePromise();
                     if (this.browserStorage.records.length > 0) {
                         this.fetch({
                             'success': _.bind(this.onCachedBookmarksFetched, this, deferred),
@@ -363,12 +358,12 @@
                 },
 
                 onBookmarksReceived (deferred, iq) {
-                    const bookmarks = $(iq).find(
-                        'items[node="storage:bookmarks"] item[id="current"] storage conference'
-                    );
-                    const that = this;
-                    _.forEach(bookmarks, function (bookmark) {
-                        that.create({
+                    const bookmarks = sizzle(
+                        'items[node="storage:bookmarks"] item[id="current"] storage conference',
+                        iq
+                    )
+                    _.forEach(bookmarks, (bookmark) => {
+                        this.create({
                             'jid': bookmark.getAttribute('jid'),
                             'name': bookmark.getAttribute('name'),
                             'autojoin': bookmark.getAttribute('autojoin') === 'true',
@@ -392,7 +387,7 @@
 
             _converse.BookmarksView = Backbone.View.extend({
                 tagName: 'div',
-                className: 'bookmarks-list, rooms-list-container',
+                className: 'bookmarks-list rooms-list-container hidden',
                 events: {
                     'click .add-bookmark': 'addBookmark',
                     'click .bookmarks-toggle': 'toggleBookmarksList',
@@ -416,20 +411,19 @@
                 },
 
                 render () {
-                    this.$el.html(tpl_bookmarks_list({
+                    this.el.innerHTML = tpl_bookmarks_list({
                         'toggle_state': this.list_model.get('toggle-state'),
                         'desc_bookmarks': __('Click to toggle the bookmarks list'),
-                        'label_bookmarks': __('Bookmarks')
-                    })).hide();
-                    if (this.list_model.get('toggle-state') !== _converse.OPENED) {
-                        this.$('.bookmarks').hide();
-                    }
+                        'label_bookmarks': __('Bookmarks'),
+                        '_converse': _converse
+                    });
                     this.model.each(this.renderBookmarkListElement.bind(this));
                     const controlboxview = _converse.chatboxviews.get('controlbox');
                     if (!_.isUndefined(controlboxview)) {
-                        this.$el.prependTo(controlboxview.$('#chatrooms'));
+                        const chatrooms_el = controlboxview.el.querySelector('#chatrooms');
+                        chatrooms_el.insertAdjacentElement('afterbegin', this.el);
                     }
-                    return this.$el;
+                    return this;
                 },
 
                 removeBookmark: _converse.removeBookmarkViaEvent,
@@ -477,13 +471,11 @@
                 },
 
                 show () {
-                    if (!this.$el.is(':visible')) {
-                        this.$el.show();
-                    }
+                    u.showElement(this.el);
                 },
 
                 hide () {
-                    this.$el.hide();
+                    u.hideElement(this.el);
                 },
 
                 removeBookmarkListElement (item) {
@@ -499,14 +491,15 @@
 
                 toggleBookmarksList (ev) {
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
-                    const $el = $(ev.target);
-                    if ($el.hasClass("icon-opened")) {
-                        this.$('.bookmarks').slideUp('fast');
+                    if (u.hasClass(ev.target, 'icon-opened')) {
+                        u.slideIn(this.el.querySelector('.bookmarks'));
                         this.list_model.save({'toggle-state': _converse.CLOSED});
-                        $el.removeClass("icon-opened").addClass("icon-closed");
+                        ev.target.classList.remove("icon-opened");
+                        ev.target.classList.add("icon-closed");
                     } else {
-                        $el.removeClass("icon-closed").addClass("icon-opened");
-                        this.$('.bookmarks').slideDown('fast');
+                        ev.target.classList.remove("icon-closed");
+                        ev.target.classList.add("icon-opened");
+                        u.slideOut(this.el.querySelector('.bookmarks'));
                         this.list_model.save({'toggle-state': _converse.OPENED});
                     }
                 }

src/templates/bookmarks_list.html

@@ -1,2 +1,2 @@
 <a href="#" class="rooms-toggle bookmarks-toggle icon-{{{o.toggle_state}}}" title="{{{o.desc_bookmarks}}}">{{{o.label_bookmarks}}}</a>
-<dl class="bookmarks rooms-list"></dl>
+<dl class="bookmarks rooms-list {[ if (o.toggle_state !== o._converse.OPENED) { ]} hidden {[ } ]}"></dl>