Skip to content

C
converse.js
Commit 251c023b authored by JC Brand's avatar JC Brand
Browse files
Options

Remove the ability to resize horizontally

parent 914a5570
Show whitespace changes
Inline Side-by-side
Showing with 13 additions and 93 deletions
CHANGES.md
View file @ 251c023b
...@@ -18,6 +18,12 @@ with regards to sponsoring development on reintroducing them. ...@@ -18,6 +18,12 @@ with regards to sponsoring development on reintroducing them.
event and make the XMLHttpRequest yourself. event and make the XMLHttpRequest yourself.
* Removed the `xhr_user_search` and `xhr_user_search_url` configuration options. * 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) ## 3.3.4 (2018-03-05)
......
src/converse-dragresize.js
View file @ 251c023b
...@@ -10,7 +10,6 @@ ...@@ -10,7 +10,6 @@
define(["converse-core", define(["converse-core",
"tpl!dragresize", "tpl!dragresize",
"converse-chatview", "converse-chatview",
"converse-muc", // XXX: would like to remove this
"converse-controlbox" "converse-controlbox"
], factory); ], factory);
}(this, function (converse, tpl_dragresize) { }(this, function (converse, tpl_dragresize) {
...@@ -39,7 +38,7 @@ ...@@ -39,7 +38,7 @@
* *
* NB: These plugins need to have already been loaded via require.js. * 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) { enabled (_converse) {
return _converse.view_mode == 'overlayed'; return _converse.view_mode == 'overlayed';
...@@ -68,16 +67,10 @@ ...@@ -68,16 +67,10 @@
that.resizing.chatbox.height, that.resizing.chatbox.height,
that.resizing.chatbox.model.get('default_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) { if (that.connection.connected) {
that.resizing.chatbox.model.save({'height': height}); that.resizing.chatbox.model.save({'height': height});
that.resizing.chatbox.model.save({'width': width});
} else { } else {
that.resizing.chatbox.model.set({'height': height}); that.resizing.chatbox.model.set({'height': height});
that.resizing.chatbox.model.set({'width': width});
} }
that.resizing = null; that.resizing = null;
}); });
...@@ -89,12 +82,9 @@ ...@@ -89,12 +82,9 @@
initialize () { initialize () {
const { _converse } = this.__super__; const { _converse } = this.__super__;
const result = this.__super__.initialize.apply(this, arguments), 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 = this.get('id') === 'controlbox' ? this.set.bind(this) : this.save.bind(this);
save({ save('height', _converse.applyDragResistance(height, this.get('default_height')));
'height': _converse.applyDragResistance(height, this.get('default_height')),
'width': _converse.applyDragResistance(width, this.get('default_width')),
});
return result; return result;
} }
}, },
...@@ -102,8 +92,6 @@ ...@@ -102,8 +92,6 @@
ChatBoxView: { ChatBoxView: {
events: { events: {
'mousedown .dragresize-top': 'onStartVerticalResize', 'mousedown .dragresize-top': 'onStartVerticalResize',
'mousedown .dragresize-left': 'onStartHorizontalResize',
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
}, },
initialize () { initialize () {
...@@ -114,18 +102,9 @@ ...@@ -114,18 +102,9 @@
render () { render () {
const result = this.__super__.render.apply(this, arguments); const result = this.__super__.render.apply(this, arguments);
renderDragResizeHandles(this.__super__._converse, this); renderDragResizeHandles(this.__super__._converse, this);
this.setWidth();
return result; 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 () { _show () {
this.initDragResize().setDimensions(); this.initDragResize().setDimensions();
this.__super__._show.apply(this, arguments); this.__super__._show.apply(this, arguments);
...@@ -140,32 +119,25 @@ ...@@ -140,32 +119,25 @@
style = window.getComputedStyle(flyout); style = window.getComputedStyle(flyout);
if (_.isUndefined(this.model.get('height'))) { if (_.isUndefined(this.model.get('height'))) {
const height = parseInt(style.height.replace(/px$/, ''), 10), const height = parseInt(style.height.replace(/px$/, ''), 10);
width = parseInt(style.width.replace(/px$/, ''), 10);
this.model.set('height', height); this.model.set('height', height);
this.model.set('default_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']; 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); this.model.set('min_height', min_height.endsWith('px') ? Number(min_height.replace(/px$/, '')) :0);
// Initialize last known mouse position // Initialize last known mouse position
this.prev_pageY = 0; this.prev_pageY = 0;
this.prev_pageX = 0; this.prev_pageX = 0;
if (_converse.connection.connected) { if (_converse.connection.connected) {
this.height = this.model.get('height'); this.height = this.model.get('height');
this.width = this.model.get('width');
} }
return this; return this;
}, },
setDimensions () { setDimensions () {
// Make sure the chat box has the right height and width. // Make sure the chat box has the right height
this.adjustToViewport(); this.adjustToViewport();
this.setChatBoxHeight(this.model.get('height')); this.setChatBoxHeight(this.model.get('height'));
this.setChatBoxWidth(this.model.get('width'));
}, },
setChatBoxHeight (height) { setChatBoxHeight (height) {
...@@ -181,32 +153,10 @@ ...@@ -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 () { adjustToViewport () {
/* Event handler called when viewport gets resized. We remove /* Event handler called when viewport gets resized. We remove the custom height from chat boxes. */
* custom width/height from chat boxes.
*/
const viewport_width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); const viewport_height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
if (viewport_width <= 480) { if (viewport_height <= this.model.get('height')) {
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')) {
this.model.set('height', undefined); this.model.set('height', undefined);
} }
}, },
...@@ -225,26 +175,6 @@ ...@@ -225,26 +175,6 @@
this.prev_pageY = ev.pageY; 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) { resizeChatBox (ev) {
let diff; let diff;
const { _converse } = this.__super__; const { _converse } = this.__super__;
...@@ -256,22 +186,12 @@ ...@@ -256,22 +186,12 @@
this.setChatBoxHeight(this.height); 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: { HeadlinesBoxView: {
events: { events: {
'mousedown .dragresize-top': 'onStartVerticalResize', 'mousedown .dragresize-top': 'onStartVerticalResize',
'mousedown .dragresize-left': 'onStartHorizontalResize',
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
}, },
initialize () { initialize () {
...@@ -282,7 +202,6 @@ ...@@ -282,7 +202,6 @@
render () { render () {
const result = this.__super__.render.apply(this, arguments); const result = this.__super__.render.apply(this, arguments);
renderDragResizeHandles(this.__super__._converse, this); renderDragResizeHandles(this.__super__._converse, this);
this.setWidth();
return result; return result;
} }
}, },
...@@ -291,7 +210,6 @@ ...@@ -291,7 +210,6 @@
events: { events: {
'mousedown .dragresize-top': 'onStartVerticalResize', 'mousedown .dragresize-top': 'onStartVerticalResize',
'mousedown .dragresize-left': 'onStartHorizontalResize', 'mousedown .dragresize-left': 'onStartHorizontalResize',
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
}, },
initialize () { initialize () {
...@@ -302,7 +220,6 @@ ...@@ -302,7 +220,6 @@
render () { render () {
const result = this.__super__.render.apply(this, arguments); const result = this.__super__.render.apply(this, arguments);
renderDragResizeHandles(this.__super__._converse, this); renderDragResizeHandles(this.__super__._converse, this);
this.setWidth();
return result; return result;
}, },
...@@ -322,8 +239,6 @@ ...@@ -322,8 +239,6 @@
ChatRoomView: { ChatRoomView: {
events: { events: {
'mousedown .dragresize-top': 'onStartVerticalResize', 'mousedown .dragresize-top': 'onStartVerticalResize',
'mousedown .dragresize-left': 'onStartHorizontalResize',
'mousedown .dragresize-topleft': 'onStartDiagonalResize'
}, },
initialize () { initialize () {
...@@ -334,7 +249,6 @@ ...@@ -334,7 +249,6 @@
render () { render () {
const result = this.__super__.render.apply(this, arguments); const result = this.__super__.render.apply(this, arguments);
renderDragResizeHandles(this.__super__._converse, this); renderDragResizeHandles(this.__super__._converse, this);
this.setWidth();
return result; return result;
} }
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7