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

189 lines
5.3 KiB
JavaScript
Raw Normal View History

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) {
//when the user is alone we don't show the number of participants
if(numberOfContacts === 0) {
$("#numberOfParticipants").text('');
numberOfContacts += delta;
} else if(numberOfContacts !== 0 && !ContactList.isVisible()) {
ContactList.setVisualNotification(true);
numberOfContacts += delta;
$("#numberOfParticipants").text(numberOfContacts);
}
}
2015-01-07 14:54:03 +00:00
/**
* Creates the avatar element.
*
* @return the newly created avatar element
*/
function createAvatar(id) {
var avatar = document.createElement('img');
avatar.className = "icon-avatar avatar";
avatar.src = "https://www.gravatar.com/avatar/" + id + "?d=wavatar&size=30";
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)
{
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
* @param id the user's email or userId used to get the user's avatar
*/
2015-01-07 14:54:03 +00:00
ensureAddContact: function (peerJid, id) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
var contact = $('#contactlist>ul>li[id="' + resourceJid + '"]');
if (!contact || contact.length <= 0)
2015-01-07 14:54:03 +00:00
ContactList.addContact(peerJid, id);
},
/**
* Adds a contact for the given peer jid.
*
* @param peerJid the jid of the contact to add
* @param id the email or userId of the user
*/
2015-01-07 14:54:03 +00:00
addContact: function (peerJid, id) {
var resourceJid = Strophe.getResourceFromJid(peerJid);
var contactlist = $('#contactlist>ul');
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(id));
2015-03-09 15:50:13 +00:00
newContact.appendChild(createDisplayNameParagraph("participant"));
var clElement = contactlist.get(0);
if (resourceJid === APP.xmpp.myResource()
2015-01-07 14:54:03 +00:00
&& $('#contactlist>ul .title')[0].nextSibling.nextSibling) {
clElement.insertBefore(newContact,
2015-01-07 14:54:03 +00:00
$('#contactlist>ul .title')[0].nextSibling.nextSibling);
}
else {
clElement.appendChild(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);
var contact = $('#contactlist>ul>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) {
var contact = $('#contactlist>ul>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);
var contactName = $('#contactlist #' + resourceJid + '>p');
if (contactName && displayName && displayName.length > 0)
contactName.html(displayName);
2015-01-07 14:54:03 +00:00
}
};
2015-01-07 14:54:03 +00:00
module.exports = ContactList;