Add `slideUp` and `slideDown` methods

And use them in the roomslist plugin instead of the jQuery methods.
ALso removed the jQuery dependency in roomslist.

CHANGES.md

@@ -2,6 +2,7 @@
 
 ## 3.2.0 (Unreleased)
 
+- Removed jQuery from `converse-core`, `converse-vcard` and `converse-roomslist`. [jcbrand]
 - All promises are now native (or polyfilled) ES2015 Promises
   instead of jQuery's Deferred. [jcbrand]
 - #866 Add babel in order to support ES2015 syntax [jcbrand]

Makefile

@@ -148,7 +148,7 @@ css/mobile.min.css:: stamp-npm sass/*
 
 .PHONY: watch
 watch: stamp-bundler
-	$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
+	$(SASS) --watch -I ./node_modules/bourbon/app/assets/stylesheets/ sass/converse/converse.scss:css/converse.css sass/_muc_embedded.scss:css/converse-muc-embedded.css
 
 .PHONY: watchjs
 watchjs: stamp-npm

src/converse-roomslist.js

@@ -10,14 +10,13 @@
  * rooms in the "Rooms Panel" of the ControlBox.
  */
 (function (root, factory) {
-    define(["jquery.noconflict",
-            "utils",
+    define(["utils",
             "converse-core",
             "converse-muc",
             "tpl!rooms_list",
             "tpl!rooms_list_item"
         ], factory);
-}(this, function ($, utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
+}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
     const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env;
 
     converse.plugins.add('converse-roomslist', {
@@ -26,13 +25,12 @@
              * loaded by converse.js's plugin machinery.
              */
             const { _converse } = this,
-                { __,
-                ___ } = _converse;
+                  { __, ___ } = _converse;
 
             _converse.RoomsList = Backbone.Model.extend({
                 defaults: {
                     "toggle-state":  _converse.OPENED
-                },
+                }
             });
 
             _converse.RoomsListView = Backbone.View.extend({
@@ -44,6 +42,8 @@
                 },
 
                 initialize () {
+                    this.toggleRoomsList = _.debounce(this.toggleRoomsList, 600, {'leading': true});
+
                     this.model.on('add', this.renderRoomsListElement, this);
                     this.model.on('change:bookmarked', this.renderRoomsListElement, this);
                     this.model.on('change:name', this.renderRoomsListElement, this);
@@ -142,15 +142,17 @@
                     if (ev && ev.preventDefault) { ev.preventDefault(); }
                     const el = ev.target;
                     if (el.classList.contains("icon-opened")) {
-                        this.$('.open-rooms-list').slideUp('fast');
-                        this.list_model.save({'toggle-state': _converse.CLOSED});
-                        el.classList.remove("icon-opened");
-                        el.classList.add("icon-closed");
+                        utils.slideUp(this.el.querySelector('.open-rooms-list')).then(() => {
+                            this.list_model.save({'toggle-state': _converse.CLOSED});
+                            el.classList.remove("icon-opened");
+                            el.classList.add("icon-closed");
+                        });
                     } else {
-                        el.classList.remove("icon-closed");
-                        el.classList.add("icon-opened");
-                        this.$('.open-rooms-list').slideDown('fast');
-                        this.list_model.save({'toggle-state': _converse.OPENED});
+                        utils.slideDown(this.el.querySelector('.open-rooms-list')).then(() => {
+                            this.list_model.save({'toggle-state': _converse.OPENED});
+                            el.classList.remove("icon-closed");
+                            el.classList.add("icon-opened");
+                        });
                     }
                 }
             });

src/utils.js

@@ -206,7 +206,66 @@
             }
         },
 
+        slideDown: function (el, interval=0.6) {
+            return new Promise((resolve, reject) => {
+                if (_.isNil(el)) {
+                    const err = "Undefined or null element passed into slideDown"
+                    console.warn(err);
+                    reject(new Error(err));
+                }
+                let intval = el.getAttribute('data-slider-intval');
+                if (intval) {
+                    window.clearInterval(intval);
+                }
+                let h = 0;
+                const end_height = el.getAttribute('data-slider-height');
+                intval = window.setInterval(function () {
+                    h++;
+                    el.style.height = h + 'px';
+                    if (h >= end_height) {
+                        window.clearInterval(intval);
+                        el.style.height = '';
+                        el.style.overflow = '';
+                        el.removeAttribute('data-slider-intval');
+                        el.removeAttribute('data-slider-height');
+                        resolve();
+                    }
+                }, interval);
+                el.setAttribute('data-slider-intval', intval);
+            });
+        },
+
+        slideUp: function (el, interval=0.6) {
+            return new Promise((resolve, reject) => {
+                if (_.isNil(el)) {
+                    const err = "Undefined or null element passed into slideUp";
+                    console.warn(err);
+                    reject(new Error(err));
+                }
+                let intval = el.getAttribute('data-slider-intval');
+                if (intval) {
+                    window.clearInterval(intval);
+                }
+                let h = el.offsetHeight;
+                el.setAttribute('data-slider-height', h);
+                el.style.overflow = 'hidden';
+                intval = window.setInterval(function () {
+                    el.style.height = h + 'px';
+                    h--;
+                    if (h < 0) {
+                        window.clearInterval(intval);
+                        el.removeAttribute('data-slider-intval');
+                        resolve();
+                    }
+                }, interval);
+                el.setAttribute('data-slider-intval', intval);
+            });
+        },
+
         fadeIn: function (el, callback) {
+            if (_.isNil(el)) {
+                console.warn("Undefined or null element passed into fadeIn");
+            }
             if ($.fx.off) {
                 el.classList.remove('hidden');
                 if (_.isFunction(callback)) {