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 */ /*global define, window */
(function (root, factory) { (function (root, factory) {
define(["jquery.noconflict", define(["converse-core",
"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 { _converse } = this.__super__,
const $flyout = this.$el.find('.box-flyout'); 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 height = parseInt(style.height.replace(/px$/, ''), 10),
const width = $flyout.width(); 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_width = style['min-width'];
const min_height = $flyout.css('min-height'); 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);
}, },