jiti-meet/modules/UI/side_pannels/contactlist/ContactList.js

194 lines
5.4 KiB
JavaScript
Raw Normal View History

/* global $, APP, Strophe */
var Avatar = require('../../avatar/Avatar');
2015-01-07 14:54:03 +00:00
var numberOfContacts = 0;
var notificationInterval;
/**
2015-01-07 14:54:03 +00:00
* Updates the number of participants in the contact list button and sets
* the glow
* @param delta indicates whether a new user has joined (1) or someone has
* left(-1)
*/
2015-01-07 14:54:03 +00:00
function updateNumberOfParticipants(delta) {
numberOfContacts += delta;
if (numberOfContacts === 1) {
// when the user is alone we don't show the number of participants
2015-01-07 14:54:03 +00:00
$("#numberOfParticipants").text('');
ContactList.setVisualNotification(false);
} else if (numberOfContacts > 1) {
ContactList.setVisualNotification(!ContactList.isVisible());
2015-01-07 14:54:03 +00:00
$("#numberOfParticipants").text(numberOfContacts);
} else {
console.error("Invalid number of participants: " + numberOfContacts);
2015-01-07 14:54:03 +00:00
}
}
2015-01-07 14:54:03 +00:00
/**
* Creates the avatar element.
*
* @return {object} the newly created avatar element
2015-01-07 14:54:03 +00:00
*/
function createAvatar(jid) {
2015-01-07 14:54:03 +00:00
var avatar = document.createElement('img');
avatar.className = "icon-avatar avatar";
avatar.src = Avatar.getContactListUrl(jid);
2015-01-07 14:54:03 +00:00
return avatar;
}
/**
* Creates the display name paragraph.
*
* @param displayName the display name to set
*/
2015-03-09 15:50:13 +00:00
function createDisplayNameParagraph(key, displayName) {
2015-01-07 14:54:03 +00:00
var p = document.createElement('p');
2015-03-09 15:50:13 +00:00
if(displayName)
p.innerText = displayName;
else if(key) {
2015-03-09 15:50:13 +00:00
p.setAttribute("data-i18n",key);
p.innerText = APP.translation.translateString(key);
}
2015-01-07 14:54:03 +00:00
return p;
}
function stopGlowing(glower) {
window.clearInterval(notificationInterval);
notificationInterval = false;
glower.removeClass('glowing');
if (!ContactList.isVisible()) {
glower.removeClass('active');
}
}
/**
* Contact list.
*/
var ContactList = {
/**
* Indicates if the chat is currently visible.
*
* @return <tt>true</tt> if the chat is currently visible, <tt>false</tt> -
* otherwise
*/
2015-01-07 14:54:03 +00:00
isVisible: function () {
return $('#contactlist').is(":visible");
2015-01-07 14:54:03 +00:00
},
/**
* Adds a contact for the given peerJid if such doesn't yet exist.
*
* @param peerJid the peerJid corresponding to the contact
*/
ensureAddContact: function (peerJid) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
2015-06-19 13:45:39 +00:00
var contact = $('#contacts>li[id="' + resourceJid + '"]');
if (!contact || contact.length <= 0)
ContactList.addContact(peerJid);
2015-01-07 14:54:03 +00:00
},
/**
* Adds a contact for the given peer jid.
*
* @param peerJid the jid of the contact to add
*/
addContact: function (peerJid) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
2015-06-19 13:45:39 +00:00
var contactlist = $('#contacts');
var newContact = document.createElement('li');
newContact.id = resourceJid;
newContact.className = "clickable";
2015-01-07 14:54:03 +00:00
newContact.onclick = function (event) {
if (event.currentTarget.className === "clickable") {
$(ContactList).trigger('contactclicked', [peerJid]);
}
};
newContact.appendChild(createAvatar(peerJid));
2015-03-09 15:50:13 +00:00
newContact.appendChild(createDisplayNameParagraph("participant"));
2015-06-19 13:45:39 +00:00
if (resourceJid === APP.xmpp.myResource()) {
contactlist.prepend(newContact);
}
else {
2015-06-19 13:45:39 +00:00
contactlist.append(newContact);
}
updateNumberOfParticipants(1);
2015-01-07 14:54:03 +00:00
},
/**
* Removes a contact for the given peer jid.
*
* @param peerJid the peerJid corresponding to the contact to remove
*/
2015-01-07 14:54:03 +00:00
removeContact: function (peerJid) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
2015-06-19 13:45:39 +00:00
var contact = $('#contacts>li[id="' + resourceJid + '"]');
if (contact && contact.length > 0) {
var contactlist = $('#contactlist>ul');
contactlist.get(0).removeChild(contact.get(0));
updateNumberOfParticipants(-1);
}
2015-01-07 14:54:03 +00:00
},
2015-01-07 14:54:03 +00:00
setVisualNotification: function (show, stopGlowingIn) {
var glower = $('#contactListButton');
if (show && !notificationInterval) {
notificationInterval = window.setInterval(function () {
glower.toggleClass('active glowing');
}, 800);
}
else if (!show && notificationInterval) {
2015-01-07 14:54:03 +00:00
stopGlowing(glower);
}
2015-01-07 14:54:03 +00:00
if (stopGlowingIn) {
setTimeout(function () {
stopGlowing(glower);
}, stopGlowingIn);
}
2015-01-07 14:54:03 +00:00
},
2015-01-07 14:54:03 +00:00
setClickable: function (resourceJid, isClickable) {
2015-06-19 13:45:39 +00:00
var contact = $('#contacts>li[id="' + resourceJid + '"]');
2015-01-07 14:54:03 +00:00
if (isClickable) {
contact.addClass('clickable');
} else {
contact.removeClass('clickable');
}
},
onDisplayNameChange: function (peerJid, displayName) {
if (peerJid === 'localVideoContainer')
peerJid = APP.xmpp.myJid();
var resourceJid = Strophe.getResourceFromJid(peerJid);
2015-06-19 13:45:39 +00:00
var contactName = $('#contacts #' + resourceJid + '>p');
if (contactName && displayName && displayName.length > 0)
contactName.html(displayName);
},
userAvatarChanged: function (resourceJid, contactListUrl) {
// set the avatar in the contact list
var contact = $('#' + resourceJid + '>img');
if (contact && contact.length > 0) {
contact.get(0).src = contactListUrl;
}
2015-01-07 14:54:03 +00:00
}
};
2015-01-07 14:54:03 +00:00
module.exports = ContactList;