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
Hide 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.
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
View file @ 251c023b
......@@ -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;
}
}
......
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