Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Move functions for resizing the MUC sidebar to converse-muc-chatarea

Browse Source
This commit is contained in:
JC Brand 2021-03-11 10:50:37 +01:00
parent 4ca30c4b93
commit 349b6d616d
5 changed files with 87 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/plugins/muc-views/bottom_panel.js
View File

@ -71,11 +71,6 @@ export default class MUCBottomPanel extends BottomPanel {
this.mention_auto_complete.on('suggestion-box-selectcomplete', () => (this.auto_completing = false));
}
/**
* Hide the right sidebar containing the chat occupants.
* @private
* @method _converse.ChatRoomView#hideOccupants
*/
hideOccupants (ev) {
ev?.preventDefault?.();
ev?.stopPropagation?.();

83
src/plugins/muc-views/chatarea.js
View File

@ -23,6 +23,12 @@ export default class MUCChatArea extends CustomElement {
this.model = _converse.chatboxes.get(this.jid);
this.markScrolled = debounce(this._markScrolled, 100);
this.listenTo(this.model, 'change:show_help_messages', () => this.requestUpdate());
this.listenTo(this.model, 'change:hidden_occupants', () => this.requestUpdate());
this.listenTo(this.model.session, 'change:connection_status', () => this.requestUpdate());
// Bind so that we can pass it to addEventListener and removeEventListener
this.onMouseMove = this._onMouseMove.bind(this);
this.onMouseUp = this._onMouseUp.bind(this);
}
render () {
@ -31,6 +37,8 @@ export default class MUCChatArea extends CustomElement {
'jid': this.jid,
'model': this.model,
'occupants': this.model.occupants,
'occupants_width': this.model.get('occupants_width'),
'onMousedown': ev => this.onMousedown(ev),
'show_help_messages': this.model.get('show_help_messages'),
'show_send_button': _converse.show_send_button,
'show_sidebar': this.shouldShowSidebar(),
@ -124,6 +132,81 @@ export default class MUCChatArea extends CustomElement {
*/
api.trigger('chatBoxScrolledDown', { 'chatbox': this.model });
}
onMousedown (ev) {
if (u.hasClass('dragresize-occupants-left', ev.target)) {
this.onStartResizeOccupants(ev);
}
}
onStartResizeOccupants (ev) {
this.resizing = true;
this.addEventListener('mousemove', this.onMouseMove);
this.addEventListener('mouseup', this.onMouseUp);
const sidebar_el = this.querySelector('converse-muc-sidebar');
const style = window.getComputedStyle(sidebar_el);
this.width = parseInt(style.width.replace(/px$/, ''), 10);
this.prev_pageX = ev.pageX;
}
_onMouseMove (ev) {
if (this.resizing) {
ev.preventDefault();
const delta = this.prev_pageX - ev.pageX;
this.resizeSidebarView(delta, ev.pageX);
this.prev_pageX = ev.pageX;
}
}
_onMouseUp (ev) {
if (this.resizing) {
ev.preventDefault();
this.resizing = false;
this.removeEventListener('mousemove', this.onMouseMove);
this.removeEventListener('mouseup', this.onMouseUp);
const sidebar_el = this.querySelector('converse-muc-sidebar');
const element_position = sidebar_el.getBoundingClientRect();
const occupants_width = this.calculateSidebarWidth(element_position, 0);
u.safeSave(this.model, { occupants_width });
}
}
calculateSidebarWidth (element_position, delta) {
let occupants_width = element_position.width + delta;
const room_width = this.clientWidth;
// keeping display in boundaries
if (occupants_width < room_width * 0.2) {
// set pixel to 20% width
occupants_width = room_width * 0.2;
this.is_minimum = true;
} else if (occupants_width > room_width * 0.75) {
// set pixel to 75% width
occupants_width = room_width * 0.75;
this.is_maximum = true;
} else if (room_width - occupants_width < 250) {
// resize occupants if chat-area becomes smaller than 250px (min-width property set in css)
occupants_width = room_width - 250;
this.is_maximum = true;
} else {
this.is_maximum = false;
this.is_minimum = false;
}
return occupants_width;
}
resizeSidebarView (delta, current_mouse_position) {
const sidebar_el = this.querySelector('converse-muc-sidebar');
const element_position = sidebar_el.getBoundingClientRect();
if (this.is_minimum) {
this.is_minimum = element_position.left < current_mouse_position;
} else if (this.is_maximum) {
this.is_maximum = element_position.left > current_mouse_position;
} else {
const occupants_width = this.calculateSidebarWidth(element_position, delta);
sidebar_el.style.flex = '0 0 ' + occupants_width + 'px';
}
}
}
api.elements.define('converse-muc-chatarea', MUCChatArea);

92
src/plugins/muc-views/muc.js
View File

@ -36,7 +36,6 @@ export default class MUCView extends BaseChatView {
'click .occupant-nick': function (ev) {
this.insertIntoTextArea(ev.target.textContent);
},
'mousedown .dragresize-occupants-left': 'onStartResizeOccupants',
'submit .muc-nickname-form': 'submitNickname'
}
@ -50,16 +49,11 @@ export default class MUCView extends BaseChatView {
this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
this.listenTo(this.model, 'change:hidden', () => this.afterShown());
this.listenTo(this.model, 'change:hidden_occupants', this.onSidebarToggle);
this.listenTo(this.model, 'change:minimized', () => this.afterShown());
this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
this.listenTo(this.model, 'show', this.show);
this.listenTo(this.model.session, 'change:connection_status', this.renderAfterTransition);
// Bind so that we can pass it to addEventListener and removeEventListener
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseUp = this.onMouseUp.bind(this);
await this.render();
// Need to be registered after render has been called.
@ -80,7 +74,6 @@ export default class MUCView extends BaseChatView {
}
render () {
const sidebar_hidden = !this.shouldShowSidebar();
this.setAttribute('id', this.model.get('box_id'));
render(
tpl_muc({
@ -93,8 +86,7 @@ export default class MUCView extends BaseChatView {
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED,
'markScrolled': ev => this.markScrolled(ev),
'muc_show_logs_before_join': api.settings.get('muc_show_logs_before_join'),
'show_send_button': _converse.show_send_button,
sidebar_hidden,
'show_send_button': _converse.show_send_button
}),
this
);
@ -114,76 +106,6 @@ export default class MUCView extends BaseChatView {
!this.model.get('hidden') && this.show();
}
onStartResizeOccupants (ev) {
this.resizing = true;
this.addEventListener('mousemove', this.onMouseMove);
this.addEventListener('mouseup', this.onMouseUp);
const sidebar_el = this.querySelector('converse-muc-sidebar');
const style = window.getComputedStyle(sidebar_el);
this.width = parseInt(style.width.replace(/px$/, ''), 10);
this.prev_pageX = ev.pageX;
}
onMouseMove (ev) {
if (this.resizing) {
ev.preventDefault();
const delta = this.prev_pageX - ev.pageX;
this.resizeSidebarView(delta, ev.pageX);
this.prev_pageX = ev.pageX;
}
}
onMouseUp (ev) {
if (this.resizing) {
ev.preventDefault();
this.resizing = false;
this.removeEventListener('mousemove', this.onMouseMove);
this.removeEventListener('mouseup', this.onMouseUp);
const sidebar_el = this.querySelector('converse-muc-sidebar');
const element_position = sidebar_el.getBoundingClientRect();
const occupants_width = this.calculateSidebarWidth(element_position, 0);
const attrs = { occupants_width };
_converse.connection.connected ? this.model.save(attrs) : this.model.set(attrs);
}
}
resizeSidebarView (delta, current_mouse_position) {
const sidebar_el = this.querySelector('converse-muc-sidebar');
const element_position = sidebar_el.getBoundingClientRect();
if (this.is_minimum) {
this.is_minimum = element_position.left < current_mouse_position;
} else if (this.is_maximum) {
this.is_maximum = element_position.left > current_mouse_position;
} else {
const occupants_width = this.calculateSidebarWidth(element_position, delta);
sidebar_el.style.flex = '0 0 ' + occupants_width + 'px';
}
}
calculateSidebarWidth (element_position, delta) {
let occupants_width = element_position.width + delta;
const room_width = this.clientWidth;
// keeping display in boundaries
if (occupants_width < room_width * 0.2) {
// set pixel to 20% width
occupants_width = room_width * 0.2;
this.is_minimum = true;
} else if (occupants_width > room_width * 0.75) {
// set pixel to 75% width
occupants_width = room_width * 0.75;
this.is_maximum = true;
} else if (room_width - occupants_width < 250) {
// resize occupants if chat-area becomes smaller than 250px (min-width property set in css)
occupants_width = room_width - 250;
this.is_maximum = true;
} else {
this.is_maximum = false;
this.is_minimum = false;
}
return occupants_width;
}
/**
* Get the nickname value from the form and then join the groupchat with it.
* @private
@ -217,17 +139,6 @@ export default class MUCView extends BaseChatView {
return _converse.ChatBoxView.prototype.showChatStateNotification.apply(this, arguments);
}
shouldShowSidebar () {
return (
!this.model.get('hidden_occupants') &&
this.model.session.get('connection_status') === converse.ROOMSTATUS.ENTERED
);
}
onSidebarToggle () {
this.querySelector('.occupants')?.setVisibility();
}
/**
* Callback method that gets called after the chat has become visible.
* @private
@ -512,7 +423,6 @@ export default class MUCView extends BaseChatView {
this.hideSpinner();
this.hideChatRoomContents();
u.showElement(this.querySelector('converse-muc-chatarea'));
this.querySelector('.occupants')?.setVisibility();
this.scrollDown();
this.maybeFocus();
} else if (conn_status === converse.ROOMSTATUS.DISCONNECTED) {

17
src/plugins/muc-views/sidebar.js
View File

@ -1,10 +1,7 @@
import 'shared/autocomplete/index.js';
import tpl_muc_sidebar from "./templates/muc-sidebar.js";
import { CustomElement } from 'components/element.js';
import { api, converse } from "@converse/headless/core";
const u = converse.env.utils;
import { api } from "@converse/headless/core";
export default class MUCSidebar extends CustomElement {
@ -30,18 +27,6 @@ export default class MUCSidebar extends CustomElement {
));
return tpl;
}
shouldShow () {
return !this.chatroom.get('hidden_occupants') &&
this.chatroom.session.get('connection_status') === converse.ROOMSTATUS.ENTERED;
}
setVisibility () {
// TODO: We're still manually showing/hiding stuff in ChatRoomView,
// eventually we want everything to render declaratively, after which this
// method won't be necessary anymore
this.shouldShow() ? u.showElement(this) : u.hideElement(this);
}
}
api.elements.define('converse-muc-sidebar', MUCSidebar);

2
src/plugins/muc-views/templates/muc-chatarea.js
View File

@ -22,6 +22,8 @@ export default (o) => html`
</div>
<div class="disconnect-container hidden"></div>
<converse-muc-sidebar class="occupants col-md-3 col-4 ${o.show_sidebar ? '' : 'hidden' }"
style="flex: 0 0 ${o.occupants_width}px"
@mousedown=${o.onMousedown}
.occupants=${o.occupants}
.chatroom=${o.model}></converse-muc-sidebar>
`;