Move MUC views into a new plugin

This commit is contained in:
JC Brand 2018-02-21 22:29:21 +01:00
parent d9709af7cf
commit d1d43edf52
6 changed files with 2650 additions and 188 deletions

View File

@ -76,6 +76,7 @@ require.config({
"converse-mam": "src/converse-mam",
"converse-minimize": "src/converse-minimize",
"converse-muc": "src/converse-muc",
"converse-muc-views": "src/converse-muc-views",
"converse-muc-embedded": "src/converse-muc-embedded",
"converse-notification": "src/converse-notification",
"converse-otr": "src/converse-otr",

View File

@ -415,21 +415,10 @@
_converse.ChatBoxViews = Backbone.Overview.extend({
initialize () {
this.model.on("add", this.onChatBoxAdded, this);
this.model.on("destroy", this.removeChat, this);
this.render();
},
render () {
this.el.innerHTML = tpl_chatboxes();
this.row_el = this.el.querySelector('.row');
},
_ensureElement () {
/* Override method from backbone.js
* If the #conversejs element doesn't exist, create it.
*/
* If the #conversejs element doesn't exist, create it.
*/
if (!this.el) {
let el = _converse.root.querySelector('#conversejs');
if (_.isNull(el)) {
@ -453,6 +442,17 @@
}
},
initialize () {
this.model.on("add", this.onChatBoxAdded, this);
this.model.on("destroy", this.removeChat, this);
this.render();
},
render () {
this.el.innerHTML = tpl_chatboxes();
this.row_el = this.el.querySelector('.row');
},
insertRowColumn (el) {
/* Add a new DOM element (likely a chat box) into the
* the row managed by this overview.
@ -507,7 +507,13 @@
}
});
// BEGIN: Event handlers
// TODO: move to converse-chatboxviews.js and use there in the API
_converse.getViewForChatBox = function (chatbox) {
if (!chatbox) { return; }
return _converse.chatboxviews.get(chatbox.get('id'));
};
/************************ BEGIN Event Handlers ************************/
_converse.api.listen.on('pluginsInitialized', () => {
_converse.chatboxes = new _converse.ChatBoxes();
_converse.chatboxviews = new _converse.ChatBoxViews({
@ -520,33 +526,36 @@
_converse.chatboxes.remove(); // Don't call off(), events won't get re-registered upon reconnect.
delete _converse.chatboxes.browserStorage;
});
// END: Event handlers
/************************ END Event Handlers ************************/
_converse.getViewForChatBox = function (chatbox) {
if (!chatbox) { return; }
return _converse.chatboxviews.get(chatbox.get('id'));
};
/* We extend the default converse.js API */
/************************ BEGIN API ************************/
_.extend(_converse.api, {
'chats': {
'create' (jids, attrs) {
if (_.isUndefined(jids)) {
_converse.log("chats.create: You need to provide at least one JID", Strophe.LogLevel.ERROR);
return null;
} else if (_.isString(jids)) {
const chatbox = _converse.chatboxes.getChatBox(jids, attrs, true);
if (_.isNil(chatbox)) {
_converse.log("Could not open chatbox for JID: "+jids, Strophe.LogLevel.ERROR);
return;
}
return chatbox;
}
return _.map(jids, (jid) => _converse.chatboxes.getChatBox(jid, attrs, true).trigger('show'));
},
'open' (jids, attrs) {
if (_.isUndefined(jids)) {
_converse.log("chats.open: You need to provide at least one JID", Strophe.LogLevel.ERROR);
return null;
} else if (_.isString(jids)) {
const chatbox = _converse.chatboxes.getChatBox(jids, true, attrs);
if (_.isNil(chatbox)) {
_converse.log("Could not open chatbox for JID: "+jids);
return;
}
return _converse.getViewForChatBox(chatbox.trigger('show'));
const chatbox = _converse.api.chats.create(jids, attrs);
chatbox.trigger('show');
return chatbox;
}
return _.map(jids, (jid) =>
_converse.getViewForChatBox(
_converse.chatboxes.getChatBox(jid, true, attrs).trigger('show')
)
);
return _.map(jids, (jid) => _converse.api.chats.create(jid, attrs).trigger('show'));
},
'get' (jids) {
if (_.isUndefined(jids)) {
@ -555,21 +564,14 @@
// FIXME: Leaky abstraction from MUC. We need to add a
// base type for chat boxes, and check for that.
if (chatbox.get('type') !== 'chatroom') {
result.push(_converse.getViewForChatBox(chatbox));
result.push(chatbox);
}
});
return result;
} else if (_.isString(jids)) {
return _converse.getViewForChatBox(_converse.chatboxes.getChatBox(jids));
return _converse.chatboxes.getChatBox(jids);
}
return _.map(jids,
_.partial(
_.flow(
_converse.chatboxes.getChatBox.bind(_converse.chatboxes),
_converse.getViewForChatBox.bind(_converse)
), _, true
)
);
return _.map(jids, _.partial(_converse.chatboxes.getChatBox.bind(_converse.chatboxes), _, {}, true));
}
}
});

View File

@ -80,6 +80,7 @@
'converse-minimize',
'converse-muc',
'converse-muc-embedded',
'converse-muc-views',
'converse-notification',
'converse-otr',
'converse-ping',

2595
src/converse-muc-views.js Normal file

File diff suppressed because it is too large Load Diff

View File

@ -417,156 +417,18 @@
}
});
_converse.ChatRoomView = _converse.ChatBoxView.extend({
/* Backbone.NativeView which renders a chat room, based upon the view
* for normal one-on-one chat boxes.
*/
length: 300,
tagName: 'div',
className: 'chatbox chatroom hidden',
is_chatroom: true,
events: {
'click .close-chatbox-button': 'close',
'click .configure-chatroom-button': 'getAndRenderConfigurationForm',
'click .toggle-smiley': 'toggleEmojiMenu',
'click .toggle-smiley ul.emoji-picker li': 'insertEmoji',
'click .toggle-clear': 'clearChatRoomMessages',
'click .toggle-call': 'toggleCall',
'click .toggle-occupants a': 'toggleOccupants',
'click .new-msgs-indicator': 'viewUnreadMessages',
'click .occupant': 'onOccupantClicked',
'keypress .chat-textarea': 'keyPressed',
'click .send-button': 'onFormSubmitted'
},
initialize () {
this.scrollDown = _.debounce(this._scrollDown, 250);
this.markScrolled = _.debounce(this._markScrolled, 100);
_converse.ChatRoomOccupant = Backbone.Model.extend({
initialize (attributes) {
this.set(_.extend({
'id': _converse.connection.getUniqueId(),
}, attributes));
}
});
this.model.messages.on('add', this.onMessageAdded, this);
this.model.on('show', this.show, this);
this.model.on('destroy', this.hide, this);
this.model.on('change:connection_status', this.afterConnected, this);
this.model.on('change:affiliation', this.renderHeading, this);
this.model.on('change:chat_state', this.sendChatState, this);
this.model.on('change:description', this.renderHeading, this);
this.model.on('change:name', this.renderHeading, this);
this.createEmojiPicker();
this.createOccupantsView();
this.render().insertIntoDOM();
this.registerHandlers();
if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
const handler = () => {
this.join();
this.fetchMessages();
_converse.emit('chatRoomOpened', this);
}
this.getRoomFeatures().then(handler, handler);
} else {
this.fetchMessages();
_converse.emit('chatRoomOpened', this);
}
},
render () {
this.setClasses();
this.el.setAttribute('id', this.model.get('box_id'));
this.el.innerHTML = tpl_chatroom();
this.renderHeading();
this.renderChatArea();
if (this.model.get('connection_status') !== converse.ROOMSTATUS.ENTERED) {
this.showSpinner();
}
return this;
},
setClasses () {
if (_converse.view_mode === 'fullscreen') {
this.el.classList.add('col-xl-10');
this.el.classList.add('col-md-9');
} else {
this.el.classList.add('col');
this.el.classList.add('col-lg-4');
this.el.classList.add('col-md-6');
this.el.classList.add('col-sm-8');
this.el.classList.add('col-sx-12');
this.el.classList.add('w-100');
}
},
renderHeading () {
/* Render the heading UI of the chat room. */
this.el.querySelector('.chat-head-chatroom').innerHTML = this.generateHeadingHTML();
},
renderChatArea () {
/* Render the UI container in which chat room messages will appear.
*/
if (_.isNull(this.el.querySelector('.chat-area'))) {
const container_el = this.el.querySelector('.chatroom-body');
container_el.innerHTML = tpl_chatarea({
'label_message': __('Message'),
'label_send': __('Send'),
'show_send_button': _converse.show_send_button,
'show_toolbar': _converse.show_toolbar,
'unread_msgs': __('You have unread messages')
});
container_el.insertAdjacentElement('beforeend', this.occupantsview.el);
this.renderToolbar(tpl_chatroom_toolbar);
this.content = this.el.querySelector('.chat-content');
this.toggleOccupants(null, true);
}
return this;
},
createOccupantsView () {
/* Create the ChatRoomOccupantsView Backbone.NativeView
*/
const model = new _converse.ChatRoomOccupants();
model.chatroomview = this;
this.occupantsview = new _converse.ChatRoomOccupantsView({'model': model});
this.occupantsview.model.on('change:role', this.informOfOccupantsRoleChange, this);
return this;
},
informOfOccupantsRoleChange (occupant, changed) {
const previous_role = occupant._previousAttributes.role;
if (previous_role === 'moderator') {
this.showStatusNotification(
__("%1$s is no longer a moderator.", occupant.get('nick')),
false, true)
}
if (previous_role === 'visitor') {
this.showStatusNotification(
__("%1$s has been given a voice again.", occupant.get('nick')),
false, true)
}
if (occupant.get('role') === 'visitor') {
this.showStatusNotification(
__("%1$s has been muted.", occupant.get('nick')),
false, true)
}
if (occupant.get('role') === 'moderator') {
this.showStatusNotification(
__("%1$s is now a moderator.", occupant.get('nick')),
false, true)
}
},
generateHeadingHTML () {
/* Returns the heading HTML to be rendered.
*/
return tpl_chatroom_head(
_.extend(this.model.toJSON(), {
Strophe: Strophe,
info_close: __('Close and leave this room'),
info_configure: __('Configure this room'),
description: this.model.get('description') || ''
}));
},
_converse.ChatRoomOccupants = Backbone.Collection.extend({
model: _converse.ChatRoomOccupant,
afterShown (focus) {
/* Override from converse-chatview, specifically to avoid

View File

@ -13,6 +13,7 @@ if (typeof define !== 'undefined') {
"converse-roomslist", // Show currently open chat rooms
"converse-mam", // XEP-0313 Message Archive Management
"converse-muc", // XEP-0045 Multi-user chat
"converse-muc-views", // Views related to MUC
"converse-muc-embedded",
"converse-vcard", // XEP-0054 VCard-temp
"converse-otr", // Off-the-record encryption for one-on-one messages