2018-04-16 17:46:48 +02:00
|
|
|
// Converse.js
|
|
|
|
// https://conversejs.org
|
|
|
|
//
|
2018-06-06 11:04:23 +02:00
|
|
|
// Copyright (c) 2013-2018, the Converse.js developers
|
2018-04-16 17:46:48 +02:00
|
|
|
// Licensed under the Mozilla Public License (MPLv2)
|
2018-04-16 21:58:11 +02:00
|
|
|
|
2018-04-16 17:46:48 +02:00
|
|
|
(function (root, factory) {
|
|
|
|
define([
|
2018-04-16 21:58:11 +02:00
|
|
|
"converse-core",
|
|
|
|
"xss",
|
|
|
|
"emojione",
|
2018-04-18 11:49:53 +02:00
|
|
|
"filesize",
|
2018-05-24 21:09:33 +02:00
|
|
|
"templates/csn.html",
|
|
|
|
"templates/file_progress.html",
|
|
|
|
"templates/info.html",
|
|
|
|
"templates/message.html",
|
2018-07-06 01:35:58 +02:00
|
|
|
"templates/message_versions_modal.html",
|
2018-04-16 17:46:48 +02:00
|
|
|
], factory);
|
|
|
|
}(this, function (
|
2018-04-17 15:17:39 +02:00
|
|
|
converse,
|
|
|
|
xss,
|
|
|
|
emojione,
|
2018-04-18 11:49:53 +02:00
|
|
|
filesize,
|
2018-05-04 17:26:43 +02:00
|
|
|
tpl_csn,
|
2018-04-18 16:55:26 +02:00
|
|
|
tpl_file_progress,
|
2018-04-18 10:03:21 +02:00
|
|
|
tpl_info,
|
2018-04-17 15:17:39 +02:00
|
|
|
tpl_message,
|
2018-07-20 15:54:59 +02:00
|
|
|
tpl_message_versions_modal
|
2018-04-16 17:46:48 +02:00
|
|
|
) {
|
|
|
|
"use strict";
|
|
|
|
const { Backbone, _, moment } = converse.env;
|
|
|
|
const u = converse.env.utils;
|
|
|
|
|
|
|
|
|
|
|
|
converse.plugins.add('converse-message-view', {
|
|
|
|
|
|
|
|
initialize () {
|
|
|
|
/* The initialize function gets called as soon as the plugin is
|
|
|
|
* loaded by converse.js's plugin machinery.
|
|
|
|
*/
|
|
|
|
const { _converse } = this,
|
|
|
|
{ __ } = _converse;
|
|
|
|
|
2018-05-03 19:01:57 +02:00
|
|
|
_converse.ViewWithAvatar = Backbone.NativeView.extend({
|
|
|
|
|
|
|
|
renderAvatar () {
|
|
|
|
const canvas_el = this.el.querySelector('canvas');
|
|
|
|
if (_.isNull(canvas_el)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const image_type = this.model.vcard.get('image_type'),
|
|
|
|
image = this.model.vcard.get('image'),
|
|
|
|
img_src = "data:" + image_type + ";base64," + image,
|
|
|
|
img = new Image();
|
|
|
|
|
|
|
|
img.onload = () => {
|
|
|
|
const ctx = canvas_el.getContext('2d'),
|
|
|
|
ratio = img.width / img.height;
|
|
|
|
ctx.clearRect(0, 0, canvas_el.width, canvas_el.height);
|
|
|
|
if (ratio < 1) {
|
|
|
|
ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * (1 / ratio));
|
|
|
|
} else {
|
|
|
|
ctx.drawImage(img, 0, 0, canvas_el.width, canvas_el.height * ratio);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
img.src = img_src;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2018-07-06 01:35:58 +02:00
|
|
|
|
|
|
|
_converse.MessageVersionsModal = _converse.BootstrapModal.extend({
|
|
|
|
|
|
|
|
toHTML () {
|
|
|
|
return tpl_message_versions_modal(_.extend(
|
|
|
|
this.model.toJSON(), {
|
|
|
|
'__': __
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
|
2018-05-03 19:01:57 +02:00
|
|
|
_converse.MessageView = _converse.ViewWithAvatar.extend({
|
2018-07-06 01:35:58 +02:00
|
|
|
events: {
|
2018-07-21 10:41:10 +02:00
|
|
|
'click .chat-msg__edit-modal': 'showMessageVersionsModal'
|
2018-07-06 01:35:58 +02:00
|
|
|
},
|
|
|
|
|
2018-04-16 17:46:48 +02:00
|
|
|
initialize () {
|
2018-05-03 20:05:45 +02:00
|
|
|
this.model.vcard.on('change', this.render, this);
|
2018-07-08 13:43:28 +02:00
|
|
|
this.model.on('change:correcting', this.onMessageCorrection, this);
|
2018-07-08 10:13:15 +02:00
|
|
|
this.model.on('change:message', this.render, this);
|
2018-04-17 15:17:39 +02:00
|
|
|
this.model.on('change:progress', this.renderFileUploadProgresBar, this);
|
|
|
|
this.model.on('change:type', this.render, this);
|
|
|
|
this.model.on('change:upload', this.render, this);
|
2018-05-04 17:26:43 +02:00
|
|
|
this.model.on('destroy', this.remove, this);
|
2018-04-16 17:46:48 +02:00
|
|
|
this.render();
|
|
|
|
},
|
|
|
|
|
|
|
|
render () {
|
2018-07-20 15:54:59 +02:00
|
|
|
const is_followup = u.hasClass('chat-msg--followup', this.el);
|
2018-05-12 12:09:17 +02:00
|
|
|
let msg;
|
2018-05-04 17:26:43 +02:00
|
|
|
if (this.model.isOnlyChatStateNotification()) {
|
2018-05-12 12:09:17 +02:00
|
|
|
this.renderChatStateNotification()
|
2018-05-04 17:26:43 +02:00
|
|
|
} else if (this.model.get('file') && !this.model.get('oob_url')) {
|
2018-05-12 12:09:17 +02:00
|
|
|
this.renderFileUploadProgresBar();
|
2018-04-18 10:03:21 +02:00
|
|
|
} else if (this.model.get('type') === 'error') {
|
2018-05-12 12:09:17 +02:00
|
|
|
this.renderErrorMessage();
|
2018-05-04 17:26:43 +02:00
|
|
|
} else {
|
2018-05-12 12:09:17 +02:00
|
|
|
this.renderChatMessage();
|
2018-05-04 17:26:43 +02:00
|
|
|
}
|
2018-05-12 12:09:17 +02:00
|
|
|
if (is_followup) {
|
2018-07-20 15:54:59 +02:00
|
|
|
u.addClass('chat-msg--followup', this.el);
|
2018-05-12 12:09:17 +02:00
|
|
|
}
|
|
|
|
return this.el;
|
2018-05-04 17:26:43 +02:00
|
|
|
},
|
|
|
|
|
2018-07-08 13:43:28 +02:00
|
|
|
onMessageCorrection () {
|
|
|
|
this.render();
|
|
|
|
if (!this.model.get('correcting') && this.model.changed.message) {
|
|
|
|
this.el.addEventListener('animationend', () => u.removeClass('onload', this.el));
|
|
|
|
u.addClass('onload', this.el);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-05-04 17:26:43 +02:00
|
|
|
replaceElement (msg) {
|
|
|
|
if (!_.isNil(this.el.parentElement)) {
|
|
|
|
this.el.parentElement.replaceChild(msg, this.el);
|
2018-04-17 15:17:39 +02:00
|
|
|
}
|
2018-05-04 17:26:43 +02:00
|
|
|
this.setElement(msg);
|
|
|
|
return this.el;
|
|
|
|
},
|
|
|
|
|
|
|
|
renderChatMessage () {
|
2018-07-20 15:54:59 +02:00
|
|
|
const is_me_message = this.isMeCommand(),
|
|
|
|
moment_time = moment(this.model.get('time')),
|
2018-05-08 19:51:56 +02:00
|
|
|
role = this.model.vcard.get('role'),
|
|
|
|
roles = role ? role.split(',') : [];
|
2018-05-01 18:18:02 +02:00
|
|
|
|
2018-07-20 15:54:59 +02:00
|
|
|
const msg = u.stringToElement(tpl_message(
|
2018-05-08 19:51:56 +02:00
|
|
|
_.extend(
|
|
|
|
this.model.toJSON(), {
|
2018-07-06 01:15:57 +02:00
|
|
|
'__': __,
|
2018-07-20 15:54:59 +02:00
|
|
|
'is_me_message': is_me_message,
|
2018-05-08 19:51:56 +02:00
|
|
|
'roles': roles,
|
2018-04-17 15:17:39 +02:00
|
|
|
'pretty_time': moment_time.format(_converse.time_format),
|
|
|
|
'time': moment_time.format(),
|
2018-04-16 17:46:48 +02:00
|
|
|
'extra_classes': this.getExtraMessageClasses(),
|
2018-05-03 20:05:45 +02:00
|
|
|
'label_show': __('Show more'),
|
|
|
|
'username': this.model.getDisplayName()
|
2018-04-16 17:46:48 +02:00
|
|
|
})
|
|
|
|
));
|
2018-04-16 18:08:00 +02:00
|
|
|
|
2018-07-20 15:54:59 +02:00
|
|
|
const url = this.model.get('oob_url');
|
2018-04-18 16:55:26 +02:00
|
|
|
if (url) {
|
2018-07-20 15:54:59 +02:00
|
|
|
msg.querySelector('.chat-msg__media').innerHTML = _.flow(
|
2018-04-18 16:55:26 +02:00
|
|
|
_.partial(u.renderFileURL, _converse),
|
|
|
|
_.partial(u.renderMovieURL, _converse),
|
|
|
|
_.partial(u.renderAudioURL, _converse),
|
2018-05-04 17:26:43 +02:00
|
|
|
_.partial(u.renderImageURL, _converse))(url);
|
2018-04-18 16:55:26 +02:00
|
|
|
}
|
|
|
|
|
2018-07-20 15:54:59 +02:00
|
|
|
let text = this.model.get('message');
|
|
|
|
if (is_me_message) {
|
|
|
|
text = text.replace(/^\/me/, '');
|
|
|
|
}
|
|
|
|
const msg_content = msg.querySelector('.chat-msg__text');
|
2018-04-18 16:55:26 +02:00
|
|
|
if (text !== url) {
|
|
|
|
text = xss.filterXSS(text, {'whiteList': {}});
|
|
|
|
msg_content.innerHTML = _.flow(
|
|
|
|
_.partial(u.geoUriToHttp, _, _converse.geouri_replacement),
|
|
|
|
u.addHyperlinks,
|
2018-06-30 15:07:30 +02:00
|
|
|
u.renderNewLines,
|
2018-04-18 16:55:26 +02:00
|
|
|
_.partial(u.addEmoji, _converse, emojione, _)
|
|
|
|
)(text);
|
|
|
|
}
|
2018-04-27 12:06:56 +02:00
|
|
|
u.renderImageURLs(_converse, msg_content).then(() => {
|
2018-04-17 15:17:39 +02:00
|
|
|
this.model.collection.trigger('rendered');
|
|
|
|
});
|
2018-05-01 18:18:02 +02:00
|
|
|
this.replaceElement(msg);
|
2018-05-04 17:26:43 +02:00
|
|
|
|
2018-05-01 18:18:02 +02:00
|
|
|
if (this.model.get('type') !== 'headline') {
|
|
|
|
this.renderAvatar();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2018-04-18 10:03:21 +02:00
|
|
|
renderErrorMessage () {
|
|
|
|
const moment_time = moment(this.model.get('time')),
|
|
|
|
msg = u.stringToElement(
|
|
|
|
tpl_info(_.extend(this.model.toJSON(), {
|
|
|
|
'extra_classes': 'chat-error',
|
|
|
|
'isodate': moment_time.format(),
|
|
|
|
'data': ''
|
|
|
|
})));
|
|
|
|
return this.replaceElement(msg);
|
|
|
|
},
|
|
|
|
|
2018-05-04 17:26:43 +02:00
|
|
|
renderChatStateNotification () {
|
|
|
|
let text;
|
|
|
|
const from = this.model.get('from'),
|
|
|
|
name = this.model.getDisplayName();
|
|
|
|
|
|
|
|
if (this.model.get('chat_state') === _converse.COMPOSING) {
|
|
|
|
if (this.model.get('sender') === 'me') {
|
|
|
|
text = __('Typing from another device');
|
|
|
|
} else {
|
2018-05-06 12:01:11 +02:00
|
|
|
text = __('%1$s is typing', name);
|
2018-05-04 17:26:43 +02:00
|
|
|
}
|
|
|
|
} else if (this.model.get('chat_state') === _converse.PAUSED) {
|
|
|
|
if (this.model.get('sender') === 'me') {
|
|
|
|
text = __('Stopped typing on the other device');
|
|
|
|
} else {
|
2018-05-06 12:01:11 +02:00
|
|
|
text = __('%1$s has stopped typing', name);
|
2018-05-04 17:26:43 +02:00
|
|
|
}
|
|
|
|
} else if (this.model.get('chat_state') === _converse.GONE) {
|
2018-05-06 12:01:11 +02:00
|
|
|
text = __('%1$s has gone away', name);
|
2018-05-04 17:26:43 +02:00
|
|
|
} else {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const isodate = moment().format();
|
|
|
|
this.replaceElement(
|
|
|
|
u.stringToElement(
|
|
|
|
tpl_csn({
|
|
|
|
'message': text,
|
|
|
|
'from': from,
|
|
|
|
'isodate': isodate
|
|
|
|
})));
|
|
|
|
},
|
|
|
|
|
2018-04-17 15:17:39 +02:00
|
|
|
renderFileUploadProgresBar () {
|
2018-04-18 16:55:26 +02:00
|
|
|
const msg = u.stringToElement(tpl_file_progress(
|
2018-04-27 16:58:49 +02:00
|
|
|
_.extend(this.model.toJSON(), {
|
|
|
|
'filesize': filesize(this.model.get('file').size),
|
|
|
|
})));
|
2018-05-03 20:05:45 +02:00
|
|
|
this.replaceElement(msg);
|
|
|
|
this.renderAvatar();
|
2018-04-16 17:46:48 +02:00
|
|
|
},
|
|
|
|
|
2018-07-06 01:35:58 +02:00
|
|
|
showMessageVersionsModal (ev) {
|
|
|
|
ev.preventDefault();
|
2018-07-06 01:50:25 +02:00
|
|
|
if (_.isUndefined(this.model.message_versions_modal)) {
|
|
|
|
this.model.message_versions_modal = new _converse.MessageVersionsModal({'model': this.model});
|
2018-07-06 01:35:58 +02:00
|
|
|
}
|
2018-07-06 01:50:25 +02:00
|
|
|
this.model.message_versions_modal.show(ev);
|
2018-07-06 01:35:58 +02:00
|
|
|
},
|
|
|
|
|
2018-04-17 15:17:39 +02:00
|
|
|
isMeCommand () {
|
2018-04-27 16:58:49 +02:00
|
|
|
const text = this.model.get('message');
|
|
|
|
if (!text) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
const match = text.match(/^\/(.*?)(?: (.*))?$/);
|
2018-04-17 15:17:39 +02:00
|
|
|
return match && match[1] === 'me';
|
|
|
|
},
|
|
|
|
|
|
|
|
processMessageText () {
|
|
|
|
var text = this.get('message');
|
|
|
|
text = u.geoUriToHttp(text, _converse.geouri_replacement);
|
|
|
|
},
|
|
|
|
|
|
|
|
getExtraMessageClasses () {
|
2018-06-07 12:45:53 +02:00
|
|
|
let extra_classes = this.model.get('is_delayed') && 'delayed' || '';
|
2018-04-16 17:46:48 +02:00
|
|
|
if (this.model.get('type') === 'groupchat' && this.model.get('sender') === 'them') {
|
|
|
|
if (this.model.collection.chatbox.isUserMentioned(this.model.get('message'))) {
|
|
|
|
// Add special class to mark groupchat messages
|
|
|
|
// in which we are mentioned.
|
|
|
|
extra_classes += ' mentioned';
|
|
|
|
}
|
|
|
|
}
|
2018-07-08 10:13:15 +02:00
|
|
|
if (this.model.get('correcting')) {
|
|
|
|
extra_classes += ' correcting';
|
|
|
|
}
|
2018-04-16 17:46:48 +02:00
|
|
|
return extra_classes;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
return converse;
|
|
|
|
}));
|