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

Scroll down again after all images have been loaded.

Browse Source
This commit is contained in:
JC Brand 2018-01-17 19:03:47 +01:00
parent 115b887802
commit 210a75b02f
3 changed files with 29 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
spec/chatbox.js
View File

@ -1612,8 +1612,8 @@
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content'); var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.html()).toEqual( expect(msg.html()).toEqual(
'<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg"><img src="' + '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg"><img class="chat-image"'+
message + '" class="chat-image"></a>'); ' src="' + message + '"></a>');
message += "?param1=val1&param2=val2"; message += "?param1=val1&param2=val2";
test_utils.sendMessage(view, message); test_utils.sendMessage(view, message);
return test_utils.waitUntil(function () { return test_utils.waitUntil(function () {
@ -1623,9 +1623,8 @@
expect(view.sendMessage).toHaveBeenCalled(); expect(view.sendMessage).toHaveBeenCalled();
var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content'); var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.html()).toEqual( expect(msg.html()).toEqual(
'<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2"><img src="'+ '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2"><img'+
message.replace(/&/g, '&amp;') + ' class="chat-image" src="'+message.replace(/&/g, '&amp;')+'"></a>')
'" class="chat-image"></a>')
// Test now with two images in one message // Test now with two images in one message
message += ' hello world '+base_url+"/logo/conversejs.svg"; message += ' hello world '+base_url+"/logo/conversejs.svg";
@ -1638,9 +1637,9 @@
var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content'); var msg = $(view.el).find('.chat-content').find('.chat-message').last().find('.chat-msg-content');
expect(msg.html()).toEqual( expect(msg.html()).toEqual(
'<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2">'+ '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2">'+
'<img src="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2" class="chat-image"></a> hello world '+ '<img class="chat-image" src="'+base_url+'/logo/conversejs.svg?param1=val1&amp;param2=val2"></a> hello world '+
'<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg">'+ '<a target="_blank" rel="noopener" href="'+base_url+'/logo/conversejs.svg">'+
'<img src="'+base_url+'/logo/conversejs.svg" class="chat-image"></a>' '<img class="chat-image" src="'+base_url+'/logo/conversejs.svg"></a>'
) )
done(); done();
}); });

2
src/converse-chatview.js
View File

@ -573,7 +573,7 @@
msg_content.innerHTML = u.addEmoji( msg_content.innerHTML = u.addEmoji(
_converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}})) _converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
); );
u.renderImageURLs(msg_content); u.renderImageURLs(msg_content).then(this.scrollDown.bind(this));
return msg; return msg;
}, },

30
src/utils.js
View File

@ -180,15 +180,29 @@
}; };
u.renderImageURLs = function (obj) { u.renderImageURLs = function (obj) {
/* Returns a Promise which resolves once all images have been loaded.
*/
const list = obj.textContent.match(URL_REGEX) || []; const list = obj.textContent.match(URL_REGEX) || [];
_.forEach(list, function (url) { return Promise.all(
isImage(url).then(function (img) { _.map(list, (url) =>
img.className = 'chat-image'; new Promise((resolve, reject) =>
var anchors = sizzle(`a[href="${url}"]`, obj); isImage(url).then(function (img) {
_.each(anchors, (a) => { a.innerHTML = img.outerHTML; }); // XXX: need to create a new image, otherwise the event
}); // listener doesn't fire
}); const i = new Image();
return obj; i.className = 'chat-image';
i.src = img.src;
i.addEventListener('load', resolve);
// We also resolve for non-images, otherwise the
// Promise.all resolves prematurely.
i.addEventListener('error', resolve);
var anchors = sizzle(`a[href="${url}"]`, obj);
_.each(anchors, (a) => {
a.replaceChild(i, a.firstChild);
});
}).catch(resolve)
)
))
}; };
u.slideInAllElements = function (elements, duration=300) { u.slideInAllElements = function (elements, duration=300) {