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

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?.();

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

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

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

src/plugins/muc-views/templates/muc-chatarea.js

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