Componentize dragresize

src/plugins/chatboxviews/templates/chats.js

@@ -9,7 +9,10 @@ export default () => {
             if (m.get('type') === CONTROLBOX_TYPE) {
                 return html`
                     <converse-controlbox-toggle class="${!m.get('closed') ? 'hidden' : ''}"></converse-controlbox-toggle>
-                    <converse-controlbox id="controlbox" class="chatbox ${m.get('closed') ? 'hidden' : ''}"></converse-controlbox>
+                    <converse-controlbox
+                        id="controlbox"
+                        class="chatbox ${m.get('closed') ? 'hidden' : ''}"
+                        style="${m.get('width') ? `width: ${m.get('width')}` : ''}"></converse-controlbox>
                 `;
             } else if (m.get('type') === CHATROOMS_TYPE) {
                 return html`

src/plugins/controlbox/templates/controlbox.js

@@ -2,6 +2,7 @@ import { html } from 'lit-html';
 
 export default (o) => html`
     <div class="flyout box-flyout">
+        <converse-dragresize></converse-dragresize>
         <div class="chat-head controlbox-head">
             ${o.sticky_controlbox ? '' : html`<a class="chatbox-btn close-chatbox-button fa fa-times"></a>` }
         </div>

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);

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

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

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`
-    <div class="dragresize dragresize-top"></div>
-    <div class="dragresize dragresize-topleft"></div>
-    <div class="dragresize dragresize-left"></div>
+export default () => html`
+    <div class="dragresize dragresize-top" @mousedown="${onStartVerticalResize}"></div>
+    <div class="dragresize dragresize-topleft" @mousedown="${onStartDiagonalResize}"></div>
+    <div class="dragresize dragresize-left" @mousedown="${onStartHorizontalResize}"></div>
 `;

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;

src/templates/chatbox.js

@@ -2,6 +2,7 @@ import { html } from "lit-html";
 
 export default (o) => html`
     <div class="flyout box-flyout">
+        <converse-dragresize></converse-dragresize>
         <div class="chat-head chat-head-chatbox row no-gutters"></div>
         <div class="chat-body">
             <div class="chat-content ${ o.show_send_button ? 'chat-content-sendbutton' : '' }" aria-live="polite">

src/templates/chatroom.js

@@ -2,6 +2,7 @@ import { html } from "lit-html";
 
 export default (o) => html`
     <div class="flyout box-flyout">
+        <converse-dragresize></converse-dragresize>
         <div class="chat-head chat-head-chatroom row no-gutters"></div>
         <div class="chat-body chatroom-body row no-gutters">
             <div class="chat-area col">