Remove jquery from converse-dragresize

src/converse-dragresize.js

@@ -7,14 +7,13 @@
 /*global define, window */
 
 (function (root, factory) {
-    define(["jquery.noconflict",
-            "converse-core",
+    define(["converse-core",
             "tpl!dragresize",
             "converse-chatview",
             "converse-muc", // XXX: would like to remove this
             "converse-controlbox"
     ], factory);
-}(this, function ($, converse, tpl_dragresize) {
+}(this, function (converse, tpl_dragresize) {
     "use strict";
     const { _ } = converse.env;
 
@@ -58,13 +57,13 @@
             registerGlobalEventHandlers () {
                 const that = this;
 
-                $(document).on('mousemove', function (ev) {
+                document.addEventListener('mousemove', function (ev) {
                     if (!that.resizing || !that.allow_dragresize) { return true; }
                     ev.preventDefault();
                     that.resizing.chatbox.resizeChatBox(ev);
                 });
 
-                $(document).on('mouseup', function (ev) {
+                document.addEventListener('mouseup', function (ev) {
                     if (!that.resizing || !that.allow_dragresize) { return true; }
                     ev.preventDefault();
                     const height = that.applyDragResistance(
@@ -110,7 +109,7 @@
                 },
 
                 initialize () {
-                    $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
+                    window.addEventListener('resize', _.debounce(this.setDimensions.bind(this), 100));
                     this.__super__.initialize.apply(this, arguments);
                 },
 
@@ -125,7 +124,7 @@
                     // If a custom width is applied (due to drag-resizing),
                     // then we need to set the width of the .chatbox element as well.
                     if (this.model.get('width')) {
-                        this.$el.css('width', this.model.get('width'));
+                        this.el.style.width = this.model.get('width');
                     }
                 },
 
@@ -138,18 +137,20 @@
                     /* Determine and store the default box size.
                      * We need this information for the drag-resizing feature.
                      */
-                    const { _converse } = this.__super__;
-                    const $flyout = this.$el.find('.box-flyout');
+                    const { _converse } = this.__super__,
+                          flyout = this.el.querySelector('.box-flyout'),
+                          style = window.getComputedStyle(flyout);
+
                     if (_.isUndefined(this.model.get('height'))) {
-                        const height = $flyout.height();
-                        const width = $flyout.width();
+                        const height = parseInt(style.height.replace(/px$/, ''), 10),
+                              width = parseInt(style.width.replace(/px$/, ''), 10);
                         this.model.set('height', height);
                         this.model.set('default_height', height);
                         this.model.set('width', width);
                         this.model.set('default_width', width);
                     }
-                    const min_width = $flyout.css('min-width');
-                    const min_height = $flyout.css('min-height');
+                    const min_width = style['min-width'];
+                    const min_height = style['min-height'];
                     this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
                     this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
                     // Initialize last known mouse position
@@ -176,7 +177,7 @@
                     } else {
                         height = "";
                     }
-                    this.$el.children('.box-flyout')[0].style.height = height;
+                    this.el.querySelector('.box-flyout').style.height = height;
                 },
 
                 setChatBoxWidth (width) {
@@ -187,7 +188,7 @@
                         width = "";
                     }
                     this.el.style.width = width;
-                    this.$el.children('.box-flyout')[0].style.width = width;
+                    this.el.querySelector('.box-flyout').style.width = width;
                 },
 
 
@@ -211,7 +212,9 @@
                     const { _converse } = this.__super__;
                     if (!_converse.allow_dragresize) { return true; }
                     // Record element attributes for mouseMove().
-                    this.height = this.$el.children('.box-flyout').height();
+                    const flyout = this.el.querySelector('.box-flyout'),
+                          style = window.getComputedStyle(flyout);
+                    this.height = parseInt(style.height.replace(/px$/, ''), 10);
                     _converse.resizing = {
                         'chatbox': this,
                         'direction': 'top'
@@ -222,7 +225,9 @@
                 onStartHorizontalResize (ev) {
                     const { _converse } = this.__super__;
                     if (!_converse.allow_dragresize) { return true; }
-                    this.width = this.$el.children('.box-flyout').width();
+                    const flyout = this.el.querySelector('.box-flyout'),
+                          style = window.getComputedStyle(flyout);
+                    this.width = parseInt(style.width.replace(/px$/, ''), 10);
                     _converse.resizing = {
                         'chatbox': this,
                         'direction': 'left'
@@ -267,7 +272,7 @@
                 },
 
                 initialize () {
-                    $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
+                    window.addEventListener('resize', _.debounce(this.setDimensions.bind(this), 100));
                     return this.__super__.initialize.apply(this, arguments);
                 },
 
@@ -287,7 +292,7 @@
                 },
 
                 initialize () {
-                    $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
+                    window.addEventListener('resize', _.debounce(this.setDimensions.bind(this), 100));
                     this.__super__.initialize.apply(this, arguments);
                 },
 
@@ -319,7 +324,7 @@
                 },
 
                 initialize () {
-                    $(window).on('resize', _.debounce(this.setDimensions.bind(this), 100));
+                    window.addEventListener('resize', _.debounce(this.setDimensions.bind(this), 100));
                     this.__super__.initialize.apply(this, arguments);
                 },