Disroot/converse.js
Disroot
/
converse.js
Archived
6
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Componentize dragresize

This commit is contained in:
JC Brand 2021-01-18 16:20:08 +01:00
parent 1949356ede
commit dea2eea919
9 changed files with 95 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/plugins/chatboxviews/templates/chats.js
View File

@ -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`

1
src/plugins/controlbox/templates/controlbox.js
View File

@ -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>

12
src/plugins/dragresize/components/dragresize.js Normal file
View File

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

65
src/plugins/dragresize/index.js
View File

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

69
src/plugins/dragresize/mixin.js
View File

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

11
src/plugins/dragresize/templates/dragresize.js
View File

@ -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>
`;

75
src/plugins/dragresize/utils.js
View File

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

1
src/templates/chatbox.js
View File

@ -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">

1
src/templates/chatroom.js
View File

@ -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">