Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Remove jquery from converse-dragresize

Browse Source
This commit is contained in:
JC Brand 2018-01-03 16:08:45 +00:00
parent f1820e5fcd
commit 29b5c3e3c3
1 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/converse-dragresize.js
View File

@ -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);
},