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

Listen to animationend event instead of using setTimeout

Browse Source
This commit is contained in:
JC Brand 2017-12-19 20:26:09 +00:00
parent d1fe6595b8
commit 19979c4840
3 changed files with 36 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
spec/chatbox.js
View File

@ -1569,9 +1569,8 @@
test_utils.openControlBox();
test_utils.openContactsPanel(_converse);
test_utils.waitUntil(function () {
return _converse.rosterview.$el.find('.roster-group').length;
}, 300)
.then(function () {
return _converse.rosterview.$el.find('.roster-group').length;
}, 300).then(function () {
var contact_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@localhost';
test_utils.openChatBoxFor(_converse, contact_jid);
var view = _converse.chatboxviews.get(contact_jid);

38
src/converse-chatview.js
View File

@ -40,8 +40,8 @@
tpl_spinner
) {
"use strict";
const { $msg, Backbone, Strophe, _, b64_sha1, moment, utils } = converse.env;
const { $msg, Backbone, Strophe, _, b64_sha1, moment } = converse.env;
const u = converse.env.utils;
const KEY = {
ENTER: 13,
FORWARD_SLASH: 47
@ -64,7 +64,7 @@
_.includes(ev.target.classList, 'insert-emoji')) {
return;
}
utils.slideInAllElements(
u.slideInAllElements(
document.querySelectorAll('.toolbar-menu')
)
}
@ -147,8 +147,8 @@
_.extend(
this.model.toJSON(), {
'transform': _converse.use_emojione ? emojione.shortnameToImage : emojione.shortnameToUnicode,
'emojis_by_category': utils.getEmojisByCategory(_converse, emojione),
'toned_emojis': utils.getTonedEmojis(_converse),
'emojis_by_category': u.getEmojisByCategory(_converse, emojione),
'toned_emojis': u.getTonedEmojis(_converse),
'skintones': ['tone1', 'tone2', 'tone3', 'tone4', 'tone5'],
'shouldBeHidden': this.shouldBeHidden
}
@ -275,7 +275,7 @@
this.model.on('sendMessage', this.sendMessage, this);
this.render().renderToolbar().insertHeading().fetchMessages();
utils.refreshWebkit();
u.refreshWebkit();
_converse.emit('chatBoxOpened', this);
_converse.emit('chatBoxInitialized', this);
},
@ -545,10 +545,10 @@
})
));
const msg_content = $msg[0].querySelector('.chat-msg-content');
msg_content.innerHTML = utils.addEmoji(
_converse, emojione, utils.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
msg_content.innerHTML = u.addEmoji(
_converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
);
utils.renderImageURLs(msg_content);
u.renderImageURLs(msg_content);
return $msg;
},
@ -600,14 +600,14 @@
handleTextMessage (message) {
this.showMessage(_.clone(message.attributes));
if (utils.isNewMessage(message) && message.get('sender') === 'me') {
if (u.isNewMessage(message) && message.get('sender') === 'me') {
// We remove the "scrolled" flag so that the chat area
// gets scrolled down. We always want to scroll down
// when the user writes a message as opposed to when a
// message is received.
this.model.set('scrolled', false);
} else {
if (utils.isNewMessage(message) && this.model.get('scrolled', true)) {
if (u.isNewMessage(message) && this.model.get('scrolled', true)) {
this.$el.find('.new-msgs-indicator').removeClass('hidden');
}
}
@ -833,9 +833,9 @@
document.querySelectorAll('.toolbar-menu'),
[this.emoji_picker_view.el]
);
utils.slideInAllElements(elements)
u.slideInAllElements(elements)
.then(_.partial(
utils.slideToggleElement,
u.slideToggleElement,
this.emoji_picker_view.el))
.then(this.focus.bind(this));
},
@ -920,12 +920,12 @@
hide () {
this.el.classList.add('hidden');
utils.refreshWebkit();
u.refreshWebkit();
return this;
},
afterShown (focus) {
if (utils.isPersistableModel(this.model)) {
if (u.isPersistableModel(this.model)) {
this.model.save();
}
this.setChatState(_converse.ACTIVE);
@ -941,7 +941,11 @@
if (focus) { this.focus(); }
return;
}
utils.fadeIn(this.el, _.bind(this.afterShown, this, focus));
const that = this;
u.fadeIn(this.el, function () {
that.afterShown();
if (focus) { that.focus(); }
});
},
show (focus) {
@ -987,7 +991,7 @@
scrolled = false;
this.onScrolledDown();
}
utils.safeSave(this.model, {'scrolled': scrolled});
u.safeSave(this.model, {'scrolled': scrolled});
},
viewUnreadMessages () {

31
src/utils.js
View File

@ -35,13 +35,6 @@
'warn': _.get(console, 'log') ? console.log.bind(console) : _.noop
}, console);
var afterAnimationEnd = function (el, callback) {
el.classList.remove('visible');
if (_.isFunction(callback)) {
callback();
}
};
var unescapeHTML = function (htmlEscapedText) {
/* Helper method that replace HTML-escaped symbols with equivalent characters
* (e.g. transform occurrences of '&' to '&')
@ -287,27 +280,29 @@
});
};
function afterAnimationEnds (el, callback) {
el.classList.remove('visible');
if (_.isFunction(callback)) {
callback();
}
}
u.fadeIn = function (el, callback) {
if (_.isNil(el)) {
logger.warn("Undefined or null element passed into fadeIn");
}
if (window.converse_disable_effects) { // Effects are disabled (for tests)
if (window.converse_disable_effects) {
el.classList.remove('hidden');
if (_.isFunction(callback)) {
callback();
}
return;
return afterAnimationEnds(el, callback);
}
if (_.includes(el.classList, 'hidden')) {
/* XXX: This doesn't appear to be working...
el.addEventListener("webkitAnimationEnd", _.partial(afterAnimationEnd, el, callback), false);
el.addEventListener("animationend", _.partial(afterAnimationEnd, el, callback), false);
*/
setTimeout(_.partial(afterAnimationEnd, el, callback), 351);
el.classList.add('visible');
el.classList.remove('hidden');
el.addEventListener("webkitAnimationEnd", _.partial(afterAnimationEnds, el, callback));
el.addEventListener("animationend", _.partial(afterAnimationEnds, el, callback));
el.addEventListener("oanimationend", _.partial(afterAnimationEnds, el, callback));
} else {
afterAnimationEnd(el, callback);
afterAnimationEnds(el, callback);
}
};