diff --git a/modules/UI/side_pannels/chat/Chat.js b/modules/UI/side_pannels/chat/Chat.js index 713cc1f88..00b2724de 100644 --- a/modules/UI/side_pannels/chat/Chat.js +++ b/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