Commit 47aad318 authored by JC Brand's avatar JC Brand

Tricky refactoring.

Removed `_converse.chatboxviews.showChat` and trying to simplify how
chats are created and when they're shown.

Prompted by the work to split the MUC views into a separate plugin
parent d1d43edf
...@@ -135,6 +135,8 @@ require.config({ ...@@ -135,6 +135,8 @@ require.config({
// define module dependencies for modules not using define // define module dependencies for modules not using define
shim: { shim: {
'backbone.overview': { deps: ['backbone.nativeview'] },
'backbone.orderedlistview': { deps: ['backbone.nativeview'] },
'awesomplete': { exports: 'Awesomplete'}, 'awesomplete': { exports: 'Awesomplete'},
'emojione': { exports: 'emojione'}, 'emojione': { exports: 'emojione'},
'xss': { 'xss': {
......
...@@ -269,7 +269,7 @@ ...@@ -269,7 +269,7 @@
openBookmarkedRoom (bookmark) { openBookmarkedRoom (bookmark) {
if (bookmark.get('autojoin')) { if (bookmark.get('autojoin')) {
_converse.api.rooms.open(bookmark.get('jid'), bookmark.get('nick')); _converse.api.rooms.create(bookmark.get('jid'), bookmark.get('nick'));
} }
return bookmark; return bookmark;
}, },
......
...@@ -95,11 +95,13 @@ ...@@ -95,11 +95,13 @@
_converse.ChatBox = Backbone.Model.extend({ _converse.ChatBox = Backbone.Model.extend({
defaults: { defaults: {
'type': 'chatbox',
'show_avatar': true,
'bookmarked': false, 'bookmarked': false,
'chat_state': undefined, 'chat_state': undefined,
'image': _converse.DEFAULT_IMAGE,
'image_type': _converse.DEFAULT_IMAGE_TYPE,
'num_unread': 0, 'num_unread': 0,
'show_avatar': true,
'type': 'chatbox',
'url': '' 'url': ''
}, },
...@@ -244,11 +246,7 @@ ...@@ -244,11 +246,7 @@
}, },
onChatBoxesFetched (collection) { onChatBoxesFetched (collection) {
/* Show chat boxes upon receiving them from sessionStorage /* Show chat boxes upon receiving them from sessionStorage */
*
* This method gets overridden entirely in src/converse-controlbox.js
* if the controlbox plugin is active.
*/
collection.each((chatbox) => { collection.each((chatbox) => {
if (this.chatBoxMayBeShown(chatbox)) { if (this.chatBoxMayBeShown(chatbox)) {
chatbox.trigger('show'); chatbox.trigger('show');
...@@ -344,8 +342,8 @@ ...@@ -344,8 +342,8 @@
resource = from_resource; resource = from_resource;
} }
// Get chat box, but only create a new one when the message has a body. // Get chat box, but only create a new one when the message has a body.
const chatbox = this.getChatBox(contact_jid, !_.isNull(message.querySelector('body'))), const chatbox = this.getChatBox(contact_jid, {}, !_.isNull(message.querySelector('body'))),
msgid = message.getAttribute('id'); msgid = message.getAttribute('id');
if (chatbox) { if (chatbox) {
const messages = msgid && chatbox.messages.findWhere({msgid}) || []; const messages = msgid && chatbox.messages.findWhere({msgid}) || [];
...@@ -360,54 +358,30 @@ ...@@ -360,54 +358,30 @@
return true; return true;
}, },
createChatBox (jid, attrs) { getChatBox (jid, attrs={}, create) {
/* Creates a chat box
*
* Parameters:
* (String) jid - The JID of the user for whom a chat box
* gets created.
* (Object) attrs - Optional chat box atributes.
*/
const bare_jid = Strophe.getBareJidFromJid(jid),
roster_item = _converse.roster.get(bare_jid);
let roster_info = {};
if (! _.isUndefined(roster_item)) {
roster_info = {
'fullname': _.isEmpty(roster_item.get('fullname'))? jid: roster_item.get('fullname'),
'image_type': roster_item.get('image_type'),
'image': roster_item.get('image'),
'url': roster_item.get('url'),
};
} else if (!_converse.allow_non_roster_messaging) {
_converse.log(`Could not get roster item for JID ${bare_jid}`+
' and allow_non_roster_messaging is set to false',
Strophe.LogLevel.ERROR);
return;
}
return this.create(_.assignIn({
'id': bare_jid,
'jid': bare_jid,
'fullname': jid,
'image_type': _converse.DEFAULT_IMAGE_TYPE,
'image': _converse.DEFAULT_IMAGE,
'url': '',
}, roster_info, attrs || {}));
},
getChatBox (jid, create, attrs) {
/* Returns a chat box or optionally return a newly /* Returns a chat box or optionally return a newly
* created one if one doesn't exist. * created one if one doesn't exist.
* *
* Parameters: * Parameters:
* (String) jid - The JID of the user whose chat box we want * (String) jid - The JID of the user whose chat box we want
* (Boolean) create - Should a new chat box be created if none exists? * (Boolean) create - Should a new chat box be created if none exists?
* (Object) attrs - Optional chat box atributes. * (Object) attrs - Optional chat box atributes.
*/ */
if (_.isObject(jid)) {
create = attrs;
attrs = jid;
jid = attrs.jid;
} else {
attrs.jid = jid;
}
jid = jid.toLowerCase(); jid = jid.toLowerCase();
let chatbox = this.get(Strophe.getBareJidFromJid(jid)); let chatbox = this.get(Strophe.getBareJidFromJid(jid));
if (!chatbox && create) { if (!chatbox && create) {
chatbox = this.createChatBox(jid, attrs); chatbox = this.create(attrs, {
'error' (model, response) {
_converse.log(response.responseText);
}
});
} }
return chatbox; return chatbox;
} }
...@@ -449,7 +423,12 @@ ...@@ -449,7 +423,12 @@
}, },
render () { render () {
this.el.innerHTML = tpl_chatboxes(); try {
this.el.innerHTML = tpl_chatboxes();
} catch (e) {
this._ensureElement();
this.el.innerHTML = tpl_chatboxes();
}
this.row_el = this.el.querySelector('.row'); this.row_el = this.el.querySelector('.row');
}, },
...@@ -481,29 +460,6 @@ ...@@ -481,29 +460,6 @@
chatBoxMayBeShown (chatbox) { chatBoxMayBeShown (chatbox) {
return this.model.chatBoxMayBeShown(chatbox); return this.model.chatBoxMayBeShown(chatbox);
},
getChatBox (attrs, create) {
let chatbox = this.model.get(attrs.jid);
if (!chatbox && create) {
chatbox = this.model.create(attrs, {
'error' (model, response) {
_converse.log(response.responseText);
}
});
}
return chatbox;
},
showChat (attrs) {
/* Find the chat box and show it (if it may be shown).
* If it doesn't exist, create it.
*/
const chatbox = this.getChatBox(attrs, true);
if (this.chatBoxMayBeShown(chatbox)) {
chatbox.trigger('show', true);
}
return chatbox;
} }
}); });
...@@ -575,6 +531,7 @@ ...@@ -575,6 +531,7 @@
} }
} }
}); });
/************************ END API ************************/
} }
}); });
return converse; return converse;
......
...@@ -737,10 +737,6 @@ ...@@ -737,10 +737,6 @@
return message; return message;
}, },
shouldShowOnTextMessage () {
return !u.isVisible(this.el);
},
handleTextMessage (message) { handleTextMessage (message) {
this.showMessage(_.clone(message.attributes)); this.showMessage(_.clone(message.attributes));
if (u.isNewMessage(message)) { if (u.isNewMessage(message)) {
...@@ -754,11 +750,7 @@ ...@@ -754,11 +750,7 @@
this.showNewMessagesIndicator(); this.showNewMessagesIndicator();
} }
} }
if (this.shouldShowOnTextMessage()) { this.scrollDown();
this.show();
} else {
this.scrollDown();
}
}, },
handleErrorMessage (message) { handleErrorMessage (message) {
......
...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,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-chatboxes", "converse-rosterview"], dependencies: ["converse-chatboxes", "converse-rosterview", "converse-chatview"],
overrides: { overrides: {
// Overrides mentioned here will be picked up by converse.js's // Overrides mentioned here will be picked up by converse.js's
...@@ -126,15 +126,6 @@ ...@@ -126,15 +126,6 @@
return this.__super__.chatBoxMayBeShown.apply(this, arguments) && return this.__super__.chatBoxMayBeShown.apply(this, arguments) &&
chatbox.get('id') !== 'controlbox'; chatbox.get('id') !== 'controlbox';
}, },
onChatBoxesFetched (collection, resp) {
this.__super__.onChatBoxesFetched.apply(this, arguments);
const { _converse } = this.__super__;
if (!_.includes(_.map(collection, 'id'), 'controlbox')) {
_converse.addControlBox();
}
this.get('controlbox').save({connected:true});
},
}, },
ChatBoxViews: { ChatBoxViews: {
...@@ -715,8 +706,10 @@ ...@@ -715,8 +706,10 @@
Promise.all([ Promise.all([
_converse.api.waitUntil('connectionInitialized'), _converse.api.waitUntil('connectionInitialized'),
_converse.api.waitUntil('chatBoxesInitialized') _converse.api.waitUntil('chatBoxesInitialized')
]).then(_converse.addControlBox) ]).then(() => {
.catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL)); _converse.addControlBox();
_converse.chatboxes.get('controlbox').save({connected:true});
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
const disconnect = function () { const disconnect = function () {
/* Upon disconnection, set connected to `false`, so that if /* Upon disconnection, set connected to `false`, so that if
......
...@@ -65,6 +65,8 @@ ...@@ -65,6 +65,8 @@
ChatBox: { ChatBox: {
initialize () { initialize () {
this.__super__.initialize.apply(this, arguments); this.__super__.initialize.apply(this, arguments);
this.on('show', this.maximize, this);
if (this.get('id') === 'controlbox') { if (this.get('id') === 'controlbox') {
return; return;
} }
...@@ -114,11 +116,6 @@ ...@@ -114,11 +116,6 @@
this.__super__.isNewMessageHidden.apply(this, arguments); this.__super__.isNewMessageHidden.apply(this, arguments);
}, },
shouldShowOnTextMessage () {
return !this.model.get('minimized') &&
this.__super__.shouldShowOnTextMessage.apply(this, arguments);
},
setChatBoxHeight (height) { setChatBoxHeight (height) {
if (!this.model.get('minimized')) { if (!this.model.get('minimized')) {
return this.__super__.setChatBoxHeight.apply(this, arguments); return this.__super__.setChatBoxHeight.apply(this, arguments);
...@@ -211,17 +208,6 @@ ...@@ -211,17 +208,6 @@
}, },
ChatBoxViews: { ChatBoxViews: {
showChat (attrs) {
/* Find the chat box and show it. If it doesn't exist, create it.
*/
const chatbox = this.__super__.showChat.apply(this, arguments);
const maximize = _.isUndefined(attrs.maximize) ? true : attrs.maximize;
if (chatbox.get('minimized') && maximize) {
chatbox.maximize();
}
return chatbox;
},
getChatBoxWidth (view) { getChatBoxWidth (view) {
if (!view.model.get('minimized') && u.isVisible(view.el)) { if (!view.model.get('minimized') && u.isVisible(view.el)) {
return u.getOuterWidth(view.el, true); return u.getOuterWidth(view.el, true);
......
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
initialize () { initialize () {
this.render().insertIntoDOM(); this.render().insertIntoDOM();
this.modal = new bootstrap.Modal(this.el, { this.modal = new bootstrap.Modal(this.el, {
backdrop: 'static', // we don't want to dismiss Modal when Modal or backdrop is the click event target backdrop: 'static',
keyboard: true // we want to dismiss Modal on pressing Esc key keyboard: true
}); });
}, },
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"tpl!rooms_list_item" "tpl!rooms_list_item"
], factory); ], factory);
}(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) { }(this, function (utils, converse, muc, tpl_rooms_list, tpl_rooms_list_item) {
const { Backbone, Promise, b64_sha1, sizzle, _ } = converse.env; const { Backbone, Promise, Strophe, b64_sha1, sizzle, _ } = converse.env;
const u = converse.env.utils; const u = converse.env.utils;
converse.plugins.add('converse-roomslist', { converse.plugins.add('converse-roomslist', {
...@@ -137,6 +137,7 @@ ...@@ -137,6 +137,7 @@
'click .close-room': 'closeRoom', 'click .close-room': 'closeRoom',
'click .open-rooms-toggle': 'toggleRoomsList', 'click .open-rooms-toggle': 'toggleRoomsList',
'click .remove-bookmark': 'removeBookmark', 'click .remove-bookmark': 'removeBookmark',
'click a.open-room': 'openRoom',
}, },
listSelector: '.rooms-list', listSelector: '.rooms-list',
ItemView: _converse.RoomsListElementView, ItemView: _converse.RoomsListElementView,
...@@ -192,6 +193,16 @@ ...@@ -192,6 +193,16 @@
u.showElement(this.el); u.showElement(this.el);
}, },
openRoom (ev) {
ev.preventDefault();
const name = ev.target.textContent;
const jid = ev.target.getAttribute('data-room-jid');
const data = {
'name': name || Strophe.unescapeNode(Strophe.getNodeFromJid(jid)) || jid
}
_converse.api.rooms.open(jid, data);
},
closeRoom (ev) { closeRoom (ev) {
ev.preventDefault(); ev.preventDefault();
const name = ev.target.getAttribute('data-room-name'); const name = ev.target.getAttribute('data-room-name');
......
...@@ -379,7 +379,8 @@ ...@@ -379,7 +379,8 @@
openChat (ev) { openChat (ev) {
if (ev && ev.preventDefault) { ev.preventDefault(); } if (ev && ev.preventDefault) { ev.preventDefault(); }
return _converse.chatboxviews.showChat(this.model.attributes, true); const attrs = this.model.attributes;
_converse.api.chats.open(attrs.jid, attrs);
}, },
removeContact (ev) { removeContact (ev) {
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
// an error will be raised if the plugin is not found. // an error will be raised if the plugin is not found.
// //
// 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-muc', 'converse-controlbox', 'converse-rosterview'], dependencies: ['converse-chatboxes', 'converse-muc', 'converse-controlbox', 'converse-rosterview'],
enabled (_converse) { enabled (_converse) {
return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode); return _.includes(['mobile', 'fullscreen', 'embedded'], _converse.view_mode);
...@@ -49,80 +49,37 @@ ...@@ -49,80 +49,37 @@
// relevant objects or classes. // relevant objects or classes.
// //
// new functions which don't exist yet can also be added. // new functions which don't exist yet can also be added.
ChatBoxes: { ChatBoxes: {
chatBoxMayBeShown (chatbox) {
return !chatbox.get('hidden');
},
createChatBox (jid, attrs) { createChatBox (jid, attrs) {
/* Make sure new chat boxes are hidden by default. /* Make sure new chat boxes are hidden by default. */
*/
attrs = attrs || {}; attrs = attrs || {};
attrs.hidden = true; attrs.hidden = true;
return this.__super__.createChatBox.call(this, jid, attrs); return this.__super__.createChatBox.call(this, jid, attrs);
} }
}, },
RoomsPanel: {
parseRoomDataFromEvent (ev) {
/* We set hidden to false for rooms opened manually by the
* user. They should always be shown.
*/
const result = this.__super__.parseRoomDataFromEvent.apply(this, arguments);
if (_.isUndefined(result)) {
return
}
result.hidden = false;
return result;
}
},
ChatBoxViews: {
showChat (attrs, force) {
/* We only have one chat visible at any one
* time. So before opening a chat, we make sure all other
* chats are hidden.
*/
const { _converse } = this.__super__;
const chatbox = this.getChatBox(attrs, true);
const hidden = _.isUndefined(attrs.hidden) ? chatbox.get('hidden') : attrs.hidden;
if ((force || !hidden) && _converse.connection.authenticated) {
_.each(_converse.chatboxviews.xget(chatbox.get('id')), hideChat);
chatbox.save({'hidden': false});
}
return this.__super__.showChat.apply(this, arguments);
}
},
ChatBoxView: { ChatBoxView: {
show (focus) { _show (focus) {
/* We only have one chat visible at any one /* We only have one chat visible at any one
* time. So before opening a chat, we make sure all other * time. So before opening a chat, we make sure all other
* chats are hidden. * chats are hidden.
*/ */
if (!this.model.get('hidden')) { _.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat);
_.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat); this.model.set('hidden', false);
return this.__super__.show.apply(this, arguments); return this.__super__._show.apply(this, arguments);
}
} }
}, },
ChatRoomView: { ChatRoomView: {
show (focus) { show (focus) {
if (!this.model.get('hidden')) { _.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat);
_.each(this.__super__._converse.chatboxviews.xget(this.model.get('id')), hideChat); this.model.set('hidden', false);
return this.__super__.show.apply(this, arguments); return this.__super__.show.apply(this, arguments);
}
} }
},
RosterContactView: {
openChat (ev) {
/* We only have one chat visible at any one
* time. So before opening a chat, we make sure all other
* chats are hidden.
*/
_.each(this.__super__._converse.chatboxviews.xget('controlbox'), hideChat);
this.model.save({'hidden': false});
return this.__super__.openChat.apply(this, arguments);
},
} }
} }
}); });
......
<!-- <div id="chatrooms"> --> <!-- <div id="chatrooms"> -->
<form class="add-chatroom"></form> <form class="add-chatroom"></form>
<div class="d-flex"> <div class="d-flex">
<span class="w-100">Chatrooms</span> <span class="w-100">{{{o.heading_chatrooms}}}</span>
<a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a> <a class="chatbox-btn fa fa-users" title="{{{o.title_new_room}}}" data-toggle="modal" data-target="#chatroomsModal"></a>
</div> </div>
<div class="list-container open-rooms-list rooms-list-container"></div> <div class="list-container open-rooms-list rooms-list-container"></div>
......
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