Remove the ability to resize horizontally

CHANGES.md

@@ -18,6 +18,12 @@ with regards to sponsoring development on reintroducing them.
   event and make the XMLHttpRequest yourself.
 * Removed the `xhr_user_search` and `xhr_user_search_url` configuration options.
 
+The UI is now rewritten with Bootstrap4 and Flexbox is used pretty much
+everywhere. Unfortunately this means that in the overlayed view_mode, chat
+boxes can no longer be resized horizontally (or diagonally). Perhaps a solution
+for this can again be found, but time constraints meant that this feature had
+to be removed.
+
 
 ## 3.3.4 (2018-03-05)
 

src/converse-dragresize.js

@@ -10,7 +10,6 @@
     define(["converse-core",
             "tpl!dragresize",
             "converse-chatview",
-            "converse-muc", // XXX: would like to remove this
             "converse-controlbox"
     ], factory);
 }(this, function (converse, tpl_dragresize) {
@@ -39,7 +38,7 @@
          *
          * NB: These plugins need to have already been loaded via require.js.
          */
-        dependencies: ["converse-chatview", "converse-headline"],
+        dependencies: ["converse-chatview", "converse-headline", "converse-muc-views"],
 
         enabled (_converse) {
             return _converse.view_mode == 'overlayed';
@@ -68,16 +67,10 @@
                             that.resizing.chatbox.height,
                             that.resizing.chatbox.model.get('default_height')
                     );
-                    const width = that.applyDragResistance(
-                            that.resizing.chatbox.width,
-                            that.resizing.chatbox.model.get('default_width')
-                    );
                     if (that.connection.connected) {
                         that.resizing.chatbox.model.save({'height': height});
-                        that.resizing.chatbox.model.save({'width': width});
                     } else {
                         that.resizing.chatbox.model.set({'height': height});
-                        that.resizing.chatbox.model.set({'width': width});
                     }
                     that.resizing = null;
                 });
@@ -89,12 +82,9 @@
                 initialize () {
                     const { _converse } = this.__super__;
                     const result = this.__super__.initialize.apply(this, arguments),
-                        height = this.get('height'), width = this.get('width'),
+                        height = this.get('height'),
                         save = this.get('id') === 'controlbox' ? this.set.bind(this) : this.save.bind(this);
-                    save({
-                        'height': _converse.applyDragResistance(height, this.get('default_height')),
-                        'width': _converse.applyDragResistance(width, this.get('default_width')),
-                    });
+                    save('height', _converse.applyDragResistance(height, this.get('default_height')));
                     return result;
                 }
             },
@@ -102,8 +92,6 @@
             ChatBoxView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
-                    'mousedown .dragresize-left': 'onStartHorizontalResize',
-                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -114,18 +102,9 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
-                    this.setWidth();
                     return result;
                 },
 
-                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.el.style.width = this.model.get('width');
-                    }
-                },
-
                 _show () {
                     this.initDragResize().setDimensions();
                     this.__super__._show.apply(this, arguments);
@@ -140,32 +119,25 @@
                           style = window.getComputedStyle(flyout);
 
                     if (_.isUndefined(this.model.get('height'))) {
-                        const height = parseInt(style.height.replace(/px$/, ''), 10),
-                              width = parseInt(style.width.replace(/px$/, ''), 10);
+                        const height = parseInt(style.height.replace(/px$/, ''), 10);
                         this.model.set('height', height);
                         this.model.set('default_height', height);
-                        this.model.set('width', width);
-                        this.model.set('default_width', width);
                     }
-                    const min_width = style['min-width'];
                     const min_height = style['min-height'];
-                    this.model.set('min_width', min_width.endsWith('px') ? Number(min_width.replace(/px$/, '')) :0);
                     this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
                     // Initialize last known mouse position
                     this.prev_pageY = 0;
                     this.prev_pageX = 0;
                     if (_converse.connection.connected) {
                         this.height = this.model.get('height');
-                        this.width = this.model.get('width');
                     }
                     return this;
                 },
 
                 setDimensions () {
-                    // Make sure the chat box has the right height and width.
+                    // Make sure the chat box has the right height
                     this.adjustToViewport();
                     this.setChatBoxHeight(this.model.get('height'));
-                    this.setChatBoxWidth(this.model.get('width'));
                 },
 
                 setChatBoxHeight (height) {
@@ -181,32 +153,10 @@
                     }
                 },
 
-                setChatBoxWidth (width) {
-                    const { _converse } = this.__super__;
-                    if (width) {
-                        width = _converse.applyDragResistance(width, this.model.get('default_width'))+'px';
-                    } else {
-                        width = "";
-                    }
-                    this.el.style.width = width;
-                    const flyout_el = this.el.querySelector('.box-flyout');
-                    if (!_.isNull(flyout_el)) {
-                        flyout_el.style.width = width;
-                    }
-                },
-
                 adjustToViewport () {
-                    /* Event handler called when viewport gets resized. We remove
-                     * custom width/height from chat boxes.
-                     */
-                    const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+                    /* Event handler called when viewport gets resized. We remove the custom height from chat boxes. */
                     const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
-                    if (viewport_width <= 480) {
-                        this.model.set('height', undefined);
-                        this.model.set('width', undefined);
-                    } else if (viewport_width <= this.model.get('width')) {
-                        this.model.set('width', undefined);
-                    } else if (viewport_height <= this.model.get('height')) {
+                    if (viewport_height <= this.model.get('height')) {
                         this.model.set('height', undefined);
                     }
                 },
@@ -225,26 +175,6 @@
                     this.prev_pageY = ev.pageY;
                 },
 
-                onStartHorizontalResize (ev) {
-                    const { _converse } = this.__super__;
-                    if (!_converse.allow_dragresize) { return true; }
-                    const flyout = this.el.querySelector('.box-flyout'),
-                          style = window.getComputedStyle(flyout);
-                    this.width = parseInt(style.width.replace(/px$/, ''), 10);
-                    _converse.resizing = {
-                        'chatbox': this,
-                        'direction': 'left'
-                    };
-                    this.prev_pageX = ev.pageX;
-                },
-
-                onStartDiagonalResize (ev) {
-                    const { _converse } = this.__super__;
-                    this.onStartHorizontalResize(ev);
-                    this.onStartVerticalResize(ev);
-                    _converse.resizing.direction = 'topleft';
-                },
-
                 resizeChatBox (ev) {
                     let diff;
                     const { _converse } = this.__super__;
@@ -256,22 +186,12 @@
                             this.setChatBoxHeight(this.height);
                         }
                     }
-                    if (_.includes(_converse.resizing.direction, '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');
-                            this.prev_pageX = ev.pageX;
-                            this.setChatBoxWidth(this.width);
-                        }
-                    }
                 }
             },
 
             HeadlinesBoxView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
-                    'mousedown .dragresize-left': 'onStartHorizontalResize',
-                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -282,7 +202,6 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
-                    this.setWidth();
                     return result;
                 }
             },
@@ -291,7 +210,6 @@
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
                     'mousedown .dragresize-left': 'onStartHorizontalResize',
-                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -302,7 +220,6 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
-                    this.setWidth();
                     return result;
                 },
 
@@ -322,8 +239,6 @@
             ChatRoomView: {
                 events: {
                     'mousedown .dragresize-top': 'onStartVerticalResize',
-                    'mousedown .dragresize-left': 'onStartHorizontalResize',
-                    'mousedown .dragresize-topleft': 'onStartDiagonalResize'
                 },
 
                 initialize () {
@@ -334,7 +249,6 @@
                 render () {
                     const result = this.__super__.render.apply(this, arguments);
                     renderDragResizeHandles(this.__super__._converse, this);
-                    this.setWidth();
                     return result;
                 }
             }