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
This commit is contained in:
parent
0c4da63e07
commit
b1c9af3ed0
16
CHANGES.md
16
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 [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)
|
- 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
|
- Initial support for sending custom emojis. Currently only between Converse
|
||||||
instances. Still working out a wire protocol for compatibility with other clients.
|
instances. Still working out a wire protocol for compatibility with other clients.
|
||||||
To add custom emojis, edit the `emojis.json` file.
|
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
|
### Breaking changes
|
||||||
|
|
||||||
|
|
|
@ -146,7 +146,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
flex: 0 1 100%;
|
flex: 0 1 100%;
|
||||||
min-width: 25%;
|
min-width: 25%;
|
||||||
.new-msgs-indicator {
|
.new-msgs-indicator {
|
||||||
background-color: var(--chatroom-head-color);
|
background-color: var(--chatroom-head-color);
|
||||||
|
|
|
@ -150,7 +150,6 @@ $mobile_portrait_length: 480px !default;
|
||||||
|
|
||||||
--occupants-padding: 1em;
|
--occupants-padding: 1em;
|
||||||
--occupants-background-color: white;
|
--occupants-background-color: white;
|
||||||
--occupants-max-width: inherit;
|
|
||||||
--occupants-border-left: 1px solid var(--text-color);
|
--occupants-border-left: 1px solid var(--text-color);
|
||||||
--occupants-border-bottom: 1px solid lightgrey;
|
--occupants-border-bottom: 1px solid lightgrey;
|
||||||
--occupants-features-display: block;
|
--occupants-features-display: block;
|
||||||
|
@ -222,8 +221,6 @@ $mobile_portrait_length: 480px !default;
|
||||||
--chatroom-badge-hover-color: #D24E2B; // $red
|
--chatroom-badge-hover-color: #D24E2B; // $red
|
||||||
|
|
||||||
--occupants-background-color: #F3F3F3;
|
--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-left: 0px;
|
||||||
--occupants-border-bottom: 0px;
|
--occupants-border-bottom: 0px;
|
||||||
--occupants-features-display: none;
|
--occupants-features-display: none;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// Converse.js (A browser based XMPP chat client)
|
// Converse.js (A browser based XMPP chat client)
|
||||||
// https://conversejs.org
|
// 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)
|
// Licensed under the Mozilla Public License (MPLv2)
|
||||||
//
|
//
|
||||||
/**
|
/**
|
||||||
|
@ -9,10 +9,11 @@
|
||||||
*/
|
*/
|
||||||
import "converse-chatview";
|
import "converse-chatview";
|
||||||
import "converse-controlbox";
|
import "converse-controlbox";
|
||||||
|
import { debounce, get } from "lodash";
|
||||||
import converse from "@converse/headless/converse-core";
|
import converse from "@converse/headless/converse-core";
|
||||||
import tpl_dragresize from "templates/dragresize.html";
|
import tpl_dragresize from "templates/dragresize.html";
|
||||||
|
|
||||||
const { _ } = converse.env;
|
const u = converse.env.utils;
|
||||||
|
|
||||||
function renderDragResizeHandles (_converse, view) {
|
function renderDragResizeHandles (_converse, view) {
|
||||||
const flyout = view.el.querySelector('.box-flyout');
|
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.
|
* 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) {
|
enabled (_converse) {
|
||||||
return _converse.view_mode == 'overlayed';
|
return _converse.view_mode == 'overlayed';
|
||||||
|
@ -48,16 +49,12 @@ converse.plugins.add('converse-dragresize', {
|
||||||
// relevant objects or classes.
|
// relevant objects or classes.
|
||||||
ChatBox: {
|
ChatBox: {
|
||||||
initialize () {
|
initialize () {
|
||||||
const { _converse } = this.__super__;
|
|
||||||
const result = this.__super__.initialize.apply(this, arguments);
|
const result = this.__super__.initialize.apply(this, arguments);
|
||||||
const height = this.get('height'), width = this.get('width');
|
const height = this.get('height'), width = this.get('width');
|
||||||
const save = this.get('id') === 'controlbox' ?
|
const save = this.get('id') === 'controlbox' ? a => this.set(a) : a => this.save(a);
|
||||||
(attrs) => this.set(attrs) :
|
|
||||||
(attrs) => this.save(attrs);
|
|
||||||
|
|
||||||
save({
|
save({
|
||||||
'height': _converse.applyDragResistance(height, this.get('default_height')),
|
'height': u.applyDragResistance(height, this.get('default_height')),
|
||||||
'width': _converse.applyDragResistance(width, this.get('default_width')),
|
'width': u.applyDragResistance(width, this.get('default_width')),
|
||||||
});
|
});
|
||||||
return result;
|
return result;
|
||||||
}
|
}
|
||||||
|
@ -146,11 +143,12 @@ converse.plugins.add('converse-dragresize', {
|
||||||
'allow_dragresize': true,
|
'allow_dragresize': true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
const dragResizable = {
|
const dragResizable = {
|
||||||
|
|
||||||
initDragResize () {
|
initDragResize () {
|
||||||
const view = this;
|
const view = this;
|
||||||
const debouncedSetDimensions = _.debounce(() => view.setDimensions());
|
const debouncedSetDimensions = debounce(() => view.setDimensions());
|
||||||
window.addEventListener('resize', view.debouncedSetDimensions)
|
window.addEventListener('resize', view.debouncedSetDimensions)
|
||||||
this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions));
|
this.listenTo(this.model, 'destroy', () => window.removeEventListener('resize', debouncedSetDimensions));
|
||||||
|
|
||||||
|
@ -174,14 +172,14 @@ converse.plugins.add('converse-dragresize', {
|
||||||
// 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 (_.get(_converse.connection, 'connected')) {
|
if (get(_converse.connection, 'connected')) {
|
||||||
this.height = this.model.get('height');
|
this.height = this.model.get('height');
|
||||||
this.width = this.model.get('width');
|
this.width = this.model.get('width');
|
||||||
}
|
}
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
resize (ev) {
|
resizeChatBox (ev) {
|
||||||
let diff;
|
let diff;
|
||||||
if (_converse.resizing.direction.indexOf('top') === 0) {
|
if (_converse.resizing.direction.indexOf('top') === 0) {
|
||||||
diff = ev.pageY - this.prev_pageY;
|
diff = ev.pageY - this.prev_pageY;
|
||||||
|
@ -191,7 +189,7 @@ converse.plugins.add('converse-dragresize', {
|
||||||
this.setChatBoxHeight(this.height);
|
this.setChatBoxHeight(this.height);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (_.includes(_converse.resizing.direction, 'left')) {
|
if (_converse.resizing.direction.includes('left')) {
|
||||||
diff = this.prev_pageX - ev.pageX;
|
diff = this.prev_pageX - ev.pageX;
|
||||||
if (diff) {
|
if (diff) {
|
||||||
this.width = ((this.width+diff) > (this.model.get('min_width') || 0)) ? (this.width+diff) : this.model.get('min_width');
|
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) {
|
setChatBoxHeight (height) {
|
||||||
if (height) {
|
if (height) {
|
||||||
height = _converse.applyDragResistance(height, this.model.get('default_height'))+'px';
|
height = u.applyDragResistance(height, this.model.get('default_height'))+'px';
|
||||||
} else {
|
} else {
|
||||||
height = "";
|
height = "";
|
||||||
}
|
}
|
||||||
|
@ -230,7 +228,7 @@ converse.plugins.add('converse-dragresize', {
|
||||||
|
|
||||||
setChatBoxWidth (width) {
|
setChatBoxWidth (width) {
|
||||||
if (width) {
|
if (width) {
|
||||||
width = _converse.applyDragResistance(width, this.model.get('default_width'))+'px';
|
width = u.applyDragResistance(width, this.model.get('default_width'))+'px';
|
||||||
} else {
|
} else {
|
||||||
width = "";
|
width = "";
|
||||||
}
|
}
|
||||||
|
@ -313,6 +311,57 @@ converse.plugins.add('converse-dragresize', {
|
||||||
};
|
};
|
||||||
Object.assign(_converse.ChatBoxView.prototype, dragResizable);
|
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());
|
_converse.api.listen.on('beforeShowingChatView', view => view.initDragResize().setDimensions());
|
||||||
/************************ END Event Handlers ************************/
|
/************************ END Event Handlers ************************/
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,91 +0,0 @@
|
||||||
// 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);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
|
@ -648,6 +648,7 @@ converse.plugins.add('converse-muc-views', {
|
||||||
'input .chat-textarea': 'inputChanged',
|
'input .chat-textarea': 'inputChanged',
|
||||||
'keydown .chat-textarea': 'onKeyDown',
|
'keydown .chat-textarea': 'onKeyDown',
|
||||||
'keyup .chat-textarea': 'onKeyUp',
|
'keyup .chat-textarea': 'onKeyUp',
|
||||||
|
'mousedown .dragresize-occupants-left': 'onStartResizeOccupants',
|
||||||
'paste .chat-textarea': 'onPaste',
|
'paste .chat-textarea': 'onPaste',
|
||||||
'submit .muc-nickname-form': 'submitNickname'
|
'submit .muc-nickname-form': 'submitNickname'
|
||||||
},
|
},
|
||||||
|
@ -678,6 +679,10 @@ converse.plugins.add('converse-muc-views', {
|
||||||
this.listenTo(this.model.occupants, 'change:role', this.onOccupantRoleChanged);
|
this.listenTo(this.model.occupants, 'change:role', this.onOccupantRoleChanged);
|
||||||
this.listenTo(this.model.occupants, 'change:affiliation', this.onOccupantAffiliationChanged);
|
this.listenTo(this.model.occupants, 'change:affiliation', this.onOccupantAffiliationChanged);
|
||||||
|
|
||||||
|
// Bind so that we can pass it to addEventListener and removeEventListener
|
||||||
|
this.onMouseMove = this.onMouseMove.bind(this);
|
||||||
|
this.onMouseUp = this.onMouseUp.bind(this);
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
this.createOccupantsView();
|
this.createOccupantsView();
|
||||||
await this.updateAfterMessagesFetched();
|
await this.updateAfterMessagesFetched();
|
||||||
|
@ -746,9 +751,80 @@ converse.plugins.add('converse-muc-views', {
|
||||||
|
|
||||||
createOccupantsView () {
|
createOccupantsView () {
|
||||||
this.model.occupants.chatroomview = this;
|
this.model.occupants.chatroomview = this;
|
||||||
const view = new _converse.ChatRoomOccupantsView({'model': this.model.occupants});
|
this.occupants_view = new _converse.ChatRoomOccupantsView({'model': this.model.occupants});
|
||||||
const container_el = this.el.querySelector('.chatroom-body');
|
const container_el = this.el.querySelector('.chatroom-body');
|
||||||
container_el.insertAdjacentElement('beforeend', view.el);
|
const occupants_width = this.model.get('occupants_width');
|
||||||
|
if (this.occupants_view && occupants_width !== undefined) {
|
||||||
|
this.occupants_view.el.style.flex = "0 0 " + occupants_width + "px";
|
||||||
|
}
|
||||||
|
container_el.insertAdjacentElement('beforeend', this.occupants_view.el);
|
||||||
|
},
|
||||||
|
|
||||||
|
onStartResizeOccupants (ev) {
|
||||||
|
this.resizing = true;
|
||||||
|
this.el.addEventListener('mousemove', this.onMouseMove);
|
||||||
|
this.el.addEventListener('mouseup', this.onMouseUp);
|
||||||
|
|
||||||
|
const style = window.getComputedStyle(this.occupants_view.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.resizeOccupantsView(delta, ev.pageX);
|
||||||
|
this.prev_pageX = ev.pageX;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onMouseUp (ev) {
|
||||||
|
if (this.resizing) {
|
||||||
|
ev.preventDefault();
|
||||||
|
this.resizing = false;
|
||||||
|
this.el.removeEventListener('mousemove', this.onMouseMove);
|
||||||
|
this.el.removeEventListener('mouseup', this.onMouseUp);
|
||||||
|
const element_position = this.occupants_view.el.getBoundingClientRect();
|
||||||
|
const occupants_width = this.calculateOccupantsWidth(element_position, 0);
|
||||||
|
const attrs = {occupants_width};
|
||||||
|
_converse.connection.connected ? this.model.save(attrs) : this.model.set(attrs);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
resizeOccupantsView (delta, current_mouse_position) {
|
||||||
|
const element_position = this.occupants_view.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.calculateOccupantsWidth(element_position, delta);
|
||||||
|
this.occupants_view.el.style.flex = "0 0 " + occupants_width + "px";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
calculateOccupantsWidth(element_position, delta) {
|
||||||
|
let occupants_width = element_position.width + delta;
|
||||||
|
const room_width = this.el.clientWidth;
|
||||||
|
// keeping display in boundaries
|
||||||
|
if (occupants_width < (room_width * 0.20)) {
|
||||||
|
// set pixel to 20% width
|
||||||
|
occupants_width = (room_width * 0.20);
|
||||||
|
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;
|
||||||
},
|
},
|
||||||
|
|
||||||
getAutoCompleteList () {
|
getAutoCompleteList () {
|
||||||
|
@ -2052,9 +2128,6 @@ converse.plugins.add('converse-muc-views', {
|
||||||
listItems: 'model',
|
listItems: 'model',
|
||||||
sortEvent: 'change:role',
|
sortEvent: 'change:role',
|
||||||
listSelector: '.occupant-list',
|
listSelector: '.occupant-list',
|
||||||
events: {
|
|
||||||
'mousedown .dragresize-occupants-left': 'onStartHorizontalResizeOccupants',
|
|
||||||
},
|
|
||||||
|
|
||||||
ItemView: _converse.ChatRoomOccupantView,
|
ItemView: _converse.ChatRoomOccupantView,
|
||||||
|
|
||||||
|
@ -2084,12 +2157,6 @@ converse.plugins.add('converse-muc-views', {
|
||||||
_converse.api.waitUntil('rosterContactsFetched').then(() => this.renderInviteWidget());
|
_converse.api.waitUntil('rosterContactsFetched').then(() => this.renderInviteWidget());
|
||||||
}
|
}
|
||||||
this.setVisibility();
|
this.setVisibility();
|
||||||
|
|
||||||
this.renderDragResizeHandles();
|
|
||||||
|
|
||||||
this.is_maximum = false;
|
|
||||||
this.is_minimum = false;
|
|
||||||
|
|
||||||
return this.renderRoomFeatures();
|
return this.renderRoomFeatures();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -2218,76 +2285,6 @@ converse.plugins.add('converse-muc-views', {
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
renderDragResizeHandles () {
|
|
||||||
const flyout = this.el;
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.innerHTML = '<div class="dragresize dragresize-occupants-left"></div>';
|
|
||||||
flyout.insertBefore(
|
|
||||||
div,
|
|
||||||
flyout.firstChild
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
onStartHorizontalResizeOccupants (ev) {
|
|
||||||
const flyout = this.el,
|
|
||||||
style = window.getComputedStyle(flyout);
|
|
||||||
this.width = parseInt(style.width.replace(/px$/, ''), 10);
|
|
||||||
_converse.resizing = {
|
|
||||||
'chatbox': this,
|
|
||||||
'direction': 'left'
|
|
||||||
};
|
|
||||||
this.prev_pageX = ev.pageX;
|
|
||||||
},
|
|
||||||
|
|
||||||
resize (ev) {
|
|
||||||
if (_.includes(_converse.resizing.direction, 'left')) {
|
|
||||||
this.change_in_pixel = (this.prev_pageX - ev.pageX);
|
|
||||||
this.resizeOccupantsView(this.change_in_pixel, ev.pageX);
|
|
||||||
this.prev_pageX = ev.pageX;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resizeOccupantsView (change_in_pixel, current_mouse_position) {
|
|
||||||
const element_position = this.el.getBoundingClientRect();
|
|
||||||
|
|
||||||
// has mouse reached the minimum to the right
|
|
||||||
if (this.is_minimum) {
|
|
||||||
this.is_minimum = element_position.left < current_mouse_position;
|
|
||||||
} // has mouse reached the maximum to the left
|
|
||||||
else if (this.is_maximum) {
|
|
||||||
this.is_maximum = element_position.left > current_mouse_position;
|
|
||||||
} // Scale is within the boundaries
|
|
||||||
else {
|
|
||||||
const occupants_width_pixel = this.calculateOccupantsWithInPixel(element_position, change_in_pixel);
|
|
||||||
this.el.style.flex = "0 0 " + occupants_width_pixel + "px";
|
|
||||||
_converse.resizing.width_occupants = occupants_width_pixel;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
calculateOccupantsWithInPixel (element_position, change_in_pixel) {
|
|
||||||
let occupants_width_pixel = element_position.width + change_in_pixel;
|
|
||||||
const chatroom_width_pixel = this.el.parentElement.clientWidth;
|
|
||||||
|
|
||||||
// keeping display in boundaries
|
|
||||||
if (occupants_width_pixel < (chatroom_width_pixel * 0.20)) {
|
|
||||||
// set pixel to 20% width
|
|
||||||
occupants_width_pixel = (chatroom_width_pixel * 0.20);
|
|
||||||
this.is_minimum = true;
|
|
||||||
} else if (occupants_width_pixel > (chatroom_width_pixel * 0.75)) {
|
|
||||||
// set pixel to 75% width
|
|
||||||
occupants_width_pixel = (chatroom_width_pixel * 0.75);
|
|
||||||
this.is_maximum = true;
|
|
||||||
} else if ((chatroom_width_pixel - occupants_width_pixel) < 250) {
|
|
||||||
// resize occupants if chat-area becomes smaller than 250px (min-width property set in css)
|
|
||||||
occupants_width_pixel = chatroom_width_pixel - 250;
|
|
||||||
this.is_maximum = true;
|
|
||||||
} else {
|
|
||||||
this.is_maximum = false;
|
|
||||||
this.is_minimum = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
return occupants_width_pixel;
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
@ -2369,15 +2366,6 @@ converse.plugins.add('converse-muc-views', {
|
||||||
fetchAndSetMUCDomain(view);
|
fetchAndSetMUCDomain(view);
|
||||||
view.model.on('change:connected', () => fetchAndSetMUCDomain(view));
|
view.model.on('change:connected', () => fetchAndSetMUCDomain(view));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
_converse.api.listen.on('beforeShowingChatView', (chatroomview) => {
|
|
||||||
const occupants_width_pixel = chatroomview.model.get('width_occupants');
|
|
||||||
const occupants_view = chatroomview.el.querySelector('.occupants');
|
|
||||||
if (occupants_view && occupants_width_pixel !== undefined) {
|
|
||||||
occupants_view.style.flex = "0 0 " + occupants_width_pixel + "px";
|
|
||||||
}
|
|
||||||
});
|
|
||||||
/************************ END Event Handlers ************************/
|
/************************ END Event Handlers ************************/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -20,7 +20,6 @@ import "converse-fullscreen";
|
||||||
import "converse-mam-views";
|
import "converse-mam-views";
|
||||||
import "converse-minimize"; // Allows chat boxes to be minimized
|
import "converse-minimize"; // Allows chat boxes to be minimized
|
||||||
import "converse-muc-views"; // Views related to MUC
|
import "converse-muc-views"; // Views related to MUC
|
||||||
import "converse-mouse-events";
|
|
||||||
import "converse-headlines-view";
|
import "converse-headlines-view";
|
||||||
import "converse-notification"; // HTML5 Notifications
|
import "converse-notification"; // HTML5 Notifications
|
||||||
import "converse-omemo";
|
import "converse-omemo";
|
||||||
|
@ -51,7 +50,6 @@ const WHITELISTED_PLUGINS = [
|
||||||
'converse-minimize',
|
'converse-minimize',
|
||||||
'converse-modal',
|
'converse-modal',
|
||||||
'converse-muc-views',
|
'converse-muc-views',
|
||||||
'converse-mouse-events',
|
|
||||||
'converse-headlines-view',
|
'converse-headlines-view',
|
||||||
'converse-notification',
|
'converse-notification',
|
||||||
'converse-omemo',
|
'converse-omemo',
|
||||||
|
|
|
@ -243,7 +243,6 @@ _converse.default_connection_options = {'explicitResourceBinding': true};
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
_converse.default_settings = {
|
_converse.default_settings = {
|
||||||
allow_non_roster_messaging: false,
|
allow_non_roster_messaging: false,
|
||||||
allow_occupants_view_resizing: false,
|
|
||||||
authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
|
authentication: 'login', // Available values are "login", "prebind", "anonymous" and "external".
|
||||||
auto_away: 0, // Seconds after which user status is set to 'away'
|
auto_away: 0, // Seconds after which user status is set to 'away'
|
||||||
auto_login: false, // Currently only used in connection with anonymous login
|
auto_login: false, // Currently only used in connection with anonymous login
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
<i class="hide-occupants fa fa-times"></i>
|
<i class="hide-occupants fa fa-times"></i>
|
||||||
<p class="occupants-heading">{{{o.label_occupants}}}</p>
|
<p class="occupants-heading">{{{o.label_occupants}}}</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="dragresize dragresize-occupants-left"></div>
|
||||||
<ul class="occupant-list"></ul>
|
<ul class="occupant-list"></ul>
|
||||||
<div class="chatroom-features"></div>
|
<div class="chatroom-features"></div>
|
||||||
<!-- </div> -->
|
<!-- </div> -->
|
||||||
|
|
|
@ -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 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) {
|
u.renderImageURLs = function (_converse, el) {
|
||||||
if (!_converse.show_images_inline) {
|
if (!_converse.show_images_inline) {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user