Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Use vcard from the collection for rendering messages

Browse Source
This commit is contained in:
JC Brand 2018-05-03 20:05:45 +02:00
parent adf34c845c
commit 99915a26f4
10 changed files with 125 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
spec/chatbox.js
View File

@ -85,7 +85,9 @@
message = '/me is as well';
test_utils.sendMessage(view, message);
expect(view.el.querySelectorAll('.chat-action').length).toBe(2);
expect(_.includes($(view.el).find('.chat-msg-author:last').text(), '**Max Mustermann')).toBeTruthy();
return test_utils.waitUntil(() => $(view.el).find('.chat-msg-author:last').text() === '**Max Mustermann');
}).then(function () {
expect($(view.el).find('.chat-msg-text:last').text()).toBe(' is as well');
expect($(view.el).find('.chat-msg:last').hasClass('chat-msg-followup')).toBe(false);

107
spec/messages.js
View File

@ -67,8 +67,11 @@
var chat_content = chatboxview.el.querySelector('.chat-content');
expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter');
done();
return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
.then(function () {
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Max Frankfurter');
done();
});
});
}));
@ -120,9 +123,7 @@
test_utils.waitUntil(function () { return vcard_fetched; }, 100)
.then(function () {
expect(_converse.api.vcard.get).toHaveBeenCalled();
return test_utils.waitUntil(function () {
return chatbox.get('fullname') === mock.cur_names[0];
}, 100);
return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === mock.cur_names[0])
}).then(function () {
var author_el = chatboxview.el.querySelector('.chat-msg-author');
expect( _.includes(author_el.textContent, 'Max Frankfurter')).toBeTruthy();
@ -696,8 +697,11 @@
var chat_content = chatboxview.el.querySelector('.chat-content');
expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(msgtext);
expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
done();
return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === 'Candice van der Knijff')
.then(function () {
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
done();
});
}));
it("can be a carbon message that this user sent from a different client, as defined in XEP-0280",
@ -899,56 +903,59 @@
expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('delayed')).toEqual(true);
var chat_content = chatboxview.el.querySelector('.chat-content');
expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
return test_utils.waitUntil(() => chatbox.vcard.get('fullname') === 'Candice van der Knijff')
.then(function () {
var chat_content = chatboxview.el.querySelector('.chat-content');
expect(chat_content.querySelector('.chat-msg .chat-msg-text').textContent).toEqual(message);
expect(chat_content.querySelector('.chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('span.chat-msg-author').textContent).toBe('Candice van der Knijff');
var $day = $chat_content.find('.date-separator');
expect($day.length).toEqual(1);
expect($day.attr('class')).toEqual('message date-separator');
expect($day.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
var $day = $chat_content.find('.date-separator');
expect($day.length).toEqual(1);
expect($day.attr('class')).toEqual('message date-separator');
expect($day.data('isodate')).toEqual(moment(one_day_ago.startOf('day')).format());
var $time = $chat_content.find('time.separator-text');
expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
var $time = $chat_content.find('time.separator-text');
expect($time.text()).toEqual(moment(one_day_ago.startOf('day')).format("dddd MMM Do YYYY"));
message = 'This is a current message';
msg = $msg({
from: contact_jid,
to: _converse.connection.jid,
type: 'chat',
id: new Date().getTime()
}).c('body').t(message).up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
_converse.chatboxes.onMessage(msg);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
// Check that there is a <time> element, with the required
// props.
expect($chat_content[0].querySelectorAll('time').length).toEqual(2); // There are now two time elements
message = 'This is a current message';
msg = $msg({
from: contact_jid,
to: _converse.connection.jid,
type: 'chat',
id: new Date().getTime()
}).c('body').t(message).up()
.c('active', {'xmlns': 'http://jabber.org/protocol/chatstates'}).tree();
_converse.chatboxes.onMessage(msg);
expect(_converse.emit).toHaveBeenCalledWith('message', jasmine.any(Object));
// Check that there is a <time> element, with the required
// props.
expect($chat_content[0].querySelectorAll('time').length).toEqual(2); // There are now two time elements
var message_date = new Date();
$day = $chat_content.find('.date-separator:last');
expect($day.length).toEqual(1);
expect($day.attr('class')).toEqual('message date-separator');
expect($day.data('isodate')).toEqual(moment(message_date).startOf('day').format());
var message_date = new Date();
$day = $chat_content.find('.date-separator:last');
expect($day.length).toEqual(1);
expect($day.attr('class')).toEqual('message date-separator');
expect($day.data('isodate')).toEqual(moment(message_date).startOf('day').format());
$time = $chat_content.find('time.separator-text:last');
expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
$time = $chat_content.find('time.separator-text:last');
expect($time.text()).toEqual(moment(message_date).startOf('day').format("dddd MMM Do YYYY"));
// Normal checks for the 2nd message
expect(chatbox.messages.length).toEqual(2);
msg_obj = chatbox.messages.models[1];
expect(msg_obj.get('message')).toEqual(message);
expect(msg_obj.get('fullname')).toEqual(contact_name);
expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('delayed')).toEqual(false);
msg_txt = $chat_content.find('.chat-msg').last().find('.chat-msg-text').text();
expect(msg_txt).toEqual(message);
// Normal checks for the 2nd message
expect(chatbox.messages.length).toEqual(2);
msg_obj = chatbox.messages.models[1];
expect(msg_obj.get('message')).toEqual(message);
expect(msg_obj.get('fullname')).toEqual(contact_name);
expect(msg_obj.get('sender')).toEqual('them');
expect(msg_obj.get('delayed')).toEqual(false);
msg_txt = $chat_content.find('.chat-msg').last().find('.chat-msg-text').text();
expect(msg_txt).toEqual(message);
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-text').textContent).toEqual(message);
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent).toBe('Candice van der Knijff');
done();
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-text').textContent).toEqual(message);
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-time').textContent.match(/^[0-9][0-9]:[0-9][0-9]/)).toBeTruthy();
expect(chat_content.querySelector('.chat-msg:last-child .chat-msg-author').textContent).toBe('Candice van der Knijff');
done();
});
});
}));

31
spec/spoilers.js
View File

@ -44,14 +44,18 @@
_converse.chatboxes.onMessage(msg);
var view = _converse.chatboxviews.get(sender_jid);
expect(view.el.querySelector('.chat-msg-author').textContent).toBe('Max Frankfurter');
var message_content = view.el.querySelector('.chat-msg-text');
expect(message_content.textContent).toBe(spoiler);
return test_utils.waitUntil(() => view.model.vcard.get('fullname') === 'Max Frankfurter')
.then(function () {
expect(view.el.querySelector('.chat-msg-author').textContent).toBe('Max Frankfurter');
var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
expect(spoiler_hint_el.textContent).toBe(spoiler_hint);
done();
var message_content = view.el.querySelector('.chat-msg-text');
expect(message_content.textContent).toBe(spoiler);
var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
expect(spoiler_hint_el.textContent).toBe(spoiler_hint);
done();
});
}));
it("can be received without a hint",
@ -80,14 +84,17 @@
_converse.chatboxes.onMessage(msg);
var view = _converse.chatboxviews.get(sender_jid);
expect(_.includes(view.el.querySelector('.chat-msg-author').textContent, 'Max Frankfurter')).toBeTruthy();
return test_utils.waitUntil(() => view.model.vcard.get('fullname') === 'Max Frankfurter')
.then(function () {
expect(_.includes(view.el.querySelector('.chat-msg-author').textContent, 'Max Frankfurter')).toBeTruthy();
var message_content = view.el.querySelector('.chat-msg-text');
expect(message_content.textContent).toBe(spoiler);
var message_content = view.el.querySelector('.chat-msg-text');
expect(message_content.textContent).toBe(spoiler);
var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
expect(spoiler_hint_el.textContent).toBe('');
done();
var spoiler_hint_el = view.el.querySelector('.spoiler-hint');
expect(spoiler_hint_el.textContent).toBe('');
done();
});
}));
it("can be sent without a hint",

13
src/converse-chatboxes.js
View File

@ -111,6 +111,14 @@
}
},
getDisplayName () {
if (this.get('type') === 'groupchat') {
return this.get('nick');
} else {
return this.vcard.get('fullname') || this.get('from');
}
},
sendSlotRequestStanza () {
/* Send out an IQ stanza to request a file upload slot.
*
@ -294,7 +302,7 @@
return {
'fullname': fullname,
'username': _.isEmpty(fullname) ? _converse.bare_jid : fullname,
'from': _converse.bare_jid,
'sender': 'me',
'time': moment().format(),
'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
@ -404,7 +412,6 @@
if (attrs.type === 'groupchat') {
attrs.from = message.getAttribute('from');
attrs.nick = Strophe.unescapeNode(Strophe.getResourceFromJid(attrs.from));
attrs.username = attrs.nick;
if (attrs.from === this.get('nick')) {
attrs.sender = 'me';
} else {
@ -415,11 +422,9 @@
if (attrs.from === _converse.bare_jid) {
attrs.sender = 'me';
attrs.fullname = _converse.xmppstatus.get('fullname');
attrs.username = attrs.fullname || attrs.from;
} else {
attrs.sender = 'them';
attrs.fullname = this.get('fullname');
attrs.username = attrs.fullname || attrs.from;
}
}
_.each(sizzle(`x[xmlns="${Strophe.NS.OUTOFBAND}"]`, message), (xform) => {

22
src/converse-chatview.js
View File

@ -578,14 +578,14 @@
return this.scrollDown();
},
clearChatStateNotification (username, isodate) {
clearChatStateNotification (message, isodate) {
if (isodate) {
_.each(
sizzle(`.chat-state-notification[data-csn="${username}"][data-isodate="${isodate}"]`, this.content),
sizzle(`.chat-state-notification[data-csn="${message.get('from')}"][data-isodate="${isodate}"]`, this.content),
u.removeElement
);
} else {
_.each(sizzle(`.chat-state-notification[data-csn="${username}"]`, this.content), u.removeElement);
_.each(sizzle(`.chat-state-notification[data-csn="${message.get('from')}"]`, this.content), u.removeElement);
}
},
@ -593,23 +593,24 @@
/* Support for XEP-0085, Chat State Notifications */
let text;
const from = message.get('from'),
username = message.get('username');
this.clearChatStateNotification(username);
name = message.getDisplayName();
this.clearChatStateNotification(message);
if (message.get('chat_state') === _converse.COMPOSING) {
if (message.get('sender') === 'me') {
text = __('Typing from another device');
} else {
text = username +' '+__('is typing');
text = name +' '+__('is typing');
}
} else if (message.get('chat_state') === _converse.PAUSED) {
if (message.get('sender') === 'me') {
text = __('Stopped typing on the other device');
} else {
text = username +' '+__('has stopped typing');
text = name +' '+__('has stopped typing');
}
} else if (message.get('chat_state') === _converse.GONE) {
text = username +' '+__('has gone away');
text = name +' '+__('has gone away');
} else {
return;
}
@ -617,7 +618,6 @@
this.content.insertAdjacentHTML(
'beforeend',
tpl_csn({
'username': username,
'message': text,
'from': from,
'isodate': isodate
@ -625,7 +625,7 @@
this.scrollDown();
this.clear_status_timeout = window.setTimeout(
this.clearChatStateNotification.bind(this, username, isodate),
this.clearChatStateNotification.bind(this, message, isodate),
30000
);
return message;
@ -713,7 +713,7 @@
const view = new _converse.MessageView({'model': message});
this.insertMessage(view);
this.insertDayIndicator(view.el);
this.clearChatStateNotification(message.get('username'));
this.clearChatStateNotification(message);
this.setScrollPosition(view.el);
if (u.isNewMessage(message)) {

35
src/converse-message-view.js
View File

@ -70,17 +70,7 @@
_converse.MessageView = _converse.ViewWithAvatar.extend({
initialize () {
this.chatbox = this.model.collection.chatbox;
this.chatbox.on('change:fullname', (chatbox) => {
if (chatbox.get('type') !== 'chatroom') {
this.model.save({
'fullname': chatbox.get('fullname'),
'username': chatbox.get('fullname')
})
}
});
this.model.vcard.on('change:image', this.renderAvatar, this);
this.model.on('change:fullname', this.render, this);
this.model.vcard.on('change', this.render, this);
this.model.on('change:progress', this.renderFileUploadProgresBar, this);
this.model.on('change:type', this.render, this);
this.model.on('change:upload', this.render, this);
@ -101,20 +91,14 @@
template = this.model.get('is_spoiler') ? tpl_spoiler_message : tpl_message;
}
let username;
if (this.chatbox.get('type') === 'chatroom') {
username = this.model.get('nick');
} else {
username = this.model.get('fullname') || this.model.get('from');
}
const moment_time = moment(this.model.get('time'));
const msg = u.stringToElement(template(
_.extend(this.model.toJSON(), {
'pretty_time': moment_time.format(_converse.time_format),
'time': moment_time.format(),
'extra_classes': this.getExtraMessageClasses(),
'label_show': __('Show more')
'label_show': __('Show more'),
'username': this.model.getDisplayName()
})
));
@ -167,21 +151,12 @@
},
renderFileUploadProgresBar () {
let image, image_type;
if (this.model.get('sender') === 'me') {
image_type = _converse.xmppstatus.get('image_type');
image = _converse.xmppstatus.get('image');
} else {
image_type = this.chatbox.get('image_type');
image = this.chatbox.get('image');
}
const msg = u.stringToElement(tpl_file_progress(
_.extend(this.model.toJSON(), {
'filesize': filesize(this.model.get('file').size),
'image': image,
'image_type': image_type
})));
return this.replaceElement(msg);
this.replaceElement(msg);
this.renderAvatar();
},
isMeCommand () {

33
src/converse-minimize.js
View File

@ -169,6 +169,25 @@
},
},
ChatBoxHeading: {
render () {
const { _converse } = this.__super__,
{ __ } = _converse;
const result = this.__super__.render.apply(this, arguments);
const new_html = tpl_chatbox_minimize(
{info_minimize: __('Minimize this chat box')}
);
const el = this.el.querySelector('.toggle-chatbox-button');
if (el) {
el.outerHTML = new_html;
} else {
const button = this.el.querySelector('.close-chatbox-button');
button.insertAdjacentHTML('afterEnd', new_html);
}
}
},
ChatRoomView: {
events: {
'click .toggle-chatbox-button': 'minimize',
@ -522,20 +541,6 @@
_converse.emit('minimizedChatsInitialized');
}).catch(_.partial(_converse.log, _, Strophe.LogLevel.FATAL));
_converse.on('chatBoxOpened', function renderMinimizeButton (view) {
// Inserts a "minimize" button in the chatview's header
const new_html = tpl_chatbox_minimize(
{info_minimize: __('Minimize this chat box')}
);
const el = view.el.querySelector('.toggle-chatbox-button');
if (el) {
el.outerHTML = new_html;
} else {
const button = view.el.querySelector('.close-chatbox-button');
button.insertAdjacentHTML('afterEnd', new_html);
}
});
_converse.on('controlBoxOpened', function (chatbox) {
// Wrapped in anon method because at scan time, chatboxviews
// attr not set yet.

1
src/converse-muc.js
View File

@ -307,7 +307,6 @@
return {
'from': `${this.get('jid')}/${this.get('nick')}`,
'fullname': this.get('nick'),
'username': this.get('nick'),
'is_spoiler': is_spoiler,
'message': text ? u.httpToGeoUri(emojione.shortnameToUnicode(text), _converse) : undefined,
'sender': 'me',

2
src/templates/csn.html
View File

@ -1,3 +1,3 @@
<div class="message chat-info chat-state-notification"
data-isodate="{{{o.isodate}}}"
data-csn="{{{o.username}}}">{{{o.message}}}</div>
data-csn="{{{o.from}}}">{{{o.message}}}</div>

2
src/templates/file_progress.html
View File

@ -1,5 +1,5 @@
<div class="message chat-msg" data-isodate="{{{o.time}}}" data-msgid="{{{o.msgid}}}">
<img alt="User Avatar" class="avatar" height="36px" width="36px" src="data:{{{o.image_type}}};base64,{{{o.image}}}"/>
<canvas class="avatar" height="36" width="36"></canvas>
<div class="chat-msg-content">
<span class="chat-msg-text">Uploading file: <strong>{{{o.file.name}}}</strong>, {{{o.filesize}}}</span>
<progress value="{{{o.progress}}}"/>