testing breadcrumb images

public/src/forum/topic.js

@@ -351,10 +351,82 @@ define(function() {
 
 
 		socket.on('api:get_users_in_room', function(data) {
-			var activeEl = $('#thread_active_users');
-			if (activeEl.length)
-				activeEl.html(data);
+			if(data) {
+				var activeEl = $('#thread_active_users');
 
+				function createUserIcon(uid, picture, userslug, username) {
+					if(!activeEl.find("[href='/user/"+ data.users[i].userslug + "']").length) {
+						var userIcon = $('<img src="'+ picture +'"/>');
+						userIcon.css('height', '24px');
+
+						var userLink = $('<a href="/user/' + userslug + '"></a>').append(userIcon);
+						userLink.attr('data-uid', uid);
+
+						userLink.tooltip({
+							placement: 'left',
+							title: username
+						});
+
+						return userLink;
+					}
+				}
+
+				// remove users that are no longer here
+				activeEl.children().each(function(index, element) {
+					if(element) {
+						var uid = $(element).attr('data-uid');
+						for(var i=0; i<data.users.length; ++i) {
+							if(data.users[i].uid == uid) {
+								return;
+							}
+						}
+						$(element).remove();
+					}
+				});
+
+				var i=0;
+				// add self
+				for(i = 0; i<data.users.length; ++i) {
+					if(data.users[i].uid == app.uid) {
+						var icon = createUserIcon(data.users[i].uid, data.users[i].picture, data.users[i].userslug, data.users[i].username);
+						activeEl.prepend(icon);
+						data.users.splice(i, 1);
+						break;
+					}
+				}
+				// add other users
+				for(i=0; i<data.users.length; ++i) {
+					icon = createUserIcon(data.users[i].uid, data.users[i].picture, data.users[i].userslug, data.users[i].username)
+					activeEl.append(icon);
+					if(activeEl.children().length > 8) {
+						break;
+					}
+				}
+
+				var remainingUsers = data.users.length - 9;
+				remainingUsers = remainingUsers < 0 ? 0 : remainingUsers;
+				var anonymousCount = parseInt(data.anonymousCount, 10);
+				activeEl.find('.anon').remove();
+				if(anonymousCount || remainingUsers) {
+
+					var anonLink = $('<i class="icon-user anon"></i>');
+					anonLink.css('padding', '5px');
+					activeEl.append(anonLink);
+
+					var title = '';
+					if(remainingUsers && anonymousCount)
+						title = remainingUsers + ' more user(s) and ' + anonymousCount + ' guest(s)';
+					else if(remainingUsers)
+						title = remainingUsers + ' more user(s)';
+					else
+						title = anonymousCount + ' guest(s)';
+
+					anonLink.tooltip({
+						placement: 'left',
+						title: title
+					});
+				}
+			}
 			app.populate_online_users();
 		});