From 12bb9375f4547001c537fee9a1030958d440e949 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Tue, 29 Dec 2020 12:38:17 +0100 Subject: [PATCH] Move converse-dragresize plugin to folder --- src/converse.js | 2 +- src/plugins/dragresize.js | 382 ------------------ src/plugins/dragresize/index.js | 145 +++++++ src/plugins/dragresize/mixin.js | 181 +++++++++ .../dragresize}/templates/dragresize.html | 0 src/plugins/dragresize/utils.js | 61 +++ src/utils/html.js | 24 -- 7 files changed, 388 insertions(+), 407 deletions(-) delete mode 100644 src/plugins/dragresize.js create mode 100644 src/plugins/dragresize/index.js create mode 100644 src/plugins/dragresize/mixin.js rename src/{ => plugins/dragresize}/templates/dragresize.html (100%) create mode 100644 src/plugins/dragresize/utils.js diff --git a/src/converse.js b/src/converse.js index 1bf064173..7465c7c2b 100644 --- a/src/converse.js +++ b/src/converse.js @@ -17,7 +17,7 @@ import "shared/registry.js"; import "./plugins/bookmark-views.js"; // Views for XEP-0048 Bookmarks import "./plugins/chatview/index.js"; // Renders standalone chat boxes for single user chat import "./plugins/controlbox/index.js"; // The control box -import "./plugins/dragresize.js"; // Allows chat boxes to be resized by dragging them +import "./plugins/dragresize/index.js"; // Allows chat boxes to be resized by dragging them import "./plugins/fullscreen.js"; import "./plugins/mam-views.js"; import "./plugins/minimize.js"; // Allows chat boxes to be minimized diff --git a/src/plugins/dragresize.js b/src/plugins/dragresize.js deleted file mode 100644 index 7d8ae926a..000000000 --- a/src/plugins/dragresize.js +++ /dev/null @@ -1,382 +0,0 @@ -/** - * @module converse-dragresize - * @copyright 2020, the Converse.js contributors - * @license Mozilla Public License (MPLv2) - */ -import "./chatview/index.js"; -import "./controlbox/index.js"; -import { debounce } from "lodash-es"; -import { _converse, api, converse } from "@converse/headless/core"; -import tpl_dragresize from "../templates/dragresize.html"; - -const u = converse.env.utils; - -function renderDragResizeHandles (_converse, view) { - const flyout = view.el.querySelector('.box-flyout'); - const div = document.createElement('div'); - div.innerHTML = tpl_dragresize(); - flyout.insertBefore( - div, - flyout.firstChild - ); -} - - -converse.plugins.add('converse-dragresize', { - /* Plugin dependencies are other plugins which might be - * overridden or relied upon, and therefore need to be loaded before - * this plugin. - * - * If the setting "strict_plugin_dependencies" is set to true, - * an error will be raised if the plugin is not found. By default it's - * false, which means these plugins are only loaded opportunistically. - * - * NB: These plugins need to have already been loaded via require.js. - */ - dependencies: ["converse-chatview", "converse-headlines-view", "converse-muc-views"], - - enabled (_converse) { - return _converse.api.settings.get("view_mode") == 'overlayed'; - }, - - overrides: { - // Overrides mentioned here will be picked up by converse.js's - // plugin architecture they will replace existing methods on the - // relevant objects or classes. - ChatBox: { - initialize () { - const result = this.__super__.initialize.apply(this, arguments); - const height = this.get('height'), width = this.get('width'); - const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a); - save({ - 'height': u.applyDragResistance(height, this.get('default_height')), - 'width': u.applyDragResistance(width, this.get('default_width')), - }); - return result; - } - }, - - ChatBoxView: { - events: { - 'mousedown .dragresize-top': 'onStartVerticalResize', - 'mousedown .dragresize-left': 'onStartHorizontalResize', - 'mousedown .dragresize-topleft': 'onStartDiagonalResize' - }, - - render () { - const result = this.__super__.render.apply(this, arguments); - renderDragResizeHandles(this.__super__._converse, this); - this.setWidth(); - return result; - } - }, - - HeadlinesBoxView: { - events: { - 'mousedown .dragresize-top': 'onStartVerticalResize', - 'mousedown .dragresize-left': 'onStartHorizontalResize', - 'mousedown .dragresize-topleft': 'onStartDiagonalResize' - }, - - render () { - const result = this.__super__.render.apply(this, arguments); - renderDragResizeHandles(this.__super__._converse, this); - this.setWidth(); - return result; - } - }, - - ControlBoxView: { - events: { - 'mousedown .dragresize-top': 'onStartVerticalResize', - 'mousedown .dragresize-left': 'onStartHorizontalResize', - 'mousedown .dragresize-topleft': 'onStartDiagonalResize' - }, - - render () { - const result = this.__super__.render.apply(this, arguments); - renderDragResizeHandles(this.__super__._converse, this); - this.setWidth(); - return result; - }, - - renderLoginPanel () { - const result = this.__super__.renderLoginPanel.apply(this, arguments); - this.initDragResize().setDimensions(); - return result; - }, - - renderControlBoxPane () { - const result = this.__super__.renderControlBoxPane.apply(this, arguments); - this.initDragResize().setDimensions(); - return result; - } - }, - - ChatRoomView: { - events: { - 'mousedown .dragresize-top': 'onStartVerticalResize', - 'mousedown .dragresize-left': 'onStartHorizontalResize', - 'mousedown .dragresize-topleft': 'onStartDiagonalResize' - }, - - render () { - const result = this.__super__.render.apply(this, arguments); - renderDragResizeHandles(this.__super__._converse, this); - this.setWidth(); - return result; - } - } - }, - - initialize () { - /* The initialize function gets called as soon as the plugin is - * loaded by converse.js's plugin machinery. - */ - api.settings.extend({ - 'allow_dragresize': true, - }); - - - const dragResizable = { - - initDragResize () { - const view = this; - const debouncedSetDimensions = debounce(() => view.setDimensions()); - window.addEventListener('resize', view.debouncedSetDimensions) - this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions)); - - // Determine and store the default box size. - // We need this information for the drag-resizing feature. - const flyout = this.el.querySelector('.box-flyout'); - const style = window.getComputedStyle(flyout); - - if (this.model.get('height') === undefined) { - const height = parseInt(style.height.replace(/px$/, ''), 10); - const 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 = 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 - this.prev_pageY = 0; - this.prev_pageX = 0; - if (_converse.connection?.connected) { - this.height = this.model.get('height'); - this.width = this.model.get('width'); - } - return this; - }, - - resizeChatBox (ev) { - let diff; - if (_converse.resizing.direction.indexOf('top') === 0) { - diff = ev.pageY - this.prev_pageY; - if (diff) { - this.height = ((this.height-diff) > (this.model.get('min_height') || 0)) ? (this.height-diff) : this.model.get('min_height'); - this.prev_pageY = ev.pageY; - this.setChatBoxHeight(this.height); - } - } - if (_converse.resizing.direction.includes('left')) { - diff = this.prev_pageX - ev.pageX; - if (diff) { - this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width'); - this.prev_pageX = ev.pageX; - this.setChatBoxWidth(this.width); - } - } - }, - - setWidth () { - // 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.style.width = this.model.get('width'); - } - }, - - setDimensions () { - // Make sure the chat box has the right height and width. - this.adjustToViewport(); - this.setChatBoxHeight(this.model.get('height')); - this.setChatBoxWidth(this.model.get('width')); - }, - - setChatBoxHeight (height) { - if (height) { - height = u.applyDragResistance(height, this.model.get('default_height'))+'px'; - } else { - height = ""; - } - const flyout_el = this.el.querySelector('.box-flyout'); - if (flyout_el !== null) { - flyout_el.style.height = height; - } - }, - - setChatBoxWidth (width) { - if (width) { - width = u.applyDragResistance(width, this.model.get('default_width'))+'px'; - } else { - width = ""; - } - this.el.style.width = width; - const flyout_el = this.el.querySelector('.box-flyout'); - if (flyout_el !== null) { - flyout_el.style.width = width; - } - }, - - adjustToViewport () { - /* Event handler called when viewport gets resized. We remove - * custom width/height from chat boxes. - */ - const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); - const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); - if (viewport_width <= 480) { - this.model.set('height', undefined); - this.model.set('width', undefined); - } else if (viewport_width <= this.model.get('width')) { - this.model.set('width', undefined); - } else if (viewport_height <= this.model.get('height')) { - this.model.set('height', undefined); - } - }, - - onStartVerticalResize (ev, trigger=true) { - if (!api.settings.get('allow_dragresize')) { - return true; - } - ev.preventDefault(); - // Record element attributes for mouseMove(). - 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' - }; - this.prev_pageY = ev.pageY; - if (trigger) { - /** - * Triggered once the user starts to vertically resize a {@link _converse.ChatBoxView} - * @event _converse#startVerticalResize - * @example _converse.api.listen.on('startVerticalResize', (view) => { ... }); - */ - api.trigger('startVerticalResize', this); - } - }, - - onStartHorizontalResize (ev, trigger=true) { - if (!api.settings.get('allow_dragresize')) { - return true; - } - ev.preventDefault(); - 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' - }; - this.prev_pageX = ev.pageX; - if (trigger) { - /** - * Triggered once the user starts to horizontally resize a {@link _converse.ChatBoxView} - * @event _converse#startHorizontalResize - * @example _converse.api.listen.on('startHorizontalResize', (view) => { ... }); - */ - api.trigger('startHorizontalResize', this); - } - - }, - - onStartDiagonalResize (ev) { - this.onStartHorizontalResize(ev, false); - this.onStartVerticalResize(ev, false); - _converse.resizing.direction = 'topleft'; - /** - * Triggered once the user starts to diagonally resize a {@link _converse.ChatBoxView} - * @event _converse#startDiagonalResize - * @example _converse.api.listen.on('startDiagonalResize', (view) => { ... }); - */ - api.trigger('startDiagonalResize', this); - }, - }; - Object.assign(_converse.ChatBoxView.prototype, dragResizable); - - - u.applyDragResistance = function (value, default_value) { - /* This method applies some resistance around the - * default_value. If value is close enough to - * default_value, then default_value is returned instead. - */ - if (value === undefined) { - return undefined; - } else if (default_value === undefined) { - return value; - } - const resistance = 10; - if ((value !== default_value) && - (Math.abs(value- default_value) < resistance)) { - return default_value; - } - return value; - }; - - - function onMouseMove (ev) { - if (!_converse.resizing || !api.settings.get('allow_dragresize')) { - return true; - } - ev.preventDefault(); - _converse.resizing.chatbox.resizeChatBox(ev); - } - - - function onMouseUp (ev) { - if (!_converse.resizing || !api.settings.get('allow_dragresize')) { - return true; - } - ev.preventDefault(); - const height = u.applyDragResistance( - _converse.resizing.chatbox.height, - _converse.resizing.chatbox.model.get('default_height') - ); - const width = u.applyDragResistance( - _converse.resizing.chatbox.width, - _converse.resizing.chatbox.model.get('default_width') - ); - if (api.connection.connected()) { - _converse.resizing.chatbox.model.save({'height': height}); - _converse.resizing.chatbox.model.save({'width': width}); - } else { - _converse.resizing.chatbox.model.set({'height': height}); - _converse.resizing.chatbox.model.set({'width': width}); - } - _converse.resizing = null; - } - - /************************ BEGIN Event Handlers ************************/ - function registerGlobalEventHandlers () { - document.addEventListener('mousemove', onMouseMove); - document.addEventListener('mouseup', onMouseUp); - } - - function unregisterGlobalEventHandlers () { - document.removeEventListener('mousemove', onMouseMove); - document.removeEventListener('mouseup', onMouseUp); - } - - api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers); - api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers); - api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions()); - /************************ END Event Handlers ************************/ - } -}); diff --git a/src/plugins/dragresize/index.js b/src/plugins/dragresize/index.js new file mode 100644 index 000000000..189d62426 --- /dev/null +++ b/src/plugins/dragresize/index.js @@ -0,0 +1,145 @@ +/** + * @module converse-dragresize + * @copyright 2020, the Converse.js contributors + * @license Mozilla Public License (MPLv2) + */ +import 'plugins/chatview/index.js'; +import 'plugins/controlbox/index.js'; +import { applyDragResistance, onMouseUp, onMouseMove, renderDragResizeHandles } from './utils.js'; +import DragResizableMixin from './mixin.js'; +import { _converse, api, converse } from '@converse/headless/core'; + +converse.plugins.add('converse-dragresize', { + /* Plugin dependencies are other plugins which might be + * overridden or relied upon, and therefore need to be loaded before + * this plugin. + * + * If the setting "strict_plugin_dependencies" is set to true, + * an error will be raised if the plugin is not found. By default it's + * false, which means these plugins are only loaded opportunistically. + * + * NB: These plugins need to have already been loaded via require.js. + */ + dependencies: ['converse-chatview', 'converse-headlines-view', 'converse-muc-views'], + + enabled (_converse) { + return _converse.api.settings.get('view_mode') == 'overlayed'; + }, + + overrides: { + // Overrides mentioned here will be picked up by converse.js's + // plugin architecture they will replace existing methods on the + // relevant objects or classes. + ChatBox: { + initialize () { + const result = this.__super__.initialize.apply(this, arguments); + const height = this.get('height'), + width = this.get('width'); + const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a); + save({ + 'height': applyDragResistance(height, this.get('default_height')), + 'width': applyDragResistance(width, this.get('default_width')) + }); + return result; + } + }, + + ChatBoxView: { + events: { + 'mousedown .dragresize-top': 'onStartVerticalResize', + 'mousedown .dragresize-left': 'onStartHorizontalResize', + 'mousedown .dragresize-topleft': 'onStartDiagonalResize' + }, + + render () { + const result = this.__super__.render.apply(this, arguments); + renderDragResizeHandles(this.__super__._converse, this); + this.setWidth(); + return result; + } + }, + + HeadlinesBoxView: { + events: { + 'mousedown .dragresize-top': 'onStartVerticalResize', + 'mousedown .dragresize-left': 'onStartHorizontalResize', + 'mousedown .dragresize-topleft': 'onStartDiagonalResize' + }, + + render () { + const result = this.__super__.render.apply(this, arguments); + renderDragResizeHandles(this.__super__._converse, this); + this.setWidth(); + return result; + } + }, + + ControlBoxView: { + events: { + 'mousedown .dragresize-top': 'onStartVerticalResize', + 'mousedown .dragresize-left': 'onStartHorizontalResize', + 'mousedown .dragresize-topleft': 'onStartDiagonalResize' + }, + + render () { + const result = this.__super__.render.apply(this, arguments); + renderDragResizeHandles(this.__super__._converse, this); + this.setWidth(); + return result; + }, + + renderLoginPanel () { + const result = this.__super__.renderLoginPanel.apply(this, arguments); + this.initDragResize().setDimensions(); + return result; + }, + + renderControlBoxPane () { + const result = this.__super__.renderControlBoxPane.apply(this, arguments); + this.initDragResize().setDimensions(); + return result; + } + }, + + ChatRoomView: { + events: { + 'mousedown .dragresize-top': 'onStartVerticalResize', + 'mousedown .dragresize-left': 'onStartHorizontalResize', + 'mousedown .dragresize-topleft': 'onStartDiagonalResize' + }, + + render () { + const result = this.__super__.render.apply(this, arguments); + renderDragResizeHandles(this.__super__._converse, this); + this.setWidth(); + return result; + } + } + }, + + initialize () { + /* The initialize function gets called as soon as the plugin is + * loaded by converse.js's plugin machinery. + */ + api.settings.extend({ + 'allow_dragresize': true + }); + + Object.assign(_converse.ChatBoxView.prototype, DragResizableMixin); + + /************************ BEGIN Event Handlers ************************/ + function registerGlobalEventHandlers () { + document.addEventListener('mousemove', onMouseMove); + document.addEventListener('mouseup', onMouseUp); + } + + function unregisterGlobalEventHandlers () { + document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('mouseup', onMouseUp); + } + + api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers); + api.listen.on('unregisteredGlobalEventHandlers', unregisterGlobalEventHandlers); + api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions()); + } +}); diff --git a/src/plugins/dragresize/mixin.js b/src/plugins/dragresize/mixin.js new file mode 100644 index 000000000..8458a1a7f --- /dev/null +++ b/src/plugins/dragresize/mixin.js @@ -0,0 +1,181 @@ +import { _converse, api } from '@converse/headless/core'; +import { applyDragResistance } from './utils.js'; +import { debounce } from 'lodash-es'; + +const DragResizableMixin = { + initDragResize () { + const view = this; + const debouncedSetDimensions = debounce(() => view.setDimensions()); + window.addEventListener('resize', view.debouncedSetDimensions); + this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions)); + + // Determine and store the default box size. + // We need this information for the drag-resizing feature. + const flyout = this.el.querySelector('.box-flyout'); + const style = window.getComputedStyle(flyout); + + if (this.model.get('height') === undefined) { + const height = parseInt(style.height.replace(/px$/, ''), 10); + const 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 = 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 + this.prev_pageY = 0; + this.prev_pageX = 0; + if (_converse.connection?.connected) { + this.height = this.model.get('height'); + this.width = this.model.get('width'); + } + return this; + }, + + resizeChatBox (ev) { + let diff; + if (_converse.resizing.direction.indexOf('top') === 0) { + diff = ev.pageY - this.prev_pageY; + if (diff) { + this.height = + this.height - diff > (this.model.get('min_height') || 0) + ? this.height - diff + : this.model.get('min_height'); + this.prev_pageY = ev.pageY; + this.setChatBoxHeight(this.height); + } + } + if (_converse.resizing.direction.includes('left')) { + diff = this.prev_pageX - ev.pageX; + if (diff) { + this.width = + this.width + diff > (this.model.get('min_width') || 0) + ? this.width + diff + : this.model.get('min_width'); + this.prev_pageX = ev.pageX; + this.setChatBoxWidth(this.width); + } + } + }, + + setWidth () { + // 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.style.width = this.model.get('width'); + } + }, + + setDimensions () { + // Make sure the chat box has the right height and width. + this.adjustToViewport(); + this.setChatBoxHeight(this.model.get('height')); + this.setChatBoxWidth(this.model.get('width')); + }, + + setChatBoxHeight (height) { + if (height) { + height = applyDragResistance(height, this.model.get('default_height')) + 'px'; + } else { + height = ''; + } + const flyout_el = this.el.querySelector('.box-flyout'); + if (flyout_el !== null) { + flyout_el.style.height = height; + } + }, + + setChatBoxWidth (width) { + if (width) { + width = applyDragResistance(width, this.model.get('default_width')) + 'px'; + } else { + width = ''; + } + this.el.style.width = width; + const flyout_el = this.el.querySelector('.box-flyout'); + if (flyout_el !== null) { + flyout_el.style.width = width; + } + }, + + adjustToViewport () { + /* Event handler called when viewport gets resized. We remove + * custom width/height from chat boxes. + */ + const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); + const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); + if (viewport_width <= 480) { + this.model.set('height', undefined); + this.model.set('width', undefined); + } else if (viewport_width <= this.model.get('width')) { + this.model.set('width', undefined); + } else if (viewport_height <= this.model.get('height')) { + this.model.set('height', undefined); + } + }, + + onStartVerticalResize (ev, trigger = true) { + if (!api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + // Record element attributes for mouseMove(). + 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' + }; + this.prev_pageY = ev.pageY; + if (trigger) { + /** + * Triggered once the user starts to vertically resize a {@link _converse.ChatBoxView} + * @event _converse#startVerticalResize + * @example _converse.api.listen.on('startVerticalResize', (view) => { ... }); + */ + api.trigger('startVerticalResize', this); + } + }, + + onStartHorizontalResize (ev, trigger = true) { + if (!api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + 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' + }; + this.prev_pageX = ev.pageX; + if (trigger) { + /** + * Triggered once the user starts to horizontally resize a {@link _converse.ChatBoxView} + * @event _converse#startHorizontalResize + * @example _converse.api.listen.on('startHorizontalResize', (view) => { ... }); + */ + api.trigger('startHorizontalResize', this); + } + }, + + onStartDiagonalResize (ev) { + this.onStartHorizontalResize(ev, false); + this.onStartVerticalResize(ev, false); + _converse.resizing.direction = 'topleft'; + /** + * Triggered once the user starts to diagonally resize a {@link _converse.ChatBoxView} + * @event _converse#startDiagonalResize + * @example _converse.api.listen.on('startDiagonalResize', (view) => { ... }); + */ + api.trigger('startDiagonalResize', this); + } +}; + +export default DragResizableMixin; diff --git a/src/templates/dragresize.html b/src/plugins/dragresize/templates/dragresize.html similarity index 100% rename from src/templates/dragresize.html rename to src/plugins/dragresize/templates/dragresize.html diff --git a/src/plugins/dragresize/utils.js b/src/plugins/dragresize/utils.js new file mode 100644 index 000000000..3b6ba4e88 --- /dev/null +++ b/src/plugins/dragresize/utils.js @@ -0,0 +1,61 @@ +import tpl_dragresize from './templates/dragresize.html'; +import { _converse, api } from '@converse/headless/core'; + +/** + * Applies some resistance to `value` around the `default_value`. + * If value is close enough to `default_value`, then it is returned, otherwise + * `value` is returned. + * @param { Integer } value + * @param { Integer } default_value + * @returns { Integer } + */ +export function applyDragResistance (value, default_value) { + if (value === undefined) { + return undefined; + } else if (default_value === undefined) { + return value; + } + const resistance = 10; + if (value !== default_value && Math.abs(value - default_value) < resistance) { + return default_value; + } + return value; +} + +export function renderDragResizeHandles (_converse, view) { + const flyout = view.el.querySelector('.box-flyout'); + const div = document.createElement('div'); + div.innerHTML = tpl_dragresize(); + flyout.insertBefore(div, flyout.firstChild); +} + +export function onMouseMove (ev) { + if (!_converse.resizing || !api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + _converse.resizing.chatbox.resizeChatBox(ev); +} + +export function onMouseUp (ev) { + if (!_converse.resizing || !api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + const height = applyDragResistance( + _converse.resizing.chatbox.height, + _converse.resizing.chatbox.model.get('default_height') + ); + const width = applyDragResistance( + _converse.resizing.chatbox.width, + _converse.resizing.chatbox.model.get('default_width') + ); + if (api.connection.connected()) { + _converse.resizing.chatbox.model.save({ 'height': height }); + _converse.resizing.chatbox.model.save({ 'width': width }); + } else { + _converse.resizing.chatbox.model.set({ 'height': height }); + _converse.resizing.chatbox.model.set({ 'width': width }); + } + _converse.resizing = null; +} diff --git a/src/utils/html.js b/src/utils/html.js index eb7ccb7da..668beb8fa 100644 --- a/src/utils/html.js +++ b/src/utils/html.js @@ -155,30 +155,6 @@ u.getOOBURLMarkup = function (_converse, url) { } -/** - * Applies some resistance to `value` around the `default_value`. - * If value is close enough to `default_value`, then it is returned, otherwise - * `value` is returned. - * @method u#applyDragResistance - * @param { Integer } value - * @param { Integer } default_value - * @returns { Integer } - */ -u.applyDragResistance = function (value, default_value) { - if (value === undefined) { - return undefined; - } else if (default_value === undefined) { - return value; - } - const resistance = 10; - if ((value !== default_value) && - (Math.abs(value- default_value) < resistance)) { - return default_value; - } - return value; -}; - - /** * Return the height of the passed in DOM element, * based on the heights of its children.