Merge pull request #873 from jitsi/chat-updates

Chat updates

modules/UI/side_pannels/chat/Chat.js

@@ -9,14 +9,17 @@ import UIEvents from '../../../../service/UI/UIEvents';
 
 var smileys = require("./smileys.json").smileys;
 
-var notificationInterval = false;
 var unreadMessages = 0;
 
+/**
+ * The container id, which is and the element id.
+ */
+var CHAT_CONTAINER_ID = "chat_container";
 
 /**
- * Shows/hides a visual notification, indicating that a message has arrived.
+ *  Updates visual notification, indicating that a message has arrived.
  */
-function setVisualNotification(show) {
+function updateVisualNotification() {
     var unreadMsgElement = document.getElementById('unreadMessages');
 
     var glower = $('#toolbar_button_chat');
@@ -37,27 +40,9 @@ function setVisualNotification(show) {
             'style',
                 'top:' + topIndent +
                 '; left:' + leftIndent + ';');
-
-        if (!glower.hasClass('icon-chat-simple')) {
-            glower.removeClass('icon-chat');
-            glower.addClass('icon-chat-simple');
-        }
     }
     else {
         unreadMsgElement.innerHTML = '';
-        glower.removeClass('icon-chat-simple');
-        glower.addClass('icon-chat');
-    }
-
-    if (show && !notificationInterval) {
-        notificationInterval = window.setInterval(function () {
-            glower.toggleClass('active');
-        }, 800);
-    }
-    else if (!show && notificationInterval) {
-        window.clearInterval(notificationInterval);
-        notificationInterval = false;
-        glower.removeClass('active');
     }
 }
 
@@ -131,7 +116,7 @@ function addSmileys() {
  */
 function resizeChatConversation() {
     var msgareaHeight = $('#usermsg').outerHeight();
-    var chatspace = $('#chat_container');
+    var chatspace = $('#' + CHAT_CONTAINER_ID);
     var width = chatspace.width();
     var chat = $('#chatconversation');
     var smileys = $('#smileysarea');
@@ -187,10 +172,20 @@ var Chat = {
         };
         usermsg.autosize({callback: onTextAreaResize});
 
-        $("#chat_container").bind("shown",
-            function () {
+        eventEmitter.on(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            function(containerId, isVisible) {
+                if (containerId !== CHAT_CONTAINER_ID || !isVisible)
+                    return;
+
                 unreadMessages = 0;
-                setVisualNotification(false);
+                updateVisualNotification();
+
+                // if we are in conversation mode focus on the text input
+                // if we are not, focus on the display name input
+                if (APP.settings.getDisplayName())
+                    $('#usermsg').focus();
+                else
+                    $('#nickinput').focus();
             });
 
         addSmileys();
@@ -210,7 +205,7 @@ var Chat = {
             if (!Chat.isVisible()) {
                 unreadMessages++;
                 UIUtil.playSoundNotification('chatNotification');
-                setVisualNotification(true);
+                updateVisualNotification();
             }
         }
 
@@ -271,12 +266,18 @@ var Chat = {
 
     /**
      * Sets the chat conversation mode.
+     * Conversation mode is the normal chat mode, non conversation mode is
+     * where we ask user to input its display name.
      * @param {boolean} isConversationMode if chat should be in
      * conversation mode or not.
      */
     setChatConversationMode (isConversationMode) {
-        $('#chat_container')
+        $('#' + CHAT_CONTAINER_ID)
             .toggleClass('is-conversation-mode', isConversationMode);
+
+        // this is needed when we transition from no conversation mode to
+        // conversation mode. When user enters his nickname and hits enter,
+        // to focus on the write area.
         if (isConversationMode) {
             $('#usermsg').focus();
         }
@@ -286,7 +287,7 @@ var Chat = {
      * Resizes the chat area.
      */
     resizeChat (width, height) {
-        $('#chat_container').width(width).height(height);
+        $('#' + CHAT_CONTAINER_ID).width(width).height(height);
 
         resizeChatConversation();
     },
@@ -296,7 +297,7 @@ var Chat = {
      */
     isVisible () {
         return UIUtil.isVisible(
-            document.getElementById("chat_container"));
+            document.getElementById(CHAT_CONTAINER_ID));
     },
     /**
      * Shows and hides the window with the smileys