From dea2eea9197df41af9c128bde707e8aeb62ae6e5 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Mon, 18 Jan 2021 16:20:08 +0100 Subject: [PATCH] Componentize dragresize --- src/plugins/chatboxviews/templates/chats.js | 5 +- .../controlbox/templates/controlbox.js | 1 + .../dragresize/components/dragresize.js | 12 +++ src/plugins/dragresize/index.js | 65 +--------------- src/plugins/dragresize/mixin.js | 69 +---------------- .../dragresize/templates/dragresize.js | 11 +-- src/plugins/dragresize/utils.js | 75 ++++++++++++++++--- src/templates/chatbox.js | 1 + src/templates/chatroom.js | 1 + 9 files changed, 95 insertions(+), 145 deletions(-) create mode 100644 src/plugins/dragresize/components/dragresize.js diff --git a/src/plugins/chatboxviews/templates/chats.js b/src/plugins/chatboxviews/templates/chats.js index d95684daf..5fe4e70e9 100644 --- a/src/plugins/chatboxviews/templates/chats.js +++ b/src/plugins/chatboxviews/templates/chats.js @@ -9,7 +9,10 @@ export default () => { if (m.get('type') === CONTROLBOX_TYPE) { return html` - + `; } else if (m.get('type') === CHATROOMS_TYPE) { return html` diff --git a/src/plugins/controlbox/templates/controlbox.js b/src/plugins/controlbox/templates/controlbox.js index e104943a6..6a19e72c0 100644 --- a/src/plugins/controlbox/templates/controlbox.js +++ b/src/plugins/controlbox/templates/controlbox.js @@ -2,6 +2,7 @@ import { html } from 'lit-html'; export default (o) => html`
+
${o.sticky_controlbox ? '' : html`` }
diff --git a/src/plugins/dragresize/components/dragresize.js b/src/plugins/dragresize/components/dragresize.js new file mode 100644 index 000000000..ff596bfb4 --- /dev/null +++ b/src/plugins/dragresize/components/dragresize.js @@ -0,0 +1,12 @@ +import tpl_dragresize from "../templates/dragresize.js"; +import { CustomElement } from 'components/element.js'; + + +class ConverseDragResize extends CustomElement { + + render () { // eslint-disable-line class-methods-use-this + return tpl_dragresize(this); + } +} + +customElements.define('converse-dragresize', ConverseDragResize); diff --git a/src/plugins/dragresize/index.js b/src/plugins/dragresize/index.js index b941e293d..155bcfcf3 100644 --- a/src/plugins/dragresize/index.js +++ b/src/plugins/dragresize/index.js @@ -3,9 +3,10 @@ * @copyright 2020, the Converse.js contributors * @license Mozilla Public License (MPLv2) */ +import './components/dragresize.js'; import 'plugins/chatview/index.js'; import 'plugins/controlbox/index.js'; -import { applyDragResistance, onMouseUp, onMouseMove, renderDragResizeHandles } from './utils.js'; +import { applyDragResistance, onMouseUp, onMouseMove } from './utils.js'; import DragResizableMixin from './mixin.js'; import { _converse, api, converse } from '@converse/headless/core'; @@ -33,8 +34,8 @@ converse.plugins.add('converse-dragresize', { ChatBox: { initialize () { const result = this.__super__.initialize.apply(this, arguments); - const height = this.get('height'), - width = this.get('width'); + const height = this.get('height'); + const 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')), @@ -44,50 +45,7 @@ converse.plugins.add('converse-dragresize', { } }, - 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(); @@ -99,21 +57,6 @@ converse.plugins.add('converse-dragresize', { 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; - } } }, diff --git a/src/plugins/dragresize/mixin.js b/src/plugins/dragresize/mixin.js index 93734edaf..c5d882b0e 100644 --- a/src/plugins/dragresize/mixin.js +++ b/src/plugins/dragresize/mixin.js @@ -1,4 +1,4 @@ -import { _converse, api } from '@converse/headless/core'; +import { _converse } from '@converse/headless/core'; import { applyDragResistance } from './utils.js'; import { debounce } from 'lodash-es'; @@ -62,14 +62,6 @@ const DragResizableMixin = { } }, - 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.style.width = this.model.get('width'); - } - }, - setDimensions () { // Make sure the chat box has the right height and width. this.adjustToViewport(); @@ -116,65 +108,6 @@ const DragResizableMixin = { } 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.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.querySelector('.box-flyout'); - const 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); } }; diff --git a/src/plugins/dragresize/templates/dragresize.js b/src/plugins/dragresize/templates/dragresize.js index 2dc065119..9e589a319 100644 --- a/src/plugins/dragresize/templates/dragresize.js +++ b/src/plugins/dragresize/templates/dragresize.js @@ -1,7 +1,8 @@ -import { html } from "lit-html"; +import { html } from 'lit-html'; +import { onStartDiagonalResize, onStartHorizontalResize, onStartVerticalResize } from '../utils.js'; -export default () => html` -
-
-
+export default () => html` +
+
+
`; diff --git a/src/plugins/dragresize/utils.js b/src/plugins/dragresize/utils.js index 795a2081d..7d8f2e618 100644 --- a/src/plugins/dragresize/utils.js +++ b/src/plugins/dragresize/utils.js @@ -1,6 +1,68 @@ -import tpl_dragresize from './templates/dragresize.js'; -import { _converse, api } from '@converse/headless/core'; -import { render } from 'lit-html'; +import { _converse, api, converse } from '@converse/headless/core'; + +const { u } = converse.env; + + +export function onStartVerticalResize (ev, trigger = true) { + if (!api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + // Record element attributes for mouseMove(). + const flyout = u.ancestor(ev.target, '.box-flyout'); + const style = window.getComputedStyle(flyout); + const chatbox_el = flyout.parentElement; + chatbox_el.height = parseInt(style.height.replace(/px$/, ''), 10); + _converse.resizing = { + 'chatbox': chatbox_el, + 'direction': 'top' + }; + chatbox_el.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', chatbox_el); + } +} + +export function onStartHorizontalResize (ev, trigger = true) { + if (!api.settings.get('allow_dragresize')) { + return true; + } + ev.preventDefault(); + const flyout = u.ancestor(ev.target, '.box-flyout'); + const style = window.getComputedStyle(flyout); + const chatbox_el = flyout.parentElement; + chatbox_el.width = parseInt(style.width.replace(/px$/, ''), 10); + _converse.resizing = { + 'chatbox': chatbox_el, + 'direction': 'left' + }; + chatbox_el.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', chatbox_el); + } +} + +export function onStartDiagonalResize (ev) { + onStartHorizontalResize(ev, false); + 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); +} /** * Applies some resistance to `value` around the `default_value`. @@ -23,13 +85,6 @@ export function applyDragResistance (value, default_value) { return value; } -export function renderDragResizeHandles (_converse, el) { - const flyout = el.querySelector('.box-flyout'); - const div = document.createElement('div'); - render(tpl_dragresize(), div); - flyout.insertBefore(div, flyout.firstChild); -} - export function onMouseMove (ev) { if (!_converse.resizing || !api.settings.get('allow_dragresize')) { return true; diff --git a/src/templates/chatbox.js b/src/templates/chatbox.js index d57f3add2..62f0118c4 100644 --- a/src/templates/chatbox.js +++ b/src/templates/chatbox.js @@ -2,6 +2,7 @@ import { html } from "lit-html"; export default (o) => html`
+
diff --git a/src/templates/chatroom.js b/src/templates/chatroom.js index acb06dc97..41a4a01f1 100644 --- a/src/templates/chatroom.js +++ b/src/templates/chatroom.js @@ -2,6 +2,7 @@ import { html } from "lit-html"; export default (o) => html`
+