Componentize dragresize
This commit is contained in:
parent
1949356ede
commit
dea2eea919
@ -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`
|
||||
|
@ -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
12
src/plugins/dragresize/components/dragresize.js
Normal 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);
|
@ -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;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -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">
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user