From 349b6d616d4e0a74eb3c66a4b6b44495ea6312c3 Mon Sep 17 00:00:00 2001 From: JC Brand Date: Thu, 11 Mar 2021 10:50:37 +0100 Subject: [PATCH] Move functions for resizing the MUC sidebar to converse-muc-chatarea --- src/plugins/muc-views/bottom_panel.js | 5 - src/plugins/muc-views/chatarea.js | 83 +++++++++++++++++ src/plugins/muc-views/muc.js | 92 +------------------ src/plugins/muc-views/sidebar.js | 17 +--- .../muc-views/templates/muc-chatarea.js | 2 + 5 files changed, 87 insertions(+), 112 deletions(-) diff --git a/src/plugins/muc-views/bottom_panel.js b/src/plugins/muc-views/bottom_panel.js index f616cd2d2..a461029d1 100644 --- a/src/plugins/muc-views/bottom_panel.js +++ b/src/plugins/muc-views/bottom_panel.js @@ -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?.(); diff --git a/src/plugins/muc-views/chatarea.js b/src/plugins/muc-views/chatarea.js index 11731d6ab..11ef09ab7 100644 --- a/src/plugins/muc-views/chatarea.js +++ b/src/plugins/muc-views/chatarea.js @@ -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); diff --git a/src/plugins/muc-views/muc.js b/src/plugins/muc-views/muc.js index e4423e0ea..2adecb9a4 100644 --- a/src/plugins/muc-views/muc.js +++ b/src/plugins/muc-views/muc.js @@ -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) { diff --git a/src/plugins/muc-views/sidebar.js b/src/plugins/muc-views/sidebar.js index 4912f500c..8bc420405 100644 --- a/src/plugins/muc-views/sidebar.js +++ b/src/plugins/muc-views/sidebar.js @@ -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); diff --git a/src/plugins/muc-views/templates/muc-chatarea.js b/src/plugins/muc-views/templates/muc-chatarea.js index e744bb1c0..e9b782329 100644 --- a/src/plugins/muc-views/templates/muc-chatarea.js +++ b/src/plugins/muc-views/templates/muc-chatarea.js @@ -22,6 +22,8 @@ export default (o) => html` `;