diff --git a/public/css/style.less b/public/css/style.less
index 0850e2b562..13c2f43c56 100644
--- a/public/css/style.less
+++ b/public/css/style.less
@@ -260,3 +260,16 @@ footer.footer {
}
}
}
+
+
+#thread_active_users {
+ float: right;
+ color: rgb(153,153,153);
+
+}
+
+#thread_active_users strong {
+ color: rgb(100,100,100);
+ font-weight: 600;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/public/templates/topic.tpl b/public/templates/topic.tpl
index 1359100584..29628a6641 100644
--- a/public/templates/topic.tpl
+++ b/public/templates/topic.tpl
@@ -2,9 +2,8 @@
-
-
@@ -48,7 +47,24 @@ jQuery('document').ready(function() {
ajaxify.register_events(['event:rep_up', 'event:rep_down', 'event:new_post', 'api:get_users_in_room']);
socket.on('api:get_users_in_room', function(users) {
- document.getElementById('thread_active_users').innerHTML = (users.uids.join(', ')) + ' are browsing this thread';
+ var anonymous = users.anonymous,
+ usernames = users.usernames,
+ usercount = usernames.length;
+
+ for (var i = 0, ii=usercount; i' + usernames[i] + '';
+ }
+
+ // headexplosion.gif for fun, to see if I could do this in one line of code. feel free to refactor haha
+ var active =
+ ((usercount === 1) ? usernames[0] : '')
+ + ((usercount === 2 && anonymous === 0) ? usernames[0] + ' and ' + usernames[1] : '')
+ + ((usercount > 2 && anonymous === 0) ? usernames.join(', ').replace(/,([^,]*)$/, ", and$1") : '')
+ + (usercount > 1 && anonymous > 0 ? usernames.join(', ') : '')
+ + ((anonymous > 0) ? (usercount > 0 ? ' and ': '') + anonymous + ' guest' + (anonymous.length > 1 ? 's are': ' is') : '')
+ + (anonymous === 0 ? (usercount > 1 ? ' are' : ' is') : '') + ' browsing this thread';
+
+ document.getElementById('thread_active_users').innerHTML = active;
});
socket.on('event:rep_up', function(data) {
diff --git a/src/websockets.js b/src/websockets.js
index 8c888f11cf..e7dc1276b5 100644
--- a/src/websockets.js
+++ b/src/websockets.js
@@ -6,7 +6,10 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
(function(io) {
var modules = null,
users = {},
- rooms = {};
+ rooms = {
+ 'users' : {},
+ 'anonymous' : {}
+ };
global.io = io;
module.exports.init = function() {
@@ -70,25 +73,39 @@ var SocketIO = require('socket.io').listen(global.server,{log:false}),
- socket.on('event:enter_room', function(data) {
+ socket.on('event:enter_room', function(data) {
if (data.leave !== null) socket.leave (data.leave);
socket.join(data.enter);
- rooms[data.enter] = rooms[data.enter] || {};
+ rooms.users[data.enter] = rooms.users[data.enter] || {};
if (uid) {
- rooms[data.enter][uid] = true;
- if (rooms[data.leave]) {
- delete rooms[data.leave][uid];
+ rooms.users[data.enter][uid] = true;
+ if (rooms.users[data.leave]) {
+ delete rooms.users[data.leave][uid];
}
} else {
- rooms[data.enter].anonymous = rooms[data.enter].anonymous ? rooms[data.enter].anonymous + 1 : 1;
- rooms[data.leave].anonymous = rooms[data.leave].anonymous ? rooms[data.enter].anonymous - 1 : 0;
+ rooms.anonymous[data.enter] = (rooms.anonymous[data.enter] || 0) + 1;
+ rooms.anonymous[data.leave] = rooms.anonymous[data.leave] || 0;
}
- socket.emit('api:get_users_in_room', {
- uids: Object.keys(rooms[data.enter] || {}),
- anonymous: rooms[data.enter] ? rooms[data.enter].anonymous : 0
+ var uids = Object.keys(rooms.users[data.enter] || {});
+
+ if (uids.length == 0) {
+ socket.emit('api:get_users_in_room', {
+ usernames: [],
+ uids: [],
+ anonymous: rooms.anonymous[data.enter] || 0
+ });
+ }
+ modules.user.get_usernames_by_uids(uids, function(usernames) {
+ socket.emit('api:get_users_in_room', {
+ usernames: usernames,
+ uids: uids,
+ anonymous: rooms.anonymous[data.enter] || 0
+ });
});
+
+
});
// BEGIN: API calls (todo: organize)