You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

chat.js 6.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /**
  2. * Chat related user interface.
  3. */
  4. var Chat = (function (my) {
  5. var notificationInterval = false;
  6. var unreadMessages = 0;
  7. /**
  8. * Initializes chat related interface.
  9. */
  10. my.init = function () {
  11. var storedDisplayName = window.localStorage.displayname;
  12. if (storedDisplayName) {
  13. nickname = storedDisplayName;
  14. Chat.setChatConversationMode(true);
  15. }
  16. $('#nickinput').keydown(function(event) {
  17. if (event.keyCode == 13) {
  18. event.preventDefault();
  19. var val = this.value;
  20. this.value = '';
  21. if (!nickname) {
  22. nickname = val;
  23. window.localStorage.displayname = nickname;
  24. connection.emuc.addDisplayNameToPresence(nickname);
  25. connection.emuc.sendPresence();
  26. Chat.setChatConversationMode(true);
  27. return;
  28. }
  29. }
  30. });
  31. $('#usermsg').keydown(function(event) {
  32. if (event.keyCode == 13) {
  33. event.preventDefault();
  34. var message = this.value;
  35. $('#usermsg').val('').trigger('autosize.resize');
  36. this.focus();
  37. connection.emuc.sendMessage(message, nickname);
  38. }
  39. });
  40. var onTextAreaResize = function() {
  41. resizeChatConversation();
  42. scrollChatToBottom();
  43. };
  44. $('#usermsg').autosize({callback: onTextAreaResize});
  45. $("#chatspace").bind("shown",
  46. function() {
  47. unreadMessages = 0;
  48. setVisualNotification(false);
  49. });
  50. };
  51. /**
  52. * Appends the given message to the chat conversation.
  53. */
  54. my.updateChatConversation = function (nick, message) {
  55. var divClassName = '';
  56. if (nickname == nick) {
  57. divClassName = "localuser";
  58. }
  59. else {
  60. divClassName = "remoteuser";
  61. if (!$('#chatspace').is(":visible")) {
  62. unreadMessages++;
  63. Util.playSoundNotification('chatNotification');
  64. setVisualNotification(true);
  65. }
  66. }
  67. //replace links and smileys
  68. message = processReplacements(message);
  69. $('#chatconversation').append('<div class="' + divClassName + '"><b>'
  70. + nick + ': </b>' + message + '</div>');
  71. $('#chatconversation').animate(
  72. { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
  73. };
  74. /**
  75. * Opens / closes the chat area.
  76. */
  77. my.toggleChat = function () {
  78. var chatspace = $('#chatspace');
  79. var videospace = $('#videospace');
  80. var onShow = function () {
  81. resizeLarge();
  82. $('#chatspace').show("slide", { direction: "right", duration: 500});
  83. };
  84. var onHide = function () {
  85. $('#chatspace').hide("slide", { direction: "right", duration: 500});
  86. resizeLarge();
  87. };
  88. if (chatspace.is(":visible")) {
  89. videospace.animate( {right: 0},
  90. {queue: false,
  91. duration: 500,
  92. progress: onHide});
  93. }
  94. else {
  95. videospace.animate({right: chatspace.width()},
  96. {queue: false,
  97. duration: 500,
  98. progress: onShow,
  99. complete: function() {
  100. scrollChatToBottom();
  101. chatspace.trigger('shown');
  102. }
  103. });
  104. }
  105. // Request the focus in the nickname field or the chat input field.
  106. if ($('#nickname').css('visibility') == 'visible')
  107. $('#nickinput').focus();
  108. else {
  109. $('#usermsg').focus();
  110. }
  111. };
  112. /**
  113. * Sets the chat conversation mode.
  114. */
  115. my.setChatConversationMode = function (isConversationMode) {
  116. if (isConversationMode) {
  117. $('#nickname').css({visibility:"hidden"});
  118. $('#chatconversation').css({visibility:'visible'});
  119. $('#usermsg').css({visibility:'visible'});
  120. $('#usermsg').focus();
  121. }
  122. };
  123. /**
  124. * Resizes the chat area.
  125. */
  126. my.resizeChat = function () {
  127. var availableHeight = window.innerHeight;
  128. var availableWidth = window.innerWidth;
  129. var chatWidth = 200;
  130. if (availableWidth*0.2 < 200)
  131. chatWidth = availableWidth*0.2;
  132. $('#chatspace').width(chatWidth);
  133. $('#chatspace').height(availableHeight - 40);
  134. resizeChatConversation();
  135. };
  136. /**
  137. * Resizes the chat conversation.
  138. */
  139. function resizeChatConversation() {
  140. var usermsgStyleHeight = document.getElementById("usermsg").style.height;
  141. var usermsgHeight = usermsgStyleHeight
  142. .substring(0, usermsgStyleHeight.indexOf('px'));
  143. $('#chatconversation').width($('#chatspace').width() - 10);
  144. $('#chatconversation')
  145. .height(window.innerHeight - 50 - parseInt(usermsgHeight));
  146. };
  147. /**
  148. * Shows/hides a visual notification, indicating that a message has arrived.
  149. */
  150. function setVisualNotification(show) {
  151. var unreadMsgElement = document.getElementById('unreadMessages');
  152. if (unreadMessages) {
  153. unreadMsgElement.innerHTML = unreadMessages.toString();
  154. var chatButtonElement
  155. = document.getElementById('chat').parentNode;
  156. var leftIndent = (Util.getTextWidth(chatButtonElement)
  157. - Util.getTextWidth(unreadMsgElement) - 5)/2;
  158. var topIndent = (Util.getTextHeight(chatButtonElement)
  159. - Util.getTextHeight(unreadMsgElement))/2 - 2;
  160. unreadMsgElement.setAttribute(
  161. 'style',
  162. 'top:' + Util.toInteger(topIndent)
  163. + '; left:' + Util.toInteger(leftIndent) +';');
  164. }
  165. else
  166. unreadMsgElement.innerHTML = '';
  167. var glower = $('#chat');
  168. if (show && !notificationInterval) {
  169. notificationInterval = window.setInterval(function() {
  170. glower.toggleClass('active');
  171. }, 800);
  172. }
  173. else if (!show && notificationInterval) {
  174. window.clearInterval(notificationInterval);
  175. notificationInterval = false;
  176. glower.removeClass('active');
  177. }
  178. }
  179. /**
  180. * Scrolls chat to the bottom.
  181. */
  182. function scrollChatToBottom() {
  183. setTimeout(function() {
  184. $('#chatconversation').scrollTop(
  185. $('#chatconversation')[0].scrollHeight);
  186. }, 5);
  187. }
  188. return my;
  189. }(Chat || {}));