Listen to `animationend` event instead of using setTimeout

spec/chatbox.js

@@ -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);

src/converse-chatview.js

@@ -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 () {

src/utils.js

@@ -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);
         }
     };