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();
 		});
 

public/src/templates.js

@@ -172,13 +172,12 @@
 				template_data['relative_path'] = RELATIVE_PATH;
 
 			translator.translate(templates[tpl_url].parse(template_data), function (translatedTemplate) {
-				
+
 				$('#content').html(translatedTemplate);
 
 				jQuery('#content [template-variable]').each(function (index, element) {
 					var value = null;
-					console.log($(element).attr('value'));
-					console.log($(element).attr('template-variable'));
+
 					switch ($(element).attr('template-type')) {
 						case 'boolean':
 							value = ($(element).val() === 'true' || $(element).val() === '1') ? true : false;

src/websockets.js

@@ -157,8 +157,7 @@ module.exports.init = function(io) {
 
 				for (var i = 0; i < clients.length; ++i) {
 					var hs = clients[i].handshake;
-
-					if (hs && !users[sessionID]) {
+					if (hs && clients[i].state.user.uid === 0) {
 						++anonCount;
 					}
 				}
@@ -185,11 +184,13 @@ module.exports.init = function(io) {
 
 
 			if (uids.length === 0) {
-				io.sockets. in (roomName).emit('api:get_users_in_room', userList([], anonymousCount, 0));
+				io.sockets. in (roomName).emit('api:get_users_in_room', { users: [], anonymousCount:0 });
 			} else {
-				user.getMultipleUserFields(uids, ['username', 'userslug'], function(err, users) {
-					if (!err)
-						io.sockets. in (roomName).emit('api:get_users_in_room', userList(users, anonymousCount, users.length));
+				user.getMultipleUserFields(uids, ['uid', 'username', 'userslug', 'picture'], function(err, users) {
+					//if (!err)
+					//io.sockets. in (roomName).emit('api:get_users_in_room', userList(users, anonymousCount, users.length));
+					if(!err)
+						io.sockets. in (roomName).emit('api:get_users_in_room', { users: users, anonymousCount:anonymousCount });
 				});
 			}
 		}