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