Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.

chat.js 6.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  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 (from, displayName, message) {
  55. var divClassName = '';
  56. if (connection.emuc.myroomjid == from) {
  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. + displayName + ': </b>'
  71. + message + '</div>');
  72. $('#chatconversation').animate(
  73. { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
  74. };
  75. /**
  76. * Opens / closes the chat area.
  77. */
  78. my.toggleChat = function () {
  79. var chatspace = $('#chatspace');
  80. var videospace = $('#videospace');
  81. var onShow = function () {
  82. resizeLarge();
  83. $('#chatspace').show("slide", { direction: "right", duration: 500});
  84. };
  85. var onHide = function () {
  86. $('#chatspace').hide("slide", { direction: "right", duration: 500});
  87. resizeLarge();
  88. };
  89. if (chatspace.is(":visible")) {
  90. videospace.animate( {right: 0},
  91. {queue: false,
  92. duration: 500,
  93. progress: onHide});
  94. }
  95. else {
  96. videospace.animate({right: chatspace.width()},
  97. {queue: false,
  98. duration: 500,
  99. progress: onShow,
  100. complete: function() {
  101. scrollChatToBottom();
  102. chatspace.trigger('shown');
  103. }
  104. });
  105. }
  106. // Request the focus in the nickname field or the chat input field.
  107. if ($('#nickname').css('visibility') == 'visible')
  108. $('#nickinput').focus();
  109. else {
  110. $('#usermsg').focus();
  111. }
  112. };
  113. /**
  114. * Sets the chat conversation mode.
  115. */
  116. my.setChatConversationMode = function (isConversationMode) {
  117. if (isConversationMode) {
  118. $('#nickname').css({visibility:"hidden"});
  119. $('#chatconversation').css({visibility:'visible'});
  120. $('#usermsg').css({visibility:'visible'});
  121. $('#usermsg').focus();
  122. }
  123. };
  124. /**
  125. * Resizes the chat area.
  126. */
  127. my.resizeChat = function () {
  128. var availableHeight = window.innerHeight;
  129. var availableWidth = window.innerWidth;
  130. var chatWidth = 200;
  131. if (availableWidth*0.2 < 200)
  132. chatWidth = availableWidth*0.2;
  133. $('#chatspace').width(chatWidth);
  134. $('#chatspace').height(availableHeight - 40);
  135. resizeChatConversation();
  136. };
  137. /**
  138. * Resizes the chat conversation.
  139. */
  140. function resizeChatConversation() {
  141. var usermsgStyleHeight = document.getElementById("usermsg").style.height;
  142. var usermsgHeight = usermsgStyleHeight
  143. .substring(0, usermsgStyleHeight.indexOf('px'));
  144. $('#chatconversation').width($('#chatspace').width() - 10);
  145. $('#chatconversation')
  146. .height(window.innerHeight - 50 - parseInt(usermsgHeight));
  147. };
  148. /**
  149. * Shows/hides a visual notification, indicating that a message has arrived.
  150. */
  151. function setVisualNotification(show) {
  152. var unreadMsgElement = document.getElementById('unreadMessages');
  153. if (unreadMessages) {
  154. unreadMsgElement.innerHTML = unreadMessages.toString();
  155. var chatButtonElement
  156. = document.getElementById('chat').parentNode;
  157. var leftIndent = (Util.getTextWidth(chatButtonElement)
  158. - Util.getTextWidth(unreadMsgElement) - 5)/2;
  159. var topIndent = (Util.getTextHeight(chatButtonElement)
  160. - Util.getTextHeight(unreadMsgElement))/2 - 2;
  161. unreadMsgElement.setAttribute(
  162. 'style',
  163. 'top:' + topIndent
  164. + '; left:' + leftIndent +';');
  165. }
  166. else
  167. unreadMsgElement.innerHTML = '';
  168. var glower = $('#chat');
  169. if (show && !notificationInterval) {
  170. notificationInterval = window.setInterval(function() {
  171. glower.toggleClass('active');
  172. }, 800);
  173. }
  174. else if (!show && notificationInterval) {
  175. window.clearInterval(notificationInterval);
  176. notificationInterval = false;
  177. glower.removeClass('active');
  178. }
  179. }
  180. /**
  181. * Scrolls chat to the bottom.
  182. */
  183. function scrollChatToBottom() {
  184. setTimeout(function() {
  185. $('#chatconversation').scrollTop(
  186. $('#chatconversation')[0].scrollHeight);
  187. }, 5);
  188. }
  189. return my;
  190. }(Chat || {}));