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.

ContactList.js 5.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. var numberOfContacts = 0;
  2. var notificationInterval;
  3. /**
  4. * Updates the number of participants in the contact list button and sets
  5. * the glow
  6. * @param delta indicates whether a new user has joined (1) or someone has
  7. * left(-1)
  8. */
  9. function updateNumberOfParticipants(delta) {
  10. //when the user is alone we don't show the number of participants
  11. if(numberOfContacts === 0) {
  12. $("#numberOfParticipants").text('');
  13. numberOfContacts += delta;
  14. } else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
  15. ContactList.setVisualNotification(true);
  16. numberOfContacts += delta;
  17. $("#numberOfParticipants").text(numberOfContacts);
  18. }
  19. }
  20. /**
  21. * Creates the avatar element.
  22. *
  23. * @return the newly created avatar element
  24. */
  25. function createAvatar(id) {
  26. var avatar = document.createElement('img');
  27. avatar.className = "icon-avatar avatar";
  28. avatar.src = "https://www.gravatar.com/avatar/" + id + "?d=wavatar&size=30";
  29. return avatar;
  30. }
  31. /**
  32. * Creates the display name paragraph.
  33. *
  34. * @param displayName the display name to set
  35. */
  36. function createDisplayNameParagraph(displayName) {
  37. var p = document.createElement('p');
  38. p.innerText = displayName;
  39. return p;
  40. }
  41. /**
  42. * Indicates that the display name has changed.
  43. */
  44. $(document).bind( 'displaynamechanged',
  45. function (event, peerJid, displayName) {
  46. if (peerJid === 'localVideoContainer')
  47. peerJid = connection.emuc.myroomjid;
  48. var resourceJid = Strophe.getResourceFromJid(peerJid);
  49. var contactName = $('#contactlist #' + resourceJid + '>p');
  50. if (contactName && displayName && displayName.length > 0)
  51. contactName.html(displayName);
  52. });
  53. function stopGlowing(glower) {
  54. window.clearInterval(notificationInterval);
  55. notificationInterval = false;
  56. glower.removeClass('glowing');
  57. if (!ContactList.isVisible()) {
  58. glower.removeClass('active');
  59. }
  60. }
  61. /**
  62. * Contact list.
  63. */
  64. var ContactList = {
  65. /**
  66. * Indicates if the chat is currently visible.
  67. *
  68. * @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> -
  69. * otherwise
  70. */
  71. isVisible: function () {
  72. return $('#contactlist').is(":visible");
  73. },
  74. /**
  75. * Adds a contact for the given peerJid if such doesn't yet exist.
  76. *
  77. * @param peerJid the peerJid corresponding to the contact
  78. * @param id the user's email or userId used to get the user's avatar
  79. */
  80. ensureAddContact: function (peerJid, id) {
  81. var resourceJid = Strophe.getResourceFromJid(peerJid);
  82. var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
  83. if (!contact || contact.length <= 0)
  84. ContactList.addContact(peerJid, id);
  85. },
  86. /**
  87. * Adds a contact for the given peer jid.
  88. *
  89. * @param peerJid the jid of the contact to add
  90. * @param id the email or userId of the user
  91. */
  92. addContact: function (peerJid, id) {
  93. var resourceJid = Strophe.getResourceFromJid(peerJid);
  94. var contactlist = $('#contactlist>ul');
  95. var newContact = document.createElement('li');
  96. newContact.id = resourceJid;
  97. newContact.className = "clickable";
  98. newContact.onclick = function (event) {
  99. if (event.currentTarget.className === "clickable") {
  100. $(ContactList).trigger('contactclicked', [peerJid]);
  101. }
  102. };
  103. newContact.appendChild(createAvatar(id));
  104. newContact.appendChild(createDisplayNameParagraph("Participant"));
  105. var clElement = contactlist.get(0);
  106. if (resourceJid === Strophe.getResourceFromJid(connection.emuc.myroomjid)
  107. && $('#contactlist>ul .title')[0].nextSibling.nextSibling) {
  108. clElement.insertBefore(newContact,
  109. $('#contactlist>ul .title')[0].nextSibling.nextSibling);
  110. }
  111. else {
  112. clElement.appendChild(newContact);
  113. }
  114. updateNumberOfParticipants(1);
  115. },
  116. /**
  117. * Removes a contact for the given peer jid.
  118. *
  119. * @param peerJid the peerJid corresponding to the contact to remove
  120. */
  121. removeContact: function (peerJid) {
  122. var resourceJid = Strophe.getResourceFromJid(peerJid);
  123. var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
  124. if (contact && contact.length > 0) {
  125. var contactlist = $('#contactlist>ul');
  126. contactlist.get(0).removeChild(contact.get(0));
  127. updateNumberOfParticipants(-1);
  128. }
  129. },
  130. setVisualNotification: function (show, stopGlowingIn) {
  131. var glower = $('#contactListButton');
  132. if (show && !notificationInterval) {
  133. notificationInterval = window.setInterval(function () {
  134. glower.toggleClass('active glowing');
  135. }, 800);
  136. }
  137. else if (!show && notificationInterval) {
  138. stopGlowing(glower);
  139. }
  140. if (stopGlowingIn) {
  141. setTimeout(function () {
  142. stopGlowing(glower);
  143. }, stopGlowingIn);
  144. }
  145. },
  146. setClickable: function (resourceJid, isClickable) {
  147. var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
  148. if (isClickable) {
  149. contact.addClass('clickable');
  150. } else {
  151. contact.removeClass('clickable');
  152. }
  153. }
  154. };
  155. module.exports = ContactList;