123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222 |
- /**
- * Chat related user interface.
- */
- var Chat = (function (my) {
- var notificationInterval = false;
- var unreadMessages = 0;
-
- /**
- * Initializes chat related interface.
- */
- my.init = function () {
- var storedDisplayName = window.localStorage.displayname;
- if (storedDisplayName) {
- nickname = storedDisplayName;
-
- Chat.setChatConversationMode(true);
- }
-
- $('#nickinput').keydown(function(event) {
- if (event.keyCode == 13) {
- event.preventDefault();
- var val = this.value;
- this.value = '';
- if (!nickname) {
- nickname = val;
- window.localStorage.displayname = nickname;
-
- connection.emuc.addDisplayNameToPresence(nickname);
- connection.emuc.sendPresence();
-
- Chat.setChatConversationMode(true);
-
- return;
- }
- }
- });
-
- $('#usermsg').keydown(function(event) {
- if (event.keyCode == 13) {
- event.preventDefault();
- var message = this.value;
- $('#usermsg').val('').trigger('autosize.resize');
- this.focus();
- connection.emuc.sendMessage(message, nickname);
- }
- });
-
- var onTextAreaResize = function() {
- resizeChatConversation();
- scrollChatToBottom();
- };
- $('#usermsg').autosize({callback: onTextAreaResize});
-
- $("#chatspace").bind("shown",
- function() {
- unreadMessages = 0;
- setVisualNotification(false);
- });
- };
-
- /**
- * Appends the given message to the chat conversation.
- */
- my.updateChatConversation = function (nick, message) {
- var divClassName = '';
-
- if (nickname == nick) {
- divClassName = "localuser";
- }
- else {
- divClassName = "remoteuser";
-
- if (!$('#chatspace').is(":visible")) {
- unreadMessages++;
- Util.playSoundNotification('chatNotification');
- setVisualNotification(true);
- }
- }
-
- //replace links and smileys
- message = processReplacements(message);
-
- $('#chatconversation').append('<div class="' + divClassName + '"><b>'
- + nick + ': </b>' + message + '</div>');
- $('#chatconversation').animate(
- { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
- };
-
- /**
- * Opens / closes the chat area.
- */
- my.toggleChat = function () {
- var chatspace = $('#chatspace');
- var videospace = $('#videospace');
-
- var onShow = function () {
- resizeLarge();
- $('#chatspace').show("slide", { direction: "right", duration: 500});
- };
- var onHide = function () {
- $('#chatspace').hide("slide", { direction: "right", duration: 500});
- resizeLarge();
- };
-
- if (chatspace.is(":visible")) {
- videospace.animate( {right: 0},
- {queue: false,
- duration: 500,
- progress: onHide});
- }
- else {
- videospace.animate({right: chatspace.width()},
- {queue: false,
- duration: 500,
- progress: onShow,
- complete: function() {
- scrollChatToBottom();
- chatspace.trigger('shown');
- }
- });
- }
-
- // Request the focus in the nickname field or the chat input field.
- if ($('#nickname').css('visibility') == 'visible')
- $('#nickinput').focus();
- else {
- $('#usermsg').focus();
- }
- };
-
- /**
- * Sets the chat conversation mode.
- */
- my.setChatConversationMode = function (isConversationMode) {
- if (isConversationMode) {
- $('#nickname').css({visibility:"hidden"});
- $('#chatconversation').css({visibility:'visible'});
- $('#usermsg').css({visibility:'visible'});
- $('#usermsg').focus();
- }
- };
-
- /**
- * Resizes the chat area.
- */
- my.resizeChat = function () {
- var availableHeight = window.innerHeight;
- var availableWidth = window.innerWidth;
-
- var chatWidth = 200;
- if (availableWidth*0.2 < 200)
- chatWidth = availableWidth*0.2;
-
- $('#chatspace').width(chatWidth);
- $('#chatspace').height(availableHeight - 40);
-
- resizeChatConversation();
- };
-
- /**
- * Resizes the chat conversation.
- */
- function resizeChatConversation() {
- var usermsgStyleHeight = document.getElementById("usermsg").style.height;
- var usermsgHeight = usermsgStyleHeight
- .substring(0, usermsgStyleHeight.indexOf('px'));
-
- $('#chatconversation').width($('#chatspace').width() - 10);
- $('#chatconversation')
- .height(window.innerHeight - 50 - parseInt(usermsgHeight));
- };
-
- /**
- * Shows/hides a visual notification, indicating that a message has arrived.
- */
- function setVisualNotification(show) {
- var unreadMsgElement = document.getElementById('unreadMessages');
-
- if (unreadMessages) {
- unreadMsgElement.innerHTML = unreadMessages.toString();
-
- var chatButtonElement
- = document.getElementById('chat').parentNode;
- var leftIndent = (Util.getTextWidth(chatButtonElement)
- - Util.getTextWidth(unreadMsgElement) - 5)/2;
- var topIndent = (Util.getTextHeight(chatButtonElement)
- - Util.getTextHeight(unreadMsgElement))/2 - 2;
-
- unreadMsgElement.setAttribute(
- 'style',
- 'top:' + Util.toInteger(topIndent)
- + '; left:' + Util.toInteger(leftIndent) +';');
- }
- else
- unreadMsgElement.innerHTML = '';
-
- var glower = $('#chat');
-
- if (show && !notificationInterval) {
- notificationInterval = window.setInterval(function() {
- glower.toggleClass('active');
- }, 800);
- }
- else if (!show && notificationInterval) {
- window.clearInterval(notificationInterval);
- notificationInterval = false;
- glower.removeClass('active');
- }
- }
-
- /**
- * Scrolls chat to the bottom.
- */
- function scrollChatToBottom() {
- setTimeout(function() {
- $('#chatconversation').scrollTop(
- $('#chatconversation')[0].scrollHeight);
- }, 5);
- }
-
- return my;
- }(Chat || {}));
|