Move MUC views into a new plugin
This commit is contained in:
parent
d9709af7cf
commit
d1d43edf52
|
@ -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",
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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
2595
src/converse-muc-views.js
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue
Block a user