Various improvements to resizing of occupants view.

- Remove need for the `converse-mouse-events` plugin.
- Register `mousemove` and `mouseup` handlers only when necessary and only inside the MUC DOM element.
- Restore converse-dragresize to roughly it's original state before work started on this.
- Move `applyDragResistance` to utils.

updates #1640

CHANGES.md

@@ -13,18 +13,18 @@
 - New config option [muc_mention_autocomplete_show_avatar](https://conversejs.org/docs/html/configuration.html#muc-mention-autocomplete-show_avatar)
 - New config option [persistent_store](https://conversejs.org/docs/html/configuration.html#persistent-store)
 
-- Add: Resizing of the occupants-list in Multi-User-Chats
-- #129: Add support for XEP-0156: Disovering Alternative XMPP Connection Methods. Only XML is supported for now.
-- #1105: Preliminary support for storing persistent data in IndexedDB instead of localStorage
-- #1666: Allow scrolling of the OMEMO fingerprints list
-- #1691: Fix `collection.chatbox is undefined` errors
-- #1772 `_converse.api.contact.add(jid, nick)` fails, says not a function
-- #1792: Fix: modals don't have scrollbars
-- #1796: Don't show "back" arrow navigation (on mobile) in the chat header when in `singleton` mode
 - Initial support for sending custom emojis. Currently only between Converse
   instances. Still working out a wire protocol for compatibility with other clients.
   To add custom emojis, edit the `emojis.json` file.
 
+- #129: Add support for [XEP-0156: Disovering Alternative XMPP Connection Methods](https://xmpp.org/extensions/xep-0156.html). Only XML is supported for now.
+- #1105: Support for storing persistent data in IndexedDB
+- #1640: Add the ability to resize the occupants sidebar in MUCs
+- #1666: Allow scrolling of the OMEMO fingerprints list
+- #1691: Fix `collection.chatbox is undefined` errors
+- #1772: `_converse.api.contact.add(jid, nick)` fails, says not a function
+- #1792: Fix: modals don't have scrollbars
+- #1796: Don't show "back" arrow navigation (on mobile) in the chat header when in `singleton` mode
 
 ### Breaking changes
 

sass/_variables.scss

@@ -150,7 +150,6 @@ $mobile_portrait_length: 480px !default;
 
     --occupants-padding: 1em;
     --occupants-background-color: white;
-    --occupants-max-width: inherit;
     --occupants-border-left: 1px solid var(--text-color);
     --occupants-border-bottom: 1px solid lightgrey;
     --occupants-features-display: block;
@@ -222,8 +221,6 @@ $mobile_portrait_length: 480px !default;
     --chatroom-badge-hover-color: #D24E2B; // $red
 
     --occupants-background-color: #F3F3F3;
-    /* TODO: find a way to allow that and reflow the chat-area properly.
-     * --occupants-max-width: 240px; */
     --occupants-border-left: 0px;
     --occupants-border-bottom: 0px;
     --occupants-features-display: none;

src/converse-dragresize.js

 // Converse.js (A browser based XMPP chat client)
 // https://conversejs.org
 //
-// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
+// Copyright (c) 2012-2019, Jan-Carel Brand <jc@opkode.com>
 // Licensed under the Mozilla Public License (MPLv2)
 //
 /**
@@ -9,10 +9,11 @@
  */
 import "converse-chatview";
 import "converse-controlbox";
+import { debounce, get } from "lodash";
 import converse from "@converse/headless/converse-core";
 import tpl_dragresize from "templates/dragresize.html";
 
-const { _ } = converse.env;
+const u = converse.env.utils;
 
 function renderDragResizeHandles (_converse, view) {
     const flyout = view.el.querySelector('.box-flyout');
@@ -36,7 +37,7 @@ converse.plugins.add('converse-dragresize', {
      *
      * NB: These plugins need to have already been loaded via require.js.
      */
-    dependencies: ["converse-chatview", "converse-headlines-view", "converse-muc-views", "converse-mouse-events"],
+    dependencies: ["converse-chatview", "converse-headlines-view", "converse-muc-views"],
 
     enabled (_converse) {
         return _converse.view_mode == 'overlayed';
@@ -48,16 +49,12 @@ converse.plugins.add('converse-dragresize', {
         // relevant objects or classes.
         ChatBox: {
             initialize () {
-                const { _converse } = this.__super__;
                 const result = this.__super__.initialize.apply(this, arguments);
                 const height = this.get('height'), width = this.get('width');
-                const save = this.get('id') === 'controlbox' ?
-                    (attrs) => this.set(attrs) :
-                    (attrs) => this.save(attrs);
-
+                const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a);
                 save({
-                    'height': _converse.applyDragResistance(height, this.get('default_height')),
-                    'width': _converse.applyDragResistance(width, this.get('default_width')),
+                    'height': u.applyDragResistance(height, this.get('default_height')),
+                    'width': u.applyDragResistance(width, this.get('default_width')),
                 });
                 return result;
             }
@@ -146,11 +143,12 @@ converse.plugins.add('converse-dragresize', {
             'allow_dragresize': true,
         });
 
+
         const dragResizable = {
 
             initDragResize () {
                 const view = this;
-                const debouncedSetDimensions = _.debounce(() => view.setDimensions());
+                const debouncedSetDimensions = debounce(() => view.setDimensions());
                 window.addEventListener('resize', view.debouncedSetDimensions)
                 this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions));
 
@@ -174,14 +172,14 @@ converse.plugins.add('converse-dragresize', {
                 // Initialize last known mouse position
                 this.prev_pageY = 0;
                 this.prev_pageX = 0;
-                if (_.get(_converse.connection, 'connected')) {
+                if (get(_converse.connection, 'connected')) {
                     this.height = this.model.get('height');
                     this.width = this.model.get('width');
                 }
                 return this;
             },
 
-            resize (ev) {
+            resizeChatBox (ev) {
                 let diff;
                 if (_converse.resizing.direction.indexOf('top') === 0) {
                     diff = ev.pageY - this.prev_pageY;
@@ -191,7 +189,7 @@ converse.plugins.add('converse-dragresize', {
                         this.setChatBoxHeight(this.height);
                     }
                 }
-                if (_.includes(_converse.resizing.direction, 'left')) {
+                if (_converse.resizing.direction.includes('left')) {
                     diff = this.prev_pageX - ev.pageX;
                     if (diff) {
                         this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
@@ -218,7 +216,7 @@ converse.plugins.add('converse-dragresize', {
 
             setChatBoxHeight (height) {
                 if (height) {
-                    height = _converse.applyDragResistance(height, this.model.get('default_height'))+'px';
+                    height = u.applyDragResistance(height, this.model.get('default_height'))+'px';
                 } else {
                     height = "";
                 }
@@ -230,7 +228,7 @@ converse.plugins.add('converse-dragresize', {
 
             setChatBoxWidth (width) {
                 if (width) {
-                    width = _converse.applyDragResistance(width, this.model.get('default_width'))+'px';
+                    width = u.applyDragResistance(width, this.model.get('default_width'))+'px';
                 } else {
                     width = "";
                 }
@@ -313,6 +311,57 @@ converse.plugins.add('converse-dragresize', {
         };
         Object.assign(_converse.ChatBoxView.prototype, dragResizable);
 
+
+        u.applyDragResistance = function (value, default_value) {
+            /* This method applies some resistance around the
+            * default_value. If value is close enough to
+            * default_value, then default_value is returned instead.
+            */
+            if (value === undefined) {
+                return undefined;
+            } else if (default_value === undefined) {
+                return value;
+            }
+            const resistance = 10;
+            if ((value !== default_value) &&
+                (Math.abs(value- default_value) < resistance)) {
+                return default_value;
+            }
+            return value;
+        };
+
+
+        /************************ BEGIN Event Handlers ************************/
+        function registerGlobalEventHandlers () {
+
+            document.addEventListener('mousemove', function (ev) {
+                if (!_converse.resizing || !_converse.allow_dragresize) { return true; }
+                ev.preventDefault();
+                _converse.resizing.chatbox.resizeChatBox(ev);
+            });
+
+            document.addEventListener('mouseup', function (ev) {
+                if (!_converse.resizing || !_converse.allow_dragresize) { return true; }
+                ev.preventDefault();
+                const height = u.applyDragResistance(
+                        _converse.resizing.chatbox.height,
+                        _converse.resizing.chatbox.model.get('default_height')
+                );
+                const width = u.applyDragResistance(
+                        _converse.resizing.chatbox.width,
+                        _converse.resizing.chatbox.model.get('default_width')
+                );
+                if (_converse.api.connection.connected()) {
+                    _converse.resizing.chatbox.model.save({'height': height});
+                    _converse.resizing.chatbox.model.save({'width': width});
+                } else {
+                    _converse.resizing.chatbox.model.set({'height': height});
+                    _converse.resizing.chatbox.model.set({'width': width});
+                }
+                _converse.resizing = null;
+            });
+        }
+        _converse.api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
         _converse.api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());
         /************************ END Event Handlers ************************/
     }

src/converse-mouse-events.js

-// Converse.js (A browser based XMPP chat client)
-// https://conversejs.org
-//
-// Copyright (c) 2012-2017, Jan-Carel Brand <jc@opkode.com>
-// Licensed under the Mozilla Public License (MPLv2)
-//
-
-import "converse-chatview";
-import "converse-controlbox";
-import converse from "@converse/headless/converse-core";
-
-const { _ } = converse.env;
-
-
-converse.plugins.add('converse-mouse-events', {
-
-    dependencies: ["converse-chatview", "converse-headline", "converse-muc-views"],
-
-    enabled (_converse) {
-        return _converse.view_mode == 'overlayed' ||
-               _converse.allow_occupants_view_resizing;
-    },
-
-    initialize () {
-        const { _converse } = this;
-
-        _converse.applyDragResistance = function (value, default_value) {
-            if (_.isUndefined(value)) {
-                return undefined;
-            } else if (_.isUndefined(default_value)) {
-                return value;
-            }
-            const resistance = 10;
-            if ((value !== default_value) &&
-                (Math.abs(value - default_value) < resistance)) {
-                return default_value;
-            }
-            return value;
-        };
-
-        function registerGlobalEventHandlers () {
-            document.addEventListener('mousemove', function (ev) {
-                if (!_converse.resizing || 
-                    (!_converse.allow_dragresize && !_converse.allow_occupants_view_resizing)) { 
-                       return true; 
-                }
-                ev.preventDefault();
-                _converse.resizing.chatbox.resize(ev);
-            });
-
-            document.addEventListener('mouseup', function (ev) {
-                if (!_converse.resizing || 
-                    (!_converse.allow_dragresize && !_converse.allow_occupants_view_resizing)) { 
-                        return true; 
-                }
-                ev.preventDefault();
-                const height = _converse.applyDragResistance(
-                        _converse.resizing.chatbox.height,
-                        _converse.resizing.chatbox.model.get('default_height')
-                );
-                const width = _converse.applyDragResistance(
-                        _converse.resizing.chatbox.width,
-                        _converse.resizing.chatbox.model.get('default_width')
-                );
-                if (_converse.resizing.width_occupants) {
-                    if (_converse.connection.connected) {
-                        _converse.resizing.chatbox.chatroomview.model.save({'width_occupants': _converse.resizing.width_occupants});
-                    } else {
-                        _converse.resizing.chatbox.chatroomview.model.set({'width_occupants': _converse.resizing.width_occupants});
-                    }
-                } else {
-                    if (_converse.api.connection.connected()) {
-                        _converse.resizing.chatbox.model.save({'height': height});
-                        _converse.resizing.chatbox.model.save({'width': width});
-                    } else {
-                        if (_converse.connection.connected) {
-                            _converse.resizing.chatbox.model.save({'height': height});
-                            _converse.resizing.chatbox.model.save({'width': width});
-                        } else {
-                            _converse.resizing.chatbox.model.set({'height': height});
-                            _converse.resizing.chatbox.model.set({'width': width});
-                        }
-                    }
-                }
-                _converse.resizing = null;
-            });
-        }
-        _converse.api.listen.on('registeredGlobalEventHandlers', registerGlobalEventHandlers);
-    }
-});
-

src/converse.js

@@ -20,7 +20,6 @@ import "converse-fullscreen";
 import "converse-mam-views";
 import "converse-minimize";        // Allows chat boxes to be minimized
 import "converse-muc-views";       // Views related to MUC
-import "converse-mouse-events";
 import "converse-headlines-view";
 import "converse-notification";    // HTML5 Notifications
 import "converse-omemo";
@@ -51,7 +50,6 @@ const WHITELISTED_PLUGINS = [
     'converse-minimize',
     'converse-modal',
     'converse-muc-views',
-    'converse-mouse-events',
     'converse-headlines-view',
     'converse-notification',
     'converse-omemo',

src/headless/converse-core.js

@@ -243,7 +243,6 @@ _converse.default_connection_options = {'explicitResourceBinding': true};
 // ----------------------------
 _converse.default_settings = {
     allow_non_roster_messaging: false,
-    allow_occupants_view_resizing: false,
     authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
     auto_away: 0, // Seconds after which user status is set to 'away'
     auto_login: false, // Currently only used in connection with anonymous login

src/templates/chatroom_sidebar.html

@@ -3,6 +3,7 @@
     <i class="hide-occupants fa fa-times"></i>
     <p class="occupants-heading">{{{o.label_occupants}}}</p>
 </div>
+<div class="dragresize dragresize-occupants-left"></div>
 <ul class="occupant-list"></ul>
 <div class="chatroom-features"></div>
 <!-- </div> -->

src/utils/html.js

@@ -160,9 +160,36 @@ u.renderImageURL = function (_converse, url) {
 };
 
 
+/**
+ * Applies some resistance to `value` around the `default_value`.
+ * If value is close enough to `default_value`, then it is returned, otherwise
+ * `value` is returned.
+ * @method u#applyDragResistance
+ * @param { Integer } value
+ * @param { Integer } default_value
+ * @returns { Integer }
+ */
+u.applyDragResistance = function (value, default_value) {
+    if (value === undefined) {
+        return undefined;
+    } else if (default_value === undefined) {
+        return value;
+    }
+    const resistance = 10;
+    if ((value !== default_value) &&
+        (Math.abs(value- default_value) < resistance)) {
+        return default_value;
+    }
+    return value;
+};
+
+
 /**
  * Returns a Promise which resolves once all images have been loaded.
- * @returns {Promise}
+ * @method u#renderImageURLs
+ * @param { _converse }
+ * @param { HTMLElement }
+ * @returns { Promise }
  */
 u.renderImageURLs = function (_converse, el) {
     if (!_converse.show_images_inline) {